---
title: "スターターキットから検索コンポーネントをコピーしてください"
slug: "copy-the-search-component-from-the-starter-kit"
abstract: "手続き上の手順は、スターターキットから検索コンポーネントをコピーするためのものでした。"
---
# スターターキットから検索コンポーネントをコピーしてください

> !重要機能の利用可能性は段階的に展開される一部です。組織ではまだ検索体験機能が見られない場合があります。導入時に環境が導入されると利用可能になります。

SitecoreAIで検索体験の作業を始める前に、最新のスターターキットバージョンを使うか、検索コンポーネントをプロジェクトにコピーする必要があります。

このトピックでは、最新のスターターキットテンプレートから検索コンポーネントをコピーし、自分のSitecoreAIプロジェクトに追加する方法を説明します。

このスターターキットを有効にして新しいプロジェクトを始めたい場合は、source-mainブランチから「フォーク・オブ・スターターズ」リポジトリを作成してください。

> !注基礎となる検索機能や、React・Next.jsプロジェクトでの検索実装に関する[Searchフック](https://doc.sitecore.com/sai/en/developers/content-sdk/search-hooks-for-react-and-next-js.html)については、Content [SDKのSearch API](https://doc.sitecore.com/sai/en/developers/content-sdk/search-api.html)を参照してください。

## スターターキットから検索コンポーネントを既存のプロジェクトにコピーします

スターターキットmainブランチから、フォルダ構造を変えずに以下の内容をレンダリングホストプロジェクトにコピーしてください:

-   Reactコンポーネントとそのサブコンポーネント: /src/components/search-experience/

コンポーネントは追加されると自動的に登録されるため、手動登録は不要です。

### 著者検索項目のテンプレートを作成する

作成済みデータを保持し、Search Configuration Manager Marketplaceアプリを有効にするSitecoreテンプレートを作成するには:

1.  検索経験項目のテンプレートを作成する:
    1.  例えば、/Templates/Project/<YOUR\_PROJECT>/Components/Search Experienceで:**Search Experience**を右クリックしてから「**新しいテンプレート**\>**挿入**」をクリックします。
    2.  名前を入力し *Search Experience* 、 **Baseテンプレート** をデフォルトのままにします(Templates/System/Templates/Standard template)。
    3.  **「次へ**」をクリックしてテンプレートの場所を選択してください。現在いる*Search Experience*フォルダを選択します。
    4.  **「次へ**」をクリックしてテンプレートを作成します。
2.  新たに作成されたテンプレートを選択し、検索ソースIDやコンポーネントで使用されるフィールドマッピングを保存するための **Search** フィールド(または同名)を追加します。
3.  **Marketplace Types**セクションで「**Plugin**」に設定してください。
4.  **Source**値を**Search Configuration Manager** MarketplaceのアプリケーションIDに設定します。これによりコンポーネントインスタンスを編集時に**Search Configuration Manager**タブが有効になります。
5.  次に、レンダリングパラメータのテンプレートを作成します:
    1.  例えば、/Templates/Project/<YOUR\_PROJECT>/Components/Search Experience/Rendering Parametersで「**レンダリングパラメータ」**を右クリックして「新しい**テンプレート**\>**挿入**」をクリックします。
    2.  名前 *Search Experience Parameters* を入力し、 **Baseテンプレート** を /Templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parameters/Base Rendering Parameters
    3.  **「次へ**」をクリックしてテンプレートの場所を選択してください。現在いる*Rendering Parameters*フォルダを選択します。
    4.  **「次へ**」をクリックしてテンプレートを作成します。
6.  新しく作成されたテンプレートを選択し、 **カラムズ** フィールドを追加します。これにより、ページビルダー内で設定可能な *カラムパラメータ* が得られます。

### SearchExperienceレンダリングアイテムを作成する

SitecoreAIがどのようにReactコンポーネントをインスタンス化すべきかを説明するレンダリングアイテムを作成すること。

1.  **コンテンツエディター**の/sitecore/layout/Renderings/Project/<YOUR\_PROJECT>/Search Experienceで、**SearchExperience**というレンダリングを作成します。
2.  パラメータ **テンプレート** フィールドに、前の手順で作成した Search Experience Parameters パラメータテンプレートを入力します。
3.  **データソースの位置**フィールドに、固定パスやクエリを入力します。例えば./ancestor-or-self::\*@@templatename='Home'/\*@@templatename='Search Experiences'
4.  **Datasourceテンプレート**フィールドに、上記で作成したSearch Experienceテンプレートを入力します。
5.  **コンポーネント名**欄にSearchExperience、または上で登録した正確な名前を入力してください。
6.  **「保存**」をクリックします。

### レンダリングをコンテンツ作成者に提供してください

ページ **ビルダー**にレンダリング画像を追加し、作者が挿入できるようにするには:

1.  サイトのホームアイテム(またはサイト定義アイテム)を開きます。
2.  **「プレゼンテーション」>利用可能なレンダリング**をクリックしてください。
3.  適切なグループに SearchExperience を追加します。例えば、 **コンポーネント** > **Search**。
4.  「 **保存** 」をクリックしてから **「公開」**をクリックします。

検索コンポーネントをプロジェクトにコピーした後、ソース作成に進めます。