テーマで検索画面のデザインを切り替える

Fessの検索画面は標準のままでも十分に利用できますが、「社内ポータルの雰囲気に合わせたい」「FAQサイトやドキュメントサイトの検索など、用途に合った画面にしたい」といった要望は少なくありません。とはいえ、検索画面を一から作り込むには、HTMLやCSS、JavaScriptの知識と相応の作業時間が必要です。

Fess 15.9では、検索画面がHTML・CSS・JavaScriptで構成される「テーマ」で表示されるようになりました。テーマはZIPファイルとして管理画面から入れ替えられ、用途別に作られたテーマが「fess-themes」として公開されています。本記事では、このfess-themesのテーマをFessに導入して、検索画面のデザインを切り替える方法を紹介します。

今回は、Fess 15.9.0を利用して、手順を説明します。

テーマとは

テーマは、HTML・CSS・JavaScriptだけで構成された検索画面です。Fessの検索API（/api/v2/*）を呼び出して検索結果を表示するため、Fess本体のファイルを書き換える必要はありません。

Fess 15.9では、検索画面は常にテーマで表示されます。デフォルトテーマを設定していない場合は、Fessに同梱されている「bootstrap」テーマが使われます。つまり、これまで目にしていた標準の検索画面も、15.9以降はテーマの1つです。テーマを切り替えても、標準の画面にいつでも戻せます。

注意 Fess 15.8までのJSPベースの検索画面と、従来のJARプラグイン形式のテーマ（fess-theme-*）は、15.9で廃止されました。見た目を変更するにはテーマを利用します。

fess-themesで公開されているテーマ

fess-themesは、Fess用のテーマを集めたリポジトリです。各テーマはZIPファイルとして公開されており、Fess 15.9向けには次の11種類があります。

まずは、特別な設定なしで利用できる、デザイン重視のテーマです。

テーマ名	特徴
docuforge	ドキュメントサイト風のデザイン。左側に絞り込み用のサイドバーを常に表示
nomadkit	砂色を基調にした、暖かみのある配色のデザイン
rawblock	白と黒、太い罫線で構成したシンプルで力強いデザイン
voicebox	白黒に赤のアクセントを効かせた雑誌風のデザイン
docsearch	ドキュメント検索向け。Ctrl+K（Macでは⌘K）で開く検索パレットやライト／ダークモードに対応

次に、特定の用途に特化したテーマです。

テーマ名	特徴
helpdesk	FAQ・サポートサイト向け。回答をその場で開いて読める
codesearch	ソースコード検索向け。行番号付きでコードを表示
filesearch	ファイル検索向け。ファイルマネージャーのようにフォルダ単位で絞り込める
storefront	ECサイトの商品検索向け。検索結果を商品カードで表示
semanticlens	セマンティック検索向け。どの検索方式で一致したかを結果ごとに表示
mosaic	画像検索向け。サムネイルを並べたギャラリー形式で表示

用途特化のテーマのうち、filesearch以外は、それぞれの用途に合わせたFessの設定やインデックスを前提としています。テーマを切り替えるだけでは本来の画面にならない場合があるため、利用する際は、各テーマのREADMEで必要な設定を確認してください。

READMEは、Fess 15.9向けの15.9.xブランチのものを参照します。既定のmainブランチのREADMEは、開発中の次のバージョン（15.10）向けの内容です。

テーマのバージョンは、15.9.10のように「対応するFessの系列（15.9）＋テーマの更新番号」で表されます。Fess 15.9には、15.9で始まるバージョンのテーマを使います。更新番号は、テーマの更新に合わせて増えていくため、実際に表示されるバージョンは本記事と異なる場合があります。

今回は、「docuforge」を例に説明します。

テーマのインストール

ここでは、Fess 15.9.0が起動済みで、管理画面にログインできる状態から説明します。Fessの起動方法は、Fessのインストールガイドを参照してください。

テーマのインストールは、管理画面から行います。管理画面の左メニュー「システム」＞「テーマ」をクリックすると、登録済みのテーマの一覧が表示されます。最初は、同梱の「bootstrap」だけが表示されています。

• 

  テーマ一覧

画面下部の「テーマのインストール」では、公開されているテーマをリポジトリから取得してインストールできます。

1. 「名前」のプルダウンから「docuforge」を選択し、「選択」ボタンをクリックします。
2. 「バージョン」のプルダウンで、インストールするバージョンを選択します。
3. 「インストール」ボタンをクリックします。

• 

  テーマのインストール

「テーマをインストールしました: docuforge 15.9.10」と表示され、テーマ一覧に「docuforge」が追加されれば成功です。一覧では、テーマのサムネイル、名前、表示名、バージョンを確認できます。

デフォルトテーマの設定

インストールしただけでは、検索画面は切り替わりません。検索画面に適用するには、デフォルトテーマとして設定します。テーマ一覧の上部にある「デフォルトテーマ」のプルダウンから「DocuForge (docuforge)」を選択し、「設定」ボタンをクリックします。

• 

  デフォルトテーマの設定

「デフォルトテーマを docuforge に変更しました」と表示され、一覧の「デフォルト」列にチェックが付けば設定は完了です。設定はすぐに反映されるため、Fessを再起動する必要はありません。

• 

  デフォルトテーマ設定後

そのほかのインストール方法

管理画面のほかに、次の方法でもインストールできます。

• コマンド：ZIP版のFessでは、Fessのディレクトリでbin/fess-setup install theme docuforgeを実行します。バージョンを指定しない場合は、利用中のFessに合った最新のテーマがインストールされます。実行後は、「テーマ」画面の「再読み込み」ボタンをクリックするか、Fessを再起動してください。
• ZIPファイルのアップロード：インターネットに接続できない環境などでは、ZIPファイルを入手して、「テーマ」画面の「アップロード」ボタンからアップロードします。

ZIPファイルは、https://maven.codelibs.org/release/org/codelibs/fess/themes/[テーマ名]/[バージョン]/[テーマ名]-[バージョン].zipで公開されています。 ダウンロードしたZIPファイルは、展開せずにそのままアップロードします。

検索結果の確認

それでは、検索画面を確認してみましょう。 ブラウザでhttp://localhost:8080/にアクセスすると、トップページがdocuforgeのデザインに切り替わっています。

検索するには、あらかじめクロールを実行してインデックスを作成しておく必要があります。 クロールがまだの場合は、管理画面の左メニュー「クローラー」＞「ウェブ」＞「新規作成」をクリックして、以下のように入力し、「作成」ボタンをクリックします。

項目名	設定値
名前	Fess
URL	https://fess.codelibs.org/ja/
クロール対象とするURL	https://fess.codelibs.org/ja/.*
最大アクセス数	100

クロール設定の登録後、「システム」＞「スケジューラ」＞「Default Crawler」から「今すぐ開始」をクリックします。クロールが完了したら、検索フォームにキーワードを入力して検索します。

• 

  docuforgeの検索結果画面

docuforgeの検索結果画面では、画面の左側にサイドバーが常に表示され、期間やサイズ、ファイルの種別で検索結果を絞り込めます。サジェストや並び替え、詳細検索といった検索機能は、標準の検索画面と同じように利用できます。

別のテーマに切り替える

別のテーマを試したい場合は、同じ手順でテーマをインストールし、デフォルトテーマを選び直すだけです。複数のテーマをインストールしておけば、プルダウンの選択を変えるだけで見比べられます。たとえば「rawblock」に切り替えると、同じ検索結果でも、白と黒、太い罫線を基調にしたデザインに変わります。

• 

  rawblockの検索結果画面

標準の検索画面に戻すときは、「デフォルトテーマ」のプルダウンで「（デフォルトなし）」を選択して「設定」ボタンをクリックします。同梱の「bootstrap」テーマに戻ります。

不要になったテーマは、一覧の「削除」ボタンで削除できます。ただし、デフォルトテーマに設定中のテーマには「削除」ボタンが表示されません。削除する場合は、先に別のテーマか「（デフォルトなし）」に切り替えてください。

まとめ

今回は、Fess 15.9のテーマの仕組みと、fess-themesで公開されているテーマをFessに導入して検索画面のデザインを切り替える方法を紹介しました。

テーマの導入に必要なのは、管理画面からのインストールとデフォルトテーマの設定だけです。 ファイルの編集や再起動を必要とせず、標準の画面にもすぐに戻せるため、運用中の環境でも気軽に試せます。

社内ポータルやFAQサイトなど、利用シーンに合わせて検索画面を変えたいときは、目的に近いテーマを選ぶだけで、画面を作り込む手間を大きく減らせます。 検索画面の見た目や使い勝手を見直したいときは、ぜひfess-themesをお試しください。