---
title: "ウォークスルー:ページに検索機能を追加する"
slug: "walkthrough--adding-search-functionality-to-your-page"
abstract: "SXAでの検索の使い方と設定方法。"
---
# ウォークスルー:ページに検索機能を追加する

訪問者が探しているものを素早く見つけられるように、SXAには柔軟な即時検索機能が備わっています。ツールボックスからは、検索ボックスを追加するレンダリングや検索結果をソート・フィルタリングするレンダリングなど、さまざまな検索レンダリングが用意されています。これにより、サイトにシンプルな検索ソリューションを簡単に設定できます。

例えば、検索クエリボックスを含み、ページ番号付きで結果を一覧表示する基本的な検索ソリューションをページに追加できます。

> !注検索コンポーネントの検索リクエスト結果を見るにはプレビューモードに切り替える必要があります。

このウォークスルーでは、以下の方法を説明します:

-   Search Boxのレンダリングを追加してください
-   Search Results レンダリングを追加してください
-   ページセレクタのレンダリングを追加してください

## Search Boxのレンダリングを追加してください

訪問者があなたのサイトを検索できるようにするために、ページに検索ボックスを追加できます。デフォルトでは、Search Boxレンダリングで検索ボックスがページに追加されます。アイテムの設定やプロパティの変更によって検索ボックスをカスタマイズできます。

ページに検索ボックスを追加するには:

1.  ツールボックスから、**Search Box**レンダリングをページにドラッグします。
    
2.  検索ボックスの「 **関連コンテンツ選択** 」ダイアログボックスで「デフォルトアイテム」を選択してください。
    
3.  ページの検索ボックスのテキストを変更するには、**Searchボックス** のツールバーで **「コンポーネント設定項目を編集**![48FD3F5A8B424DC5BFD89D38F4AF430F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/48FD3F5A8B424DC5BFD89D38F4AF430F.png)」をクリックします。
    
    ![Click edit to display the search box fields.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/3B08EF43FC7E49B9B0978F17EE3435CE.png)
    
4.  ダイアログボックスで以下のフィールドを編集し、**OK**をクリックします。
    
    -   **Search button text** – レンダリングボタンのテキストです。このフィールドを空にすると、そのボタンはページ上に表示されません。
        
    -   **テキストボックスプレースホルダーテキスト** – 期待値を説明するためのヒントとして機能する検索ボックス内のテキスト。
        
    -   **Search テキストボックスラベル**– 検索レンダリングのタイトル。
        
        例えば、以下のフィールドです:
        
        ![Enter the search button text and the search box placeholder text.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/E63E311BD8A14E388494B91A6A3D7DD9.png)
        
        ページに以下の検索ボックスを表示します:
        
        ![Search box result after setting the fields.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/917C7FE8617B455A90FAB715DD10ED2E.png)
        
5.  例えば、Search Boxのレンダリングプロパティを変更したい場合は、検索範囲や検索キーワードのヒントを追加したい場合は、**Search Box**ツールバーで**「More」をクリックし、「****Edit component properties**」をクリックしてください。
    
6.  **コントロールプロパティ**のダイアログボックスでは、基本的な検索解についてはデフォルト値をそのままにできます。より複雑な解法の場合は、以下のフィールドを編集できます:
    
    -   **Search Results signature** – 特定のSearch Resultsレンダリングの固有の署名を入力して検索結果を制限します。ページに複数の検索結果が表示されている場合に便利です。
        
    -   **ターゲット署名** – もし別の検索結果ページを作成した場合は、そのページの*Search Results*レンダリングの署名をここに入力してください。
        
    -   **Search Scope** – 検索結果を制限するためにスコープを選択します。
        
    -   **最大予測結果カウント** – ドロップダウンに表示される予測結果の最大数を設定します。このフィールドを空にすると予測は表示されません。
        
    -   **Search Results Page** – 別のページに移動したい場合は、特定の検索ページを選択してください。
        
        > !注*Search結果ページ* は、*Search Results*コンポーネントを含むウェブサイト上の別のページです。このページは、ユーザーがサイト内のどこからでも検索を行った際に検索結果を表示するランディングページとして機能します。通常、このページには*Search Box*、*Page Selector*、*Sort Results*、そしていくつかのフィルターなど、他にも関連する検索コンポーネントが含まれています。 *Search Box*コンポーネントに*Search結果ページ* パラメータが設定されている場合、その検索結果ランディングページにリダイレクトされます。
        
    -   **検索テキストボックスを表示する – デフォルトで選択されています。検索テキストボックスを削除するにはクリアしてください。**
        
    -   **提案モード** – ドロップダウンボックスからオプションを選択してください。
        
        選択肢は以下の通りです:
        
        **検索結果を表示**:バリアントをレンダリングして表示した検索結果を表示します。ユーザーはクリックされたアイテムにリダイレクトされます。
        
        **予測表示**:検索エンジンが提供する検索語の予測を表示します。訪問者が検索提案をクリックすると、検索が実行されます。このモードはSolrのみでサポートされています。
        
        **検索結果を予測として表示**:クリックしたテキストを検索ボックスに入れ、検索が実行されます。
        
        > !警告SXAは「 sxaSuggester」という提案ツールを使っています。Solrで検索提案を設定する場合は、必ずその名前を使ってください。
        

