1. 構成要素

ウォークスルー

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

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

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

!注カスタムコンポーネントを作成するかどうか判断の助けとして、この フローチャートをご確認ください。

データソースとレンダリングパラメータを用いたシンプルなレンダリングを構築するには、3ステップのプロセスがあります。

  1. データソースのテンプレートとレンダリングパラメータを使って、コンテンツエディターでレンダリングアイテムを作成します。
  2. レンダリングを ツールボックスで利用できるようにし、コンテンツ編集者がエクスペリエンスエディターやページにレンダリングを追加できるようにします。
  3. フロントエンドのJSSアプリ用に、Content Editorで定義されたレンダリング項目に対応するコンポーネントファイルを作成します。

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

  • レンダリングアイテムを作成する
  • レンダリングをツールボックスに追加してください
  • JavaScriptコンポーネントを追加してください
  • グリッドとスタイリングのサポートを追加

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

データソースとレンダリングパラメータを含むレンダリングアイテムを作成するには:

  1. コンテンツツリーで /sitecore/layout/Renderings/Featureに移動し、右クリックして「 Insert, **Rendering Folder」**をクリックします。名前を入力しCustomRenderings。

  2. CustomRenderingsフォルダを右クリックし、「Json Rendering」をクリックし、「MyRendering」と名前を入力してください。

    headless-site-insert-json-rendering.png

  3. sitecore/Templates/Featureに移動し、右クリックしてから**「Insert**, Template Folder」をクリックします。名前を入力しCustomTemplates。

  4. CustomTemplatesフォルダを右クリックし、「挿入」をクリックし、「テンプレートから挿入」をクリックします。

  5. テンプレート から挿入 するダイアログボックスで、/Templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parametersに移動してBase Rendering Parametersアイテムをクリックし、アイテム名 フィールドで名前MyParametersを入力します。フィールドを入力したい場合は、ここに追加してください。

  6. MyParametersフォルダを右クリックし、「挿入」をクリックし、「テンプレートから挿入」をクリックします。

  7. テンプレート から挿入 ダイアログボックスで、/Templates/System/Templatesに移動してStandard templateアイテムをクリックし、アイテム名 欄で名前を入力してくださいMyDatasource 。

  8. この例では、作成したデータソーステンプレートにSomeTextという名前のテキストフィールドを追加します。テンプレートから挿入ダイアログボックスで、Templates/Feature/Headless Experience Accelerator/Page Contentに移動して「テキスト」をクリックし、「アイテム名」フィールドに名前SomeTextを入力してください。

  9. コンテンツツリーでMyRenderingへ移動してください:

    • Datasource Templateフィールドで「Insert link」をクリックし、作成したMyDatasourceアイテムを選択します。

    • Datasource Locationフィールドに、次のクエリを挿入します:query:$site/*[@@name='Data']/*[@@name='MyRendering']|query:$sharedSites/*[@@name='Data']/*[@@name='MyRendering']。

      The Datasource Location field

レンダリングをツールボックスに追加してください

サイトのPresentationフォルダでは、エクスペリエンスエディターのツールボックスでどのレンダリングが見えるか設定できます。これにより、コンテンツ編集者はレンダリングを自分のページに追加できます。レンダリングを作成するには、デフォルトのレンダリングバリアントも作成する必要があります。この例では、それをDefaultと名付けます。後でレンダリングホストサイトでコンポーネントファイルを作成する際には、その正確な名前で デフォルト バリアントを参照しなければなりません。

ツールボックスにレンダリングを追加するには:

  1. コンテンツツリーで sitecore/Content/[tenant]/[site]/Presentationに移動します。
  2. 右クリック Available Renderings、 挿入をクリックし、次に 利用可能なレンダリングをクリックしてください。名前を入力し MyRenderings。
  3. sitecore/Content/[tenant]/[site]に移動し、右クリックData、挿入をクリックし、次に****テンプレートから挿入をクリックします。
  4. 「 テンプレートから挿入 」ダイアログボックスで、 Templates/Common に移動して Folderを選択します。 アイテム名 フィールドに名前 MyRenderingを入力します。このフォルダはレンダリングのデータソースを保存するために使われます。
  5. sitecore/Content/[tenant]/[site]/Presentation/Headless Variantsに移動してバリアントを挿入します。名前を入力しMyRendering。
  6. MyRenderingアイテムを右クリックし、「挿入」をクリックし、「バリアント定義」をクリックします。名前を入力しますDefault。レンダリングにはデフォルトのバリアントが必要です。付けた名前は、JavaScriptコンポーネントファイルで使われている名前と一貫している必要があります。

JavaScriptコンポーネントを追加してください

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

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

src/components。

コンポーネントを追加するには:

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

    The Component Name field in the Content Editor
    Example of a JSS component file

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

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

import React from 'react';

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

interface Fields {

SomeText: Field;

}

type MyRenderingProps = {

params: { key: string: string };

fields: Fields;

};

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

return (

);

};

グリッドとスタイリングのサポートを追加

デフォルトのレンダリングにはグリッドとスタイルのサポートが備わっています。カスタムレンダリングをSXAのグリッドやスタイリングに準拠させたい場合は、パラメータテンプレートを提供し、いくつかの基本のSXAテンプレートを割り当てる必要があります。

レンダリング用のグリッドとスタイリングのサポートを追加する:

  1. パラメータテンプレートをレンダリングに追加してください。 sitecore/Layout/Renderings/Feature/CustomRenderings に移動して MyRendering レンダリングをクリックします。
  2. エディターズオプションセクションのパラメータテンプレートフィールドで、テンプレートへのパスを入力します。この例では、Templates/Feature/CustomTemplates/MyParametersを入力します。
  3. 今では、例えば以下の基本的なSXAテンプレートをレンダリングパラメータテンプレートに割り当てることができます。
    • IStyling スタイルズサポートのために。このテンプレートは、そのレンダリングのコントロールプロパティに新しいフィールドを追加し、レンダリングの編集フレームに追加ボタンを追加します。 Base Rendering Parameters テンプレートから継承します。
    • IComponentVariant レンダリングバリアントサポートのために。このテンプレートはコントロールプロパティにレンダリングバリアントのドロップダウンを追加し、編集フレームのバリアントセレクタードロップダウンを追加します。 Base Rendering Parameters テンプレートから継承します。
    • Grid Parameters グリッドサポートのために。このテンプレートはコントロールプロパティにグリッドフィールドを追加し、レンダリングの編集フレームに追加ボタンを追加します。 Base Rendering Parameters テンプレートから継承します。
    • IRenderingID HTML識別子のサポートのために。このテンプレートはレンダリング設定にIDフィールドを追加し、HTMLコード内の要素に属性を表示します。
    • IDynamicPlaceholder 動的プレースホルダーキーのサポートのために。このテンプレートは、例えばタイトルやテキストに加えてプレースホルダーを追加します。
この記事を改善するための提案がある場合は、 お知らせください!