![Digital Commerce and Search](/sites/default/files/styles/blog_hero_image_mobile/public/media/image/2021-12/Artboard%20%E2%80%93%2029.png?itok=wYeKLQGu) Image ![](/sites/default/files/styles/post_content_attribution_headshot/public/legacy/images/2019-10/hikaru_4.jpg?itok=Rjs7mpHp) [丸山 ひかる](/jp/about-us/team/hikaru-maruyama) テクニカルトランスレーター Acquia ## コレクション [Drupal](/index%2ephp/jp/blog/series/drupal) # DrupalのSearch API入門 検索画面の作成と拡張モジュールの使用【後編】 March 17, 2023 2 分で読めます [Share this blog post on LinkedIn ](https://www.linkedin.com/sharing/share-offsite/?url=https://www.acquia.com/index%2ephp/jp/markdownify/node/29476) [Share this blog post on Twitter ]() [Share this blog post via Email ]() 検索画面を作成する方法と、Search APIの拡張モジュールである「Facets」と「Autocomplete」に触れたいと思います。 ![Digital Commerce and Search](/sites/default/files/styles/blog_hero_image_mobile/public/media/image/2021-12/Artboard%20%E2%80%93%2029.png?itok=wYeKLQGu) ## Collection : [Drupal](/index%2ephp/jp/blog/series/drupal) [Drupal Advent Calendar 2021](https://qiita.com/advent-calendar/2021/drupal) の9日目を担当します。 [前回の記事](https://www.acquia.com/jp/blog/introduction-to-search-api-1)で、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の詳細な設定画面が表示されます。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.02.11.png?itok=jO6Qn1lw) ### 検索窓の追加 Image ![search api module](/sites/default/files/styles/wysiwyg_half_width_desktop/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.14.01.png?h=3ac1eb57&itok=DU079pQb) 全文検索を行うための検索窓を追加するためには、**FILTER CRITERIA** の横の **Add** をクリックして、**Fulltext search** にチェックを入れます。次の画面で **Expose this filter to visitors, to allow them to change it** にチェックを入れて外部設置フィルターを有効化します。ちなみに、**Required** にチェックを入れると、検索窓にキーワードを入力して初めて検索結果（コンテンツ一覧）が表示されるようになります。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen_Shot_2021-12-08_at_9_58_54.png?itok=xPIdsUc1) ### 検索結果に表示されるフォーマットを整える Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen_Shot_2021-12-08_at_10_17_07_copy.png?itok=vpcMH-SH) 検索結果の画面には、該当コンテンツの「タイトル」と「検索結果の抜粋」を表示するようにしたいと思います。 **FIELDS** の横の **Add** をクリックして、**Title** にチェックを入れます。次の画面では **Link to the Content** にチェックを入れて **Apply** をクリックします。これでタイトルフィールドが追加されました。 次に検索結果の抜粋を追加していきます。**FIELDS** の横の **Add** をクリックして、**Excerpt** にチェックを入れます。次の画面はデフォルトのままで **Apply** をクリックします。 この時点で、FIELDS の中身は次のようになっていると思います。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.11.02.png?itok=GEqkA78Y) 最初から存在していた **Content datasource: Tags (indexed field)** は一旦削除してしまいましょう。クリックすると **Remove** ボタンが出てくるので削除できます。 最後に **Save** をクリックしてViewを保存します。 ### 作成した検索画面を試してみる */search* に移動して作成した検索画面を見てみます。検索窓に色々入力してみてください。検索キーワードにマッチしたコンテンツを表示してくれます。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.17.07.png?itok=GKP0W05z) ## Search APIの豊富な拡張モジュール Search APIはそれ自体が検索のための機能を提供するだけではなく、任意のバックエンドとの接続や便利な拡張機能を提供するためのフレームワークとしても機能します。そのためSearch APIを中心に、[便利な関連モジュールが多数存在](https://www.drupal.org/docs/8/modules/search-api/extension-modules)します。今回はその中でも「[Fasets](https://www.drupal.org/project/facets)」モジュールと「[Autocomplaete](https://www.drupal.org/project/search_api_autocomplete)」モジュールを紹介します。 ## 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** と入力してブロックを保存します。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.48.56.png?itok=W7O_teub) ※ これで設定はOKなはずですが、UmamiプロフィールだとなぜかこのままではFacetブロックが表示されません。対処として同リージョンに適当なブロック、例えば「Powered by Drupal」ブロックを追加しておきます。これで暫定的ではありますがFacetブロックが表示されるようになります。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_no_crop_/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2010.53.05.png?itok=4QfualCH) ## 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* からさらに細かい設定を行うことができますが、デフォルトの設定だけでこんな感じでキーワードにマッチするコンテンツをサジェストしてくれます。 Image ![search api module](/sites/default/files/styles/wysiwyg_full_width_desktop/public/media/image/2021-12/Screen%20Shot%202021-12-08%20at%2011.25.57.png?h=943ed93b&itok=Pbig6zIy) ## まとめ DrupalのSearch API入門記事ということで、前編、後編の2回に分けてご紹介していきました。設定項目もたくさんあって柔軟に構成できるので、ぜひ色々触ってみてください。 ## 参考資料 - [Building amazing searches with Search API (Youtube)](https://www.youtube.com/watch?v=e5-3RZkKFOQ) - DrupalCon 2019 での、Search APIモジュールの作者の方によるデモセッションです - [Search API (Drupal.org プロジェクトページ)](https://www.drupal.org/project/search_api) - [Search API Documentation](https://www.drupal.org/docs/contributed-modules/search-api) Image ![](/sites/default/files/styles/post_content_attribution_headshot/public/legacy/images/2019-10/hikaru_4.jpg?itok=Rjs7mpHp) [丸山 ひかる](/index%2ephp/jp/about-us/team/hikaru-maruyama) テクニカルトランスレーター Acquia [Share this blog post on LinkedIn ](https://www.linkedin.com/sharing/share-offsite/?url=https://www.acquia.com/index%2ephp/jp/markdownify/node/29476) [Share this blog post on Twitter ]() [Share this blog post via Email ]() ## 関連記事 [全て表示する](/index%2ephp/jp/resources) [Image ![Digital Commerce and Search](/sites/default/files/styles/card_tablet/public/media/image/2021-04/digitalsearch.jpg?h=119335f7&itok=xNw0em3W) Blog Article 2 分 ###### DrupalのSearch API入門 概要と始め方【前編】 Search APIの入門記事として、Search APIの基本操作をご紹介します。 ](/index%2ephp/jp/blog/introduction-to-search-api-1) [Image ![intergration with elasticsearch](/sites/default/files/styles/card_tablet/public/media/image/2021-10/Screen%20Shot%202021-10-17%20at%2011.32.43.png?h=9580ed98&itok=uFKJRTMn) Blog Article 2 分 ###### Elasticsearch × Drupalで理解する日本語サイト内検索 スケーリングに優れたオープンソースの全文検索エンジンであるElasticsearchと、大規模サイトでの利用が多いオープンソースCMSのDrupalで、大量のコンテンツを日本語で検索可能にするサイト内検索の実装方法を解説しています。 ](/index%2ephp/jp/blog/intergration-with-drupal-and-elasticsearch) [Image ![drupal 20th birthday](/sites/default/files/styles/card_tablet/public/media/image/2021-01/drupalbirthday.jpg?h=40b41827&itok=B8uVr-QV) Blog Article 5 分 ###### Drupalが20周年を迎えました 20年前の2001年1月15日に、Drupal 1.0.0がリリースされました。 Drupalの生みの親であるDries BuytaertがDrupalの歴史を振り返ります。 ](/jp/blog/drupal-celebrates-20-years)