## Search Resultsレンダリングを追加してください

ユーザーが検索結果を見るには、ページにSearch Resultsレンダリングを追加する必要があります。簡単な解決策としては、検索結果を同じページに表示させることができます。

Search Resultsレンダリングを追加するには:

1.  検索結果セクションをページに追加するには、ツールボックスから **Search Results** レンダリングをページにドラッグします。
2.  **ページの検索ボックスのテキストを変更するには、Search結果****ツールバーで「コンポーネント設定項目を編集**」をクリックし**検索で結果が出なかった場合に表示したいテキストを入力してください。「OK」をクリックします。**
3.  例えば、Search Resultsのレンダリングパラメータを変更したい場合は、「関連 **コンテンツの選択** 」ダイアログボックスで「デフォルトアイテム」を選択してください。
4.  **コントロールプロパティ**ダイアログボックスで、検索結果の配置方法を指定するために以下のフィールドを編集してください:
    -   **Search results signature** – 特定のSearch Resultsレンダリングの固有の署名を入力して検索結果を制限します。ページに複数の検索結果が表示されていて、特定の検索結果だけを絞り込みたい場合に便利です。このフィールドを空にすると、署名なしのすべてのSearch Resultsレンダリングがフィルターされます。
    -   **Search Scope** – 検索結果を制限するためにスコープを選択します。
    -   **ページサイズ** – レンダリングで読み込みたい結果の数を入力します。
    -   **デフォルトの言語フィルタリング** – 検索に使いたい言語を選択してください。
    -   **デフォルトのソート順** – ページ上で結果の並べ替え方法を選択します。これは結果の並べ替えレンダリングが使われていない場合のみ使用されます。
    -   **条件が設定されていない場合** 、ユーザーが検索条件を提供するまで検索がトリガーされない場合、自動的に検索を起動します。

## ページセレクタのレンダリングを追加してください

ページセレクタのレンダリングでは、結果ページの表示方法を決定できます。表示されるページ数は、Search Resultsレンダリングで設定されたデフォルトのページサイズ、またはPage Sizeレンダリングが使用されている場合は、Page Sizeレンダリングで設定されたページサイズに依存します。

ページセレクタのレンダリングを追加するには:

1.  ツールボックスからページセ **レクター** のレンダリングをページにドラッグします。
    
2.  **ページセレクター**ツールバーで**「コンポーネント設定項目を編集**」をクリックします![93581C7A08B446E69F50AD3ECE04CE8E.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/93581C7A08B446E69F50AD3ECE04CE8E.png)。
    
3.  ダイアログボックスでフィールドを埋めて「OK」をクリックします **。**
    
    例えば、以下のフィールドです:
    
    ![Enter the page selector fields.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/29300FA9D01F4E1C865B7E171E860668.png)
    
    以下のように現れる:
    
    ![Page selector display after setting the fields.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/8AC80E53B5974F8AA3798CA2ADB94FDB.png)
    
4.  例えば、ページセレクタのレンダリングのプロパティを変更するには、**Searchボックス**で **「More** 」をクリックし、「 **コンポーネントプロパティを編集**」をクリックしてください。
    
5.  **コントロールプロパティ**ダイアログボックスで、以下のフィールドを編集してから**OK**をクリックします。
    
    -   **Search Results signature** – 特定のSearch Resultsレンダリングでフィルタリングしたい場合は、検索したいSearch Resultsレンダリングの署名(カンマで区切って)を入力してください。
    -   **折りたたみモードの閾値** – 多くのページで結果が期待される場合は、これらのページの一部を点で置き換えることができます。
    
    例えば、「 **折りたたみモードの閾値** フィールドで10」と入力すると、検索結果には以下の表示が表示されます。
    
    ![Example of using the collapsed mode threshold.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/3EB3735B8D044610B9FC967EB6E7C735.png)