DrupalのSearch API入門 検索画面の作成と拡張モジュールの使用【後編】
Collection :
Drupal Advent Calendar 2021 の9日目を担当します。
前回の記事で、Search APIの概要と、重要な概念であるServerとIndexの設定まで完了したところです。今回は後編ということで、検索画面を作成する方法と、Search APIの拡張モジュールである「Facets」と「Autocomplete」に触れたいと思います。
検索画面の作成
ServerとIndexの設定が完了し、Drupalデータのインデックス化が済んだところで、次は検索を行う画面を作っていきます。エンドユーザーに提供する検索画面はどのように作成するかと言うと、DrupalのViews機能を用います。検索のフィルタリングやソートは、Views機能を用いて行うわけです。
Viewの作成
/admin/structure/views に移動し、 + Add view をクリックします。
- View name : Search
- Show : Index content index
- Create a page : チェックを入れる
保存をすると、Viewの詳細な設定画面が表示されます。
検索窓の追加
全文検索を行うための検索窓を追加するためには、FILTER CRITERIA の横の Add をクリックして、Fulltext search にチェックを入れます。次の画面で Expose this filter to visitors, to allow them to change it にチェックを入れて外部設置フィルターを有効化します。ちなみに、Required にチェックを入れると、検索窓にキーワードを入力して初めて検索結果（コンテンツ一覧）が表示されるようになります。
検索結果に表示されるフォーマットを整える
検索結果の画面には、該当コンテンツの「タイトル」と「検索結果の抜粋」を表示するようにしたいと思います。
FIELDS の横の Add をクリックして、Title にチェックを入れます。次の画面では Link to the Content にチェックを入れて Apply をクリックします。これでタイトルフィールドが追加されました。
次に検索結果の抜粋を追加していきます。FIELDS の横の Add をクリックして、Excerpt にチェックを入れます。次の画面はデフォルトのままで Apply をクリックします。
この時点で、FIELDS の中身は次のようになっていると思います。
最初から存在していた Content datasource: Tags (indexed field) は一旦削除してしまいましょう。クリックすると Remove ボタンが出てくるので削除できます。
最後に Save をクリックしてViewを保存します。
作成した検索画面を試してみる
/search に移動して作成した検索画面を見てみます。検索窓に色々入力してみてください。検索キーワードにマッチしたコンテンツを表示してくれます。
Search APIの豊富な拡張モジュール
Search APIはそれ自体が検索のための機能を提供するだけではなく、任意のバックエンドとの接続や便利な拡張機能を提供するためのフレームワークとしても機能します。そのためSearch APIを中心に、便利な関連モジュールが多数存在します。今回はその中でも「Fasets」モジュールと「Autocomplaete」モジュールを紹介します。
Facetsで多種多様な検索条件を追加しよう
例えば通販サイトを利用していると、検索条件に「色」や「サイズ」「価格帯」など様々なフィルタリングをかけられるサイトを見かけます。こういったナビゲーションメニューを「ファセットナビゲーション」や「ファセット検索」と呼びます。Facetsモジュールを導入することで、あのよく見るインターフェースを作成することができます。
Facetsモジュールのインストール
プロジェクトルート直下で、次の2つのコマンドを実行します。
# composerコマンドでモジュールをインストール
$ composer require drupal/facets
#drushコマンドでモジュールを有効化
$ drush pm:enable facets
Facetの追加
モジュールが有効化できたら、/admin/config/search/facets に移動して + Add facet をクリックします。
- Facet source :
View Search, display Page(上で作成したViewを選択) - Field :
Content type (type) - Name :
Content type
Save をクリックします。次の画面では以下のように設定します。
- Widget :
List of links - Show the amount of results : チェックを入れる
- Transform entity ID to label : チェックを入れる
- Operator :
AND
他はデフォルトのまま Save をクリックします。
作成したFacetをリージョンに追加
作成したFacetは、ブロックとしてリージョンに追加することが可能です。ここでは Sidebar リージョンに配置したいと思います。
/admin/structure/block に移動して、Sidebar の横の Place block ボタンをクリックします。配置できるブロックの一覧が表示されるので、その中からカテゴリが Facets となっている Content type という名前のブロックを見つけて、Place block をクリックします。
このブロックは検索画面のみ表示させるようにしたいので、ブロックの設定画面の Visibility の Pages 項目をクリックして、テキストエリアに /search と入力してブロックを保存します。
※ これで設定はOKなはずですが、UmamiプロフィールだとなぜかこのままではFacetブロックが表示されません。対処として同リージョンに適当なブロック、例えば「Powered by Drupal」ブロックを追加しておきます。これで暫定的ではありますがFacetブロックが表示されるようになります。
Autocomplete で検索ワードを自動保管しよう
キーワード検索の際に、入力したキーワードを自動保管してくれる機能を提供するのが「Autocomplete」モジュールです。
Autocompleteモジュールのインストール
プロジェクトルート直下で、次の2つのコマンドを実行します。
# composerコマンドでモジュールをインストール
$ composer require drupal/search_api_autocomplete
#drushコマンドでモジュールを有効化
$ drush pm:enable search_api_autocomplete
Autocompleteの設定
/admin/config/search/search-api/index/content_index/autocomplete に移動して、Search にチェックを入れます。
/admin/config/search/search-api/index/content_index/autocomplete/search/edit からさらに細かい設定を行うことができますが、デフォルトの設定だけでこんな感じでキーワードにマッチするコンテンツをサジェストしてくれます。
まとめ
DrupalのSearch API入門記事ということで、前編、後編の2回に分けてご紹介していきました。設定項目もたくさんあって柔軟に構成できるので、ぜひ色々触ってみてください。
参考資料
- Building amazing searches with Search API (Youtube)
- DrupalCon 2019 での、Search APIモジュールの作者の方によるデモセッションです
- Search API (Drupal.org プロジェクトページ)
- Search API Documentation
テクニカルトランスレーター Acquia
