--- title: "SXAの検索コンポーネントを活用してください" slug: "use-the-sxa-search-components" abstract: "Search box、Search Results、Load More、Results Variant Selectorなどの検索コンポーネントの使い方。" --- # SXAの検索コンポーネントを活用してください SXAには多数のあらかじめ定義された検索コンポーネントが付属しています。検索コンポーネントをページに追加すると、自動的に互いに相互作用します。同じページに複数の検索を行いたい場合は、コンポーネントの署名プロパティを変更する必要があります。 > !注検索コンポーネントの検索リクエスト結果を見るには*Preview*モードに切り替える必要があります。 ## Search Boxコンポーネントを活用してください 訪問者があなたのサイトを検索できるようにするために、ページに検索ボックスを追加できます。 Search Boxコンポーネントを使用するには: 1. ツールボックスから、Search Boxコンポーネントをページにドラッグします。 2. 検索ボックスの「 **関連コンテンツ選択** 」ダイアログボックスで、*Default*アイテムをクリックしてください。 3. ページ上の検索ボックスのテキストを変更するには、Search Boxツールバーで **「コンポーネント設定項目を編集**」をクリックします。「 **編集** 」をクリックすると検索ボックスのフィールドが表示されます。ダイアログボックス内で、以下のフィールドを編集できます: フィールド 概要 Searchボタンのテキスト ボタンのテキストを入力してください。このフィールドを空にすると、ボタンはページ上に表示されません。 テキストボックスのプレースホルダーテキスト 検索ボックス内の期待値を説明するヒントとして機能するテキストを入力してください。 Searchテキストボックスラベル 検索レンダリング用のタイトルを入力します。 4. Search Boxのレンダリングプロパティを変更するには、Search Boxツールバーで**「More**」をクリックし、「**コンポーネントプロパティを編集**」をクリックしてください: フィールド 概要 Search results signature 特定のSearch Resultsレンダリングの固有の署名を入力して検索結果を制限します。これは、ページに複数の検索結果が表示されている場合に便利です。 ターゲットシグネチャ もし別の検索結果ページを作成している場合は、そのページに *Search Results* レンダリングの署名をここに入力してください。 Search Scope 検索結果を制限するために範囲を選択してください。 最大予測結果のカウント ドロップダウンに表示される予測結果の最大数を設定します。このフィールドを空にすると、予測は表示されません。 Search results ページ 別のページに誘導したい場合は、特定の検索ページを選択してください。 \> \[!注\] \> *Search結果ページ* は、あなたのウェブサイト上の別のページで、 *Search Results* コンポーネントを持っています。このページは、ユーザーがサイトのどこからでも検索を行う際に検索結果を表示するランディングページとして機能します。通常、このページには *Search Box*、 *Page Selector*、 *Sort Results*、そしていくつかのフィルターなどの関連する検索コンポーネントも含まれています。 *Search Box* コンポーネントに *Search結果ページの* パラメータが設定されている場合、その検索結果のランディングページにリダイレクトされます。 検索テキストボックスを表示 デフォルトで選択。検索テキストボックスを削除するためにクリア。 提案モード ドロップダウンボックスからオプションを選択してください。選択肢は以下の通りです: - **検索結果を表示**:レンダリングバリアントによって表示された検索結果を表示します。ユーザーはクリックしたアイテムにリダイレクトされます。 - **予測表示**:検索エンジンが提供する検索語の予測を表示します。訪問者が検索提案をクリックすると、検索が実行されます。このモードはSolrのみでサポートされています。 - **検索結果を予測として表示**する:クリックしたテキストが検索ボックスに入力され、検索が行われます。 > !注Search Boxコンポーネント内でプレースホルダーをレンダリングしたり編集したりすることはできません。なぜなら、そのコンテンツはSXA検索サービスによって生成されているからです。 ## Search Resultsコンポーネントを追加してください ユーザーが検索結果を見るには、ページにSearch Resultsレンダリングを追加する必要があります。簡単な解決策としては、検索結果を同じページに表示させることができます。 Search Resultsコンポーネントを追加するには: 1. ツールボックスから、Search Resultsレンダリングをページにドラッグします。 2. ページの検索ボックスのテキストを変更するには、Search Resultsツールバーで **「コンポーネント設定項目を編集** 」をクリックし、検索結果が出なかったときに表示したいテキストを入力してください。 **「OK」**をクリックします。 3. Search結果のレンダリングパラメータを変更するには、「 **関連するコンテンツを選択する** 」ダイアログボックスで*Default*アイテムを選択するか、新しいアイテムを作成してください。 4. **コントロールプロパティ**ダイアログボックスでは、以下のフィールドを編集できます: フィールド 概要 Search results signature 特定のSearch Resultsレンダリングのユニークな署名を入力して検索結果を制限します。ページに複数の検索結果が表示されていて、特定の検索結果だけをフィルタリングしたい場合に便利です。このフィールドを空にすると、署名なしのすべてのSearch Resultsレンダリングをフィルタリングします。 Search Scope 検索結果を制限するために範囲を選択してください。 ページサイズ レンダリングで読み込みたい結果の数を入力します。 デフォルトの言語フィルタリング 検索に使う言語を選択してください。 デフォルトのソート順序 ページ上で結果のソート方法を選択します。これはSort Resultsレンダリングが使われていない場合にのみ使われます。 条件が設定されていない場合、自動的に検索を実行 選択された場合、ユーザーが検索条件を入力するまで検索は起動しません。 ## Sort Resultsコンポーネントを活用してください 「Sort Results」コンポーネントでは検索結果を並べ替えることができます。 新しいソート結果データソースを作成するには: 1. コンテンツエディターで*sitecore/content///Data*に移動します。 2. 「 **結果のソート**」を右クリックし、「 **挿入**」→「 **グループ整理**」をクリックします。 3. 名前を入力して**OK**をクリックします。 4. 以下のフィールドを編集してください: フィールド 概要 タイトル タイトルを入力してください。例えば: *価格 低めから高めへ*。 ファセット ソートが行われるファセットを選択します。 演出 並べ替え方法:昇り、降り、ランダム化、または関連性。 例えば、以下のソートオーダーコンポーネントでは、訪問者がカロリー、価格、名前で果物を並べ替えることができます。 ![Under Sort Results, you can configure sorting criteria for your items.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-sort-order.png) ![The configured sorting criteria, for example calories, price, and name, appear in a drop-down menu when the visitor clicks the sorting function in the UI.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-search-sort-order.png) ## Load Moreコンポーネントを使う Load MoreコンポーネントとSearch Resultsコンポーネントを組み合わせて使用します。訪問者は**Load More**をクリックして、Search Resultsコンポーネントの次の範囲の結果を動的に読み込むことができます。 Load Moreコンポーネントを使うには: 1. ツールボックスの**Search**セクションから「 **Load More** 」コンポーネントをクリックしてページにドラッグします。 2. 「 **関連コンテンツ選択** 」ダイアログボックスで、既存のアイテムにリンクするには、希望するコンテンツ項目をクリックして **「OK」**をクリックしてください。または、新しいリンクを作成するには、「 **関連コンテンツを選択する** 」ダイアログボックスで **「作成**」をクリックします。 3. 「 **Load More** 」ツールバーで、歯車をクリックして「Load More 」ボタンのラベルを「*Load More 結果*」に変更します。 ![You can change the text for the call-to-action on the Load More button.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-load-more-label.png) 4. デフォルトでリストされている結果の数は、Search Resultsコンポーネントの設定で設定されています。これを変更するには、Search結果ツールバーで **「More**」をクリックし、「 **Edit component properties**」をクリックし、「Page Size」欄で「 **Page Size** 」欄で数を変更して **「OK」**をクリックします。 5. Search Resultsのシグネチャを追加するには、「 **More**」をクリックし、「 **Edit component properties**」をクリックしてください。Search Resultsコンポーネントの署名(またはカンマで区切られた複数のシグネチャ)は、Load Moreと特定の検索結果をリンクさせることができます。これは、同じページに複数のSearch Resultsコンポーネントがある場合に便利です。 ## 結果数のコンポーネントを活用してください 結果数コンポーネントは、特定の検索クエリの検索結果数を表示します。 結果カウントコンポーネントを使用するには: 1. ツールボックスの **Search** セクションから「 **Results Count** 」コンポーネントをクリックしてページにドラッグします。 2. 結果数ツールバーで、歯車をクリックしてテキストを変更してください。結果数のテキストには {count} を含める必要があります。例えば: *あなたの条件を満たす果物が {count} つあります*。 ## 結果バリアントセレクターコンポーネントを活用してください 結果バリアントセレクターコンポーネントは、表示される検索結果の見た目や操作感を変更できます。コンポーネントバリアントを使って表示結果の見た目を変えます。 結果バリアントセレクタコンポーネントを使用するには: 1. ツールボックスの **Search** セクションから「 **結果バリアントセレクター** 」コンポーネントをクリックし、ページにドラッグしてください。 2. 「 **もっと」**をクリックし、「 **コンポーネントプロパティの編集**」をクリックしてください。ダイアログの **SearchCriteria** セクションで、以下のフィールドを編集できます: - **Search results signature** - Search Resultsコンポーネントの1つまたは複数の署名(カンマで区切られています)。 - **利用可能なバリアント** - コンポーネントが使用するコンポーネントバリアントの一覧。これにより、コンポーネントが表示するアイコンの数や、結果の異なるビュー数がどれだけ多数かに影響します。 ## ページセレクターコンポーネントを活用してください ページセレクターを使って検索結果のページを変更できます。複数の署名を使う場合、他の検索結果コンポーネントを同じページセレクターに接続できます。 表示されるページ数は、Search Resultsコンポーネントで設定したデフォルトのページサイズ、またはPage Sizeコンポーネントで選択したページサイズによって異なります。 ページセレクターの使用方法: 1. ツールボックスからページセレクターのレンダリングをページにドラッグします。 2. ページセレクターのツールバーで **「コンポーネント設定項目を編集**」をクリックします。 3. ダイアログボックスでラベルテキストフィールドを埋め **てOK**をクリックします。例えば: ![Dialog for label texts, showing the use of angle brackets as label text.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-Page-Selector-labels.png) 4. ページセレクタのレンダリングプロパティを変更するには、Search Boxツールバーで **「More**」をクリックし、「 **コンポーネントプロパティを編集**」をクリックします。以下のフィールドを編集し、その後「 **OK」**をクリックしてください: フィールド 概要 Search results signature 特定のSearch Resultsレンダリングでフィルタリングするには、検索したいSearch Resultsレンダリングの署名(カンマで区切って)を入力してください。 収縮モードしきい 多くのページで結果が期待される場合は、そのページの一部を点で置き換えることができます。 ## ページサイズコンポーネントを活用してください ページサイズコンポーネントを使って、Search Resultsコンポーネントで表示される結果の数を動的に変更します。 ページサイズコンポーネントを使用するには: 1. ツールボックスからページサイズコンポーネントをページにドラッグします。 2. 「 **もっと」**をクリックし、「 **コンポーネントプロパティの編集**」をクリックしてください。ダイアログボックスの **検索基準** セクションで、以下のフィールドを編集できます: フィールド 概要 Search results signature 特定のSearch Resultsレンダリングでフィルタリングするには、検索したいSearch Resultsレンダリングの署名(カンマで区切って)を入力してください。 デフォルトのページサイズ デフォルトのページサイズを8、16、または32を選択してください。 ページングスキーマ ページサイズのドロップダウン値を入力するために使用するページングスキーマ項目を選択します。 ## ロケーションファインダーコンポーネントを使ってください ロケーションファインダーコンポーネントでは、ユーザーが都市、州、郵便番号の形で検索条件を入力できます。都市を選択すると、ハッシュクエリが新しい場所で更新され、検索が実行されます。このコンポーネントをページに追加する前に、いくつかの設定を作成する必要があります。 > !注ロケーションファインダーコンポーネントはGoogleのオートコンプリート機能を使ってGoogleの予測結果を表示します。これを機能させるにはGoogleマップAPIを使用する必要があります。 ロケーションファインダーコンポーネントを使用するには: 1. ツールボックスからロケーションファインダーのレンダリングをページにドラッグします。 2. ロケーションファインダーツールバーで、歯車をクリックして以下のフィールドを編集してください: フィールド 概要 ファセット 地理空間検索結果をソートするために使うファセット項目を選択します。例えば、 *DistanceFacet* 項目でフィルターがマイル単位を使うように指定します。 フィルタータイトル コンポーネントのタイトルを入力してください。 Searchボタンのテキスト 検索ボタンのテキストを入力してください。空のままにすると、ボタンは表示されません。 テキストボックスのテキスト 期待値を説明するヒントとして機能する検索ボックスのテキストを入力します。 Searchテキストボックスラベル テキストボックスのラベル「text」を入力してください。 私の位置情報テキスト コンポーネントがユーザーの位置を検出するように設定された際、テキストボックスに表示するテキストを入力します。 3. 「 **More**」をクリックし、「 **Edit component properties** 」をクリックして、以下のフィールドを編集します: - **モード - コンポーネントを3つのモードのいずれかで動作させるように設定します:** - CurrentLocation - このモードはページ上にコンポーネントを表示せず、自動的にブラウザから位置を取る。 - Mixed - このモードでは、ブラウザから位置情報が自動的に取得されますが、テキストボックスも表示され、ユーザーは位置を変更できます。 - UserProvided - このモードではテキストボックスが表示され、ユーザーはその場所を入力できます。 - **最大予測結果カウント** - ドロップダウンに表示される予測結果の最大数を指定します。このフィールドを空にすると予測は表示されません。