チュートリアル: ウィジェットコンポーネントの作成

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

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

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

Sitecore Search実装の一部として、ウィジェットコンポーネントを作成し、Reactアプリケーションに追加する必要があります。

通常、Customer Engagement Console (CEC) の構成には、次のものが含まれます。

すべてのページに表示されるように構成されたpreview searchウィジェット。
検索結果ページにのみ表示されるように構成された検索結果ウィジェット。
Webページにrecommendationsを表示するように設定されたrecommendationウィジェット。

このチュートリアルでは、ウィジェットコンポーネントを作成する方法について説明します。このチュートリアルは、プロジェクト内のすべてのウィジェットに対して繰り返す必要があります。

このチュートリアルでは、次の方法について説明します。

Search UIコンポーネントを使用してウィジェットコンポーネントを作成します。
ウィジェットコンポーネントのコードをデザインに合わせて編集します。
スタイル設定されたウィジェットコンポーネントのスタイルの編集
ウィジェットコンポーネントのスタイルをテーマで設定します。

Search UIコンポーネントを使用したウィジェットコンポーネントの作成

「UI Componentsリファレンス」セクションでは、content items用のさまざまなウィジェットテンプレートについて説明します。ウィジェットの種類ごとに、さまざまなレイアウトオプションがあります。各トピックでは、Reactプロジェクトで使用できるコードブロックを使用したさまざまな手順について説明します。

選択は、プログラミング言語、コンポーネントの種類、およびSearch UI Components CLIの使用に基づいて行われます。

Search UIコンポーネントを使用して、スタイル付きの基本preview searchウィジェットコンポーネントを作成するには:

Search UI Componentsパッケージをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
RequestResponse
```
npm i @sitecore-search/ui
```
このWebページのメニューから、Templates for content itemsセクションを開き、Preview searchをクリックします。
目的のトピックを開くには、「 Basic preview search」をクリックします。
Styled componentセクションで、TS CLIタブを選択します。
Reactプロジェクトでウィジェットコンポーネントを作成するには、タブのすべての指示に従います。

ウィジェットコンポーネントモデルの編集

ウィジェットコンポーネントのエンティティまたはモデルが、Customer Engagement Console (CEC) のエンティティと一致しない場合があります。コードが正しいエンティティまたはモデルと属性を使用していることを確認する必要があります。

UI components referenceセクションでは、すべてのウィジェットテンプレートが作成され、コンテンツタイプエンティティが作成されます。実装によっては、生成されたコンポーネントをその属性に合わせて変更する必要がある場合があります。

ウィジェットコンポーネントのコードを編集して、CECで設定されたエンティティを使用するには:

index.ts、index.tsx、index.js、index.jsx、またはウィジェットコンポーネントが定義されているファイルを開きます。
ファイルの最初のセクションのモデル宣言で、必要に応じて、モデルの名前を使用するエンティティに置き換えます。
モデルの属性をエンティティの属性と一致させます。
エンティティ属性の値を表示するには、HTMLを編集します。
ウィジェット関数に、エンティティ名を含めます。
ファイルを保存します。

注意

ウィジェットコンポーネントで使用されるすべての属性がCECで定義され、APIで返されるようにマークされていることを確認する必要があります。無効なエンティティ属性は、ランタイムエラーをスローする可能性があります。

メモ

複数のエンティティに同じウィジェットコンポーネントを使用している場合は、モデルとHTMLがすべてのエンティティで機能していることを確認します。

先端

コンポーネント名とファイル名にエンティティの種類を含めて、コード内のエンティティまたはモデルを識別します。

オプションスタイル設定されたウィジェットコンポーネントのスタイルの編集

Plain componentを作成した場合、またはウィジェットのスタイルを設定しない場合は、この手順をスキップしてください。

スタイル設定されたウィジェットコンポーネントのスタイルをデザインに合わせて編集するには:

スタイルが設定されたプリミティブコンポーネントまたはスタイルを含むファイルで、スタイルを編集します。

オプションテーマを使用したウィジェットコンポーネントのスタイル設定

Search UIコンポーネントリファレンスにリストされているCSS変数を使用してアプリケーションのテーマを設定することは、コンポーネントのスタイルを設定する最も速い方法です。デフォルトのテーマまたはカスタムテーマを使用できます。

カスタムテーマを作成して使用するには:

Reactプロジェクトで、applicationコンポーネントを開きます。
コンポーネントで、次のコードブロックに示すようにデフォルトのテーマオブジェクトを作成し、インポートステートメントを修正します。
RequestResponse
```
import { createTheme } from '@sitecore-search/ui'; 

const myTheme = createTheme();
```

カスタムテーマを作成するには、次に示すようにCSS変数を追加します。

RequestResponse

import { createTheme } from '@sitecore-search/ui'

const myTheme = createTheme({
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
});

applicationコンポーネントのreturnステートメントで、WidgetsProviderのdivラッパーに、次に示すように値をstyleに設定します。
RequestResponse
```
<div style={myTheme.style}>
  <WidgetsProvider>Nested content.</WidgetsProvider>
</div>
```

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

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

チュートリアル: ウィジェット コンポーネントの作成

Search UIコンポーネントを使用したウィジェットコンポーネントの作成

ウィジェットコンポーネントモデルの編集

オプションスタイル設定されたウィジェットコンポーネントのスタイルの編集

オプションテーマを使用したウィジェットコンポーネントのスタイル設定

チュートリアル: ウィジェットコンポーネントの作成