入力支援環境の構築方法

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クラスを持つタグには下記の属性を設定します。

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

入力画面のサンプル

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. アップロードをクリックします。

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

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

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

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

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

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

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

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

クロールの実行

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

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

画面の確認

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

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

*　*　*

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