チュートリアル: Reactプロジェクトのセットアップ

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このチュートリアルは、Search UIコンポーネントを使用した迅速な開発のチュートリアルシリーズのパート1です。

次の方法を学習します。

JS SDKとUI Components for Reactをインストールします。
資格情報を取得します。
資格情報で認証します。

始める前に

作成する必要があるウィジェットのインベントリを作成することから始めることをお勧めします。Customer Engagement Console (CEC) のWidgetsセクションには、実装用に設定されたすべてのウィジェットが一覧表示されます。リストには、アプリケーションで使用されていないウィジェットを含めることができます。

CECで設定されたエンティティについて理解しておくことを強くお勧めします。

実装内のすべてのエンティティの詳細を表示するには、次のようにします。

Searchの資格情報を使用してCECにログインします。
メニューバーでAdministrationをクリックし、次にDomain settingsをクリックします。
General Settingsタブで、「Entities」をクリックします。実装内のすべてのエンティティの名前と属性を検索できます。
AttributesタブのEntity ドロップダウンで、属性の一覧としてエンティティを選択します。

ウィジェットとページをインベントリするには:

Searchの資格情報を使用してCECにログインします。
メニューバーでウィジェットのリストを表示するには、Widgetsをクリックします。
メニューバーで、作成する必要があるページを一覧表示するには、Pagesをクリックします。
Widgetsタブのテーブルから、ウィジェットごとに、name、rfk_id、type、status、およびホストされているページを取得します。

メモ

ウィジェットコンポーネントを正常にレンダリングするには、ウィジェットコンポーネントのrfk_idとtypeがCECで設定されているものと同じであること、およびウィジェットが公開され、ステータスがActiveであることを確認してください。

JS SDKとUI Components for Reactのインストール

開発者は、Sitecore Search JS SDKパッケージとUI Componentsパッケージをプロジェクトにインストールできます。Reactコードでは、他のJSパッケージからインポートするのと同じように、これらのパッケージからクラス、関数、およびオブジェクトをインポートできます。

最新のJS SDKとReact UI Componentsをインストールするには、次の手順を実行します。

React用のSearch JS SDKをプロジェクトに追加するには、プロジェクトで次のコマンドを実行します。
RequestResponse
```
npm install --save @sitecore-search/react
```
ReactのSearch UI Componentsをプロジェクトに追加するには、プロジェクトで次のコマンドを実行します。
RequestResponse
```
npm install --save @sitecore-search/ui
```

ReactプロジェクトのRootコンポーネントで、次に示すようにWidgetsProviderコンポーネントをインポートします。

RequestResponse

import { WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
    return (
        <WidgetsProvider>
        </WidgetsProvider>
)};

資格情報の取得

お客様のプライバシーとコンテンツを保護するため、リクエストを行う前に、アプリケーションがSearchで認証する必要があります。アカウントとドメインに関連付けられている認証情報を使用する必要があります。

Search資格情報を取得するには:

個人の資格情報でCustomer Engagement Console (CEC) にログインします。
メニューバーで、Developer Resourcesをクリックします。
右側のAPI Keysペインで、データリクエストのキーをコピーします。

資格情報による認証

お客様のプライバシーとコンテンツを保護するため、リクエストを行う前に、アプリケーションがSearchで認証する必要があります。アカウントとドメインに関連付けられている認証情報を使用する必要があります。データリクエストを行う前に認証するか、最初のデータリクエストと一緒に認証するかを選択できます。

大事な

JS SDKはCookieを設定し、イベントを追跡するときにUUIDを含めます。訪問者情報UUIDは、検索結果をパーソナライズするために必要です。

JS SDKがアプリケーションを正常に認証すると、JS SDKは今後のすべての要求に必要な認証情報を含めます。

認証情報は、ReactアプリケーションのRootまたはAppコンポーネントに含めることをお勧めします。

サブドメインの設定時に認証するには:

ReactプロジェクトのRootコンポーネントで、次のコードブロックに示すように、認証用の正しい資格情報を持つWidgetsProviderコンポーネントを追加します。

RequestResponse

import { WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                serviceHost='<api domain>'
            >
            <MyApp />
        </WidgetsProvider>
)};

手記

使用する認証情報は、ドメインの設定方法によって異なりますSitecore Search。サブドメインがSearchで設定されていない場合の認証手順については、「ドメインを設定せずに認証する」を参照してください。

env属性の場合、値はapse2 (アジア / オセアニアドメインの場合)、prodEu (ヨーロッパドメインの場合)、prod (米国のドメインの場合)、staging (米国のドメインの場合) のいずれかである必要があります。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、