マイナビニュースマイナビ

入力支援環境の構築方法

【連載】

簡単導入! OSS全文検索サーバFess入門

【第33回】入力支援環境の構築方法

[2020/12/23 08:00]菅谷信介 ブックマーク ブックマーク

Fessでは、会員情報の入力フォームなどで、郵便番号を入力すると自動で住所が入力されるような入力支援機能も構築することができます。住所の入力に限らず、例えば業務システムで製品IDを選択すると製品名が自動で入力欄に入力されるようなシステムでも利用可能です。

Fessを利用した入力支援機能は「Form Assist」として、GitHub上で公開されています。今回は、こちらを使って使用方法を解説していきます。

Dockerの起動

Form AssistはDocker上に構築するので、Docker Desktopなどをインストールして、dockerコマンドと「docker-compose」を利用できるようにしてください。

次に「docker-formassist」をGitHubからクローンします。

$ git clone https://github.com/codelibs/docker-formassist.git

「setup.sh」を実行後、docker-composeコマンドを実行して起動します。

$ cd docker-formassist
$ bash ./bin/setup.sh
$ docker-compose up -d

setup.shでは、dataディレクトリ以下に必要なディレクトリを作成しています。

入力画面での設定方法

入力画面となるHTMLファイルに以下の行を追加します。

<script src="http://localhost/formassist/formassist/fess-form-assist.js"></script>

サジェスト表示対象と入力支援対象のフォーム群をfess-form-assistクラスの配下に入れてください。

<div class="fess-form-assist">
...
</div>

サジェストを表示させるにはサジェスト対象のINPUT要素にfess-suggestクラスを設定し、サジェスト選択時にアシストされる対象の要素にfess-assistクラスを設定します。

<input type="text" class="fess-suggest fess-assist" ・・・

fess-suggestクラスを持つタグには下記の属性を設定します。

属性 説明
data-fess_url FessのJSON APIのURL
data-label 検索対象のlabel
data-field サジェスト対象のフィールド名
data-results_num サジェスト結果の表示数
data-results サジェスト結果に表示するフィールドを設定(複数ある場合はカンマ区切り)
data-result_headers サジェスト結果の各フィールドの項目名を設定(複数ある場合はカンマ区切り)
data-assist_targets サジェストを選択した場合に入力支援される要素のIDを設定(未指定の場合は同一の「fess-form-assist」に属している全ての入力支援要素に適用されます)

fess-assit クラスを持つタグには下記の属性を設定します。

属性 説明
data-field 入力支援対象のフィールド名を設定

入力画面のサンプル

Form Assistではサンプルを用意しているので、そちらを参考にしてください。画面には「http://localhost/formassist/sample.html」でアクセス可能です。

サンプル

サンプル画面

以降はこのサンプルを用いて説明していきます。

表示データの作成

サジェストおよび入力支援するためのデータを作成します。今回はCSVファイルにデータを保存してインデックスを作成します。今回サンプルとして利用する以下のCSVファイル(client.csv)は「/opt/sample-data/」に置いてあります。

client_name,zip_code,address1,address2,person,phone_number,fax_number
山田工業,111-1111,東京都,千代田区,山田太郎,03-xxxx-0000,03-xxxx-1000
"HOGE CO., LTD.",222-2222,東京都,新宿区,John Smith,03-xxxx-0001,03-xxxx-1001

クロールとラベルの設定

データの作成ができたら、クロール設定とラベル設定を登録します。 設定情報もサンプルを用意しているので、管理画面からインポートして使います。

  1. 「http://localhost/admin」で管理画面にログインして左メニューの「システム情報」→「バックアップ」をクリックします。
  2. 「ファイルを選択」をクリックして、fess01/sample-data/配下にある「fess_basic_config.bulk」を指定します。
  3. アップロードをクリックします。

ラベル設定では以下が登録されます。

項目名
名前 client
client

データストアクロール設定は「CsvDataStore」を用いて、CSVファイルをクロールするように設定が登録されています。

そのクロール設定のパラメータは、以下の通りです。

directories=/opt/sample-data
fileEncoding=Shift_JIS
skipLines=1
quoteDisabled=false

パラメータは「キー=値」形式で記述します。設定するキーの詳細は、以下を参照してください。

