簡単導入! OSS全文検索サーバFess入門(33) 入力支援環境の構築方法

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

クロールとラベルの設定

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

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

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

項目名	値
名前	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	ドキュメントの最終更新日時