構成要素

ウォークスルー

Version: 10.4

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

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

!注このトピックで説明されている手順はコンテンツエディターを使用してください。

XPには、シンプルなテキスト、画像、ページ内容などのデフォルトコンポーネントセットが付属しています。新しいコンポーネントを作成することも可能です。このトピックでは、コンポーネントを作成する際の作業について説明します。この例では、シンプルなテキストフィールドをレンダリングするCustomComponent1というコンポーネントを作成します。

カスタムコンポーネントを作成するかどうか判断するために、このフローチャートを確認できます。

このウォークスルーでは、以下の方法を説明します:

データソーステンプレートとレンダリングパラメータテンプレートでJSONコンポーネントアイテムを作成します。
テキストフィールドをレンダリングするコンポーネントのデフォルトバリアントを作成します。
フロントエンドのJSSアプリ用に、コンテンツエディターで定義されたコンポーネント項目に対応するコンポーネントファイルを作成します。
コンポーネントのパラメータテンプレートにベーステンプレートを追加し、必要な機能をサポートするようにしましょう。

JSONコンポーネントアイテムを作成してください

カスタムコンポーネントを作成するには、JSONコンポーネント、レンダリングパラメータテンプレート、データソーステンプレートの作成が含まれます。

JSONコンポーネントアイテムを作成するには:

コンテンツエディターで /sitecore/layout/Renderings/Featureに行き、右クリックしてから 「レンダリング フォルダ>挿入」をクリックします。例えば名前を入力し てください。 Custom Components。
Custom Componentsフォルダを右クリックし、「Json Rendering」をクリックし、「CustomComponent1」と名前を入力してください。
sitecore/Templates/Featureに移動し、右クリックしてから「テンプレートフォルダ>挿入」をクリックします。名前を入力しCustomTemplates。
CustomTemplatesフォルダを右クリックしてから「新しいテンプレート**>挿入**」をクリックします。
ダイアログボックスで、例えばMyParameters、、を入力し、「 テンプレート/基礎/ヘッドレスエクスペリエンスアクセラレーター/プレゼンテーション/レンダリングパラメータ/ベースレンダリングパラメータ 」項目を選択します。パラメータテンプレートの場所としてCustomTemplatesフォルダを選択し、「次へ」をクリックします。
CustomTemplatesフォルダを右クリックしてから「新しいテンプレート**>挿入**」をクリックします。
ダイアログで名前(例えばMyDatasource)を入力し、/Templates/System/Templates/Standard template項目を選択します。データソーステンプレートの場所としてCustomTemplatesフォルダを選択し、「次へ」をクリックします。
SomeTextという名前のテキストフィールドをデータソーステンプレートに追加するには、以下の手順に従ってください。
- 右クリックMyDatasourceから「テンプレート>挿入」セクションをクリックします。セクション名を入力してください。または、ビルダータブの「**新しいセクションを追加」**フィールド内をクリックしてください。
- もう一度 MyDatasource をクリックし、 ビルダー タブで、追加したセクションの下のフィールド内をクリックしてください。
- 名前 SomeText を入力し、例えば Rich Textのフィールドタイプを選択します。
コンテンツツリーでCustomComponent1コンポーネントに移動します:
- Datasource Templateフィールドで「Insert link」をクリックし、作成したMyDatasourceアイテムを選択します。
- Datasource Locationフィールドに、次のクエリを挿入します:query:$site/*[@@name='Data']/*[@@name='CustomComponent1DataSources']|query:$sharedSites/*[@@name='Data']/*[@@name='CustomComponent1DataSources']。

コンポーネントのデフォルトバリアントを作成します

コンポーネントにはデフォルトのバリアントが必要です。この例では、テキストフィールドをレンダリングするバリアントを作成し、例えば「 Default」と名付けます。後にレンダリングホストサイトでコンポーネントTSXファイルを作成する際には、その正確な名前でDefaultバリアントを参照します。

デフォルトのバリアントを作成するには:

sitecore/Content/[site collection]/[site]に移動し、右クリックData、そして「テンプレートから挿入>挿入」をクリックします。
「 テンプレートから挿入 」ダイアログで、Templates/Commonに移動してFolderを選択します。 アイテム名 フィールドに名前を入力しCustomComponent1DataSources。このフォルダはコンポーネントのデータソースを格納するために使われます。
sitecore/Content/[site collection]/[site]/Presentation/Headless Variantsに移動し、「Insert > Variants」をクリックしてください。名前を入力しCustom Component Variant。
右クリックCustom Component Variantから「 Insert > Variant Definition」をクリックします。名前を入力しDefault。ここで示す名前は、後にコンポーネントTSXファイルで使われる名前と一致している必要があります。

コンポーネント用のTSXファイルを作成します

フロントエンドのJSSアプリには、コンテンツエディターで作成したコンポーネントと整合したJavaScriptコンポーネントが必要です。

!注構成要素のTSXファイルは通常、以下のディレクトリに位置しています:

src/components。

コンポーネント用のTSXファイルを作成するには:

TSXファイルがあるディレクトリに、コンポーネントアイテムのComponent Nameフィールドで定義した名前と同じ名前のコンポーネントファイルを追加します。この例では、CustomComponent1.tsx:

以下のJavaScriptコンポーネントの例は、コンポーネントのデータソース項目に追加したSomeTextフィールドをレンダリングしています:

!注エクスポートされたメソッドは、先に作成したバリアント定義に従ってDefaultと呼ばれています。

import React from 'react';

import { Field, Text } from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {

SomeText: Field;

}

type CustomComponent1Props = {

params: { key: string: string };

fields: Fields;

};

export const Default = (props: CustomComponent1Props): JSX.Element => {

return (

);

};

パラメータテンプレートにベーステンプレートを追加する

コンポーネントがサポートしたい機能に応じて、レンダリングパラメータテンプレートに特定のベーステンプレートを追加する必要があります。例えば、グリッドやスタイル、バリアント、動的なプレースホルダーをサポートしたい場合に関係します。

!注レンダリングパラメータテンプレートには、以下の基本テンプレートをすべて割り当てることを推奨します: BaseRenderingParameters、IDynamicPlaceholder、_PerSiteStandardValues、IRenderingId。

パラメータテンプレートにベーステンプレートを追加するには:

sitecore/Templates/Feature/CustomTemplatesに移動してMyParametersをクリックします。
コンテンツタブのデータセクションで、必要なベーステンプレートをパラメータテンプレートに割り当てます:
- /sitecore/templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parameters/Base Rendering Parametersテンプレートには以下のテンプレートが含まれています:
  - IStyling スタイルズサポートのために。このテンプレートは、そのコンポーネントのコントロールプロパティに新しいフィールドを追加し、そのコンポーネントの編集フレームに追加ボタンを追加します。
  - IComponentVariant バリアントサポートのために。このテンプレートはコントロールプロパティにバリアントドロップダウンを追加し、編集フレームのバリアントセレクタードロップダウンを追加します。
  - Grid Parameters グリッドサポートのために。このテンプレートはコントロールプロパティにグリッドフィールドを追加し、コンポーネントの編集フレームに追加ボタンを追加します。
- /sitecore/templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parameters/IDynamicPlaceholderテンプレートは、タイトルやテキストに加えてプレースホルダーを追加することで動的なプレースホルダーキーをサポートしています。
- /sitecore/templates/Foundation/Experience Accelerator/StandardValues/_PerSiteStandardValuesテンプレートは、サイト固有の標準値をサポートしています。
  
  !注特定のサイトに標準値を使う予定がある場合のみ、このベーステンプレートを追加してください。これはパフォーマンスに不必要な影響を与えないためです。
- /sitecore/templates/Foundation/Experience Accelerator/Markup Decorator/Rendering Parameters/IRenderingIdはHTML識別子をサポートしています。このテンプレートはコンポーネント構成にIDフィールドを追加し、HTMLコード内の要素に属性をレンダリングします。

この記事を改善するための提案がある場合は、お知らせください!