キー 説明
directories CSVファイルが含まれるディレクトリ(.csvまたは.tsv)
files CSVファイル(直接指定する場合)
fileEncoding CSVファイルのエンコーディング
separatorCharacter 区切り文字
quoteDisabled 囲い文字の無効化(デフォルトでtrue)
skipLines スキップする行数

スクリプトには以下が登録されています。

url="client/" + cell1
label="client"
host="localhost"
site="localhost"
title=cell1
content=cell1+" "+cell2+" "+cell3+" "+cell4+" "+cell5+" "+cell6+" "+cell7
cache=cell1
digest=cell1
anchor=
content_length=(cell1+" "+cell2+" "+cell3+" "+cell4+" "+cell5+" "+cell6+" "+cell7).length()
last_modified=new java.util.Date()

name_assist=cell1
zip_cd_assist=cell2
address1_assist=cell3
address2_assist=cell4
person_assist=cell5
phone_assist=cell6
fax_assist=cell7

address_assist=cell3+cell4
キー 説明
url URL(検索結果に表示されるリンク)
host ホスト名
site サイトパス
title タイトル
content ドキュメントのコンテンツ(インデックス対象文字列)
cache ドキュメントのキャッシュ(インデックス対象ではない)
digest 検索結果に表示されるダイジェスト部分
anchor ドキュメントに含まれるリンク(通常は指定不要)
content_length ドキュメントの長さ
last_modified ドキュメントの最終更新日時

「last_modified」以降はサンプル画面の入力フィールド名です。 CSVファイル内のデータは「cell[数字]」で保持しているので、表示させたいフィールドに指定します。

クロールの実行

クロール設定ができたらクロールを実行してみましょう。

管理画面の左メニュー「システム」→「スケジューラ」で「Default Crawler」のジョブを開きます。「今すぐ開始」をクリックしてクローラを開始し、ジョブの状態が「実行中」から「有効」になるまで待ちます。

画面の確認

クロールが終わったら、サンプル画面「http://localhost/formassist/sample.html」にアクセスしてください。Clientフィールドに「山田」と入力するとサジェストが表示されます。

サジェスト

サジェスト

サジェストの表示をクリックすると、関連するフィールドに値が入力されます。

アシスト

アシスト

* * *

今回は、一般的な全文検索システムを構築する以外のFessの利用方法として、入力支援環境を構築する方法を紹介しました。業務システムなどでは、入力画面が複雑かつ入力項目が多い場合もありますが、Fessを利用した入力支援機能を実装することで、入力者のデータ入力効率を向上できるはずです。

著者紹介

菅谷 信介 (Shinsuke Sugaya)

Apache PredictionIOにて、コミッター兼PMCとして活動。また、自身でもCodeLibs Projectを立ち上げ、オープンソースの全文検索サーバFessなどの開発に従事。

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

一覧はこちら

連載目次

もっと知りたい!こちらもオススメ

「AIって何?」を知りたい全ての人に、この超入門本がお薦めなワケ

「AIって何?」を知りたい全ての人に、この超入門本がお薦めなワケ

3月22日、書籍『いちばんやさしいAI〈人工知能〉超入門』が発売された。専門用語を使わず、イラストを駆使した解説はAI初心者にも読みやすく、かつ体系的な学びが得られる1冊だ。世の中では既に多くのAI解説書が発行されているなか、なぜ今こうしたAI入門書を執筆したのか。著者であるNICT 大西可奈子氏に本書の狙いを伺った。

関連リンク

この記事に興味を持ったら"いいね!"を Click
Facebook で TECH+ の人気記事をお届けします
注目の特集/連載
[解説動画] Googleアナリティクス分析&活用講座 - Webサイト改善の正しい考え方
Slackで始める新しいオフィス様式
Google Workspaceをビジネスで活用する
ニューノーマル時代のオウンドメディア戦略
ミッションステートメント
次世代YouTubeクリエイターの成長戦略
IoTでできることを見つけるための発想トレーニング
教えてカナコさん! これならわかるAI入門
AWSではじめる機械学習 ~サービスを知り、実装を学ぶ~
Kubernetes入門
SAFeでつくる「DXに強い組織」~企業の課題を解決する13のアプローチ~
マイクロサービス時代に活きるフレームワーク Spring WebFlux入門
AWSで作るマイクロサービス
マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
セキュリティアワード特設ページ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

会員登録(無料)

ページの先頭に戻る