---
title: "ウィジェットテンプレート"
slug: "widget-templates-1332963"
abstract: "Search UI Components年にウィジェットテンプレートを導入します。"
---
# ウィジェットテンプレート

Widgetsは検索体験の設定です。さまざまなツールやコントロールを用いて、コンテンツストラテジストはウィジェットをSitecore Searchで設定します。Sitecore Searchインターフェースでは、認証、エンティティ、属性、ソース、機能などのドメイン設定も確認できます。

Sitecore Searchウィジェットは、特定の体験を提供するためにページやメールに追加される動的なコンポーネントです。主な目的はSearchのコンテンツを表示することです。すべてのウィジェットには「 rfk\_id」と呼ばれる固有のプロパティがあります。

コンソールに慣れておくことをお勧めします。統合時にコンソールから様々な設定にアクセスする必要があるかもしれません。

以下のウィジェットは、以前設定されたコンテンツを表示します:

-   **バナー** - 画像や簡単なテキストのための基本的なコンポーネントです。
-   **HTML Block** - マーケターがページにHTMLコンテンツを挿入できるようにします。

検索によって駆動されるWidgetsは、エンティティで表現されたデータをレンダリングします。これらのウィジェットには以下のような種類があります:

-   **Search Result** - 提出されたキーワードフレーズやその他の設定に基づくコンテキスト検索の結果を表示します。
-   **プレビューSearch** - コンテキスト検索の結果の一部をポップアップで表示します。

ウィジェットコンポーネントは、ランタイム時にSearch JS SDKに登録されているUIコンポーネントです。これらはSearchサービスからコンテンツを要求しレンダリングするために必要なコードを含んでいます。バナーおよびHTMLブロックウィジェットコンポーネントのみがSDKに含まれており、これらは完全に事前設定されているためです。

## ウィジェットテンプレート

ウィジェットテンプレートは、特定の動作パターンを抽象化するための異なるコンポーネントやUIプリミティブを含みます。本質的には、ウィジェットのレイアウトです。 [Search UI componentsパッケージ](https://www.npmjs.com/package/@sitecore-search/ui) パッケージには、Searchのデータで埋められた様々なウィジェットのテンプレートが見つかります。

JSXで書かれたテンプレートとは、レイアウトのコードとクエリフックを通じてSearch APIと接続するためのロジックを含むコンポーネントです。異なるウィジェットタイプのテンプレートは異なる [クエリフック、アクション、状態変数](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/query-hooks.html "Query hooks")を持ちます。クエリフックはJS SDKに含まれています。

## テンプレート解剖学

以下のコードブロックは、検索結果ウィジェットのテンプレートのコア要素を含んでいます。

import { useSearchResults } from '@sitecore-search/react';

 const MyTemplate = () => {
 const {
 widgetRef,
 actions: {
 // Here, insert the actions you want to use.
 },
 state: {
 // Here, insert the variables you want to use to describe the state.
 },
 queryResult: {
 isLoading,
 data: {
 // Here, insert the API response properties you want to use.
 } = {},
 },
 } = useSearchResults({
 query: (query) => {query.getRequest().setOffset(10);} // Optional. This function initializes the quest with provided values
 state: {
 itemsPerPage,
 }
 });

 return (
 // Here goes the JSX code.
 );
 };

## クエリフックの利用可能化

テンプレートをJS SDKに登録してウィジェットコンポーネントに変換します。これによりクエリフックがデータ交換に利用可能になります。ウィジェット[の高次関数](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/high-order-functions.html "High order functions")を使ってテンプレートをウィジェットコンポーネントとしてインスタンス化してください。

import { WidgetDataType, widget } from '@sitecore-search/react';

const MySearchResultsWidget = widget(MyTemplate, WidgetDataType.SEARCH\_RESULTS, 'content');

## ウィジェットテンプレートの登録

ウィジェットコンポーネントは、Reactアプリケーション内のWidgetsProviderタグ内にあるときにレンダリングされます。以下のコードブロックはMySearchResultsWidgetの例です。

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

 <div>
 <WidgetsProvider
 env='<environment>'
 customerKey='<customer key>'
 apiKey='<api key>'
 >
 <MySearchResultsWidget rfkId="my\_widget\_id" />
 </WidgetsProvider>
 </div>

> !注ウィジェットコンポーネントはWidgetsProviderタグ内のどこにでも配置可能です。