1. Components

ウォークスルー:シンプルなカスタムコンポーネントの作成

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

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

注記

このトピックで説明されている手順は、Content Editorを使用してください。

SitecoreAIには、シンプルなテキスト、画像、ページ内容などのデフォルトコンポーネントが用意されています。新しいコンポーネントを作成することもできます。このトピックでは、コンポーネントを作成する際に関わる作業について説明します。この例では、シンプルなテキストフィールドをレンダリングするコンポーネントCustomComponent1を作成します。

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

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

  • データソーステンプレートとレンダリングパラメータテンプレートでJSONコンポーネントアイテムを作成します。

  • テキストフィールドをレンダリングするコンポーネントのデフォルトバリアントを作成します。

  • フロントエンドのJSSアプリ用に、Content Editorで定義されたコンポーネント項目に対応するコンポーネントファイルを作成します。

  • コンポーネントのパラメータテンプレートにベーステンプレートを追加し、必要な機能をサポートするようにしましょう。

注記

お好みのエディターでカスタムコンポーネントを利用可能にする方法については、「 ページビルダーでカスタムコンポーネントを利用可能にする」をご覧ください。

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

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

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

  1. Content Editorで /sitecore/layout/Renderings/Featureに移動し、右クリックしてからInsert > Rendering Folderをクリックします。例えば名前を入力しCustom Components。

  2. Custom Componentsフォルダを右クリックし、Json Renderingをクリックして名前を入力しCustomComponent1。

    Create a JSON component in the Content Editor

  3. sitecore/Templates/Featureに移動し、右クリックしてからInsert > Template Folderをクリックします。ここで名前CustomTemplates。

  4. CustomTemplatesフォルダを右クリックしてからInsert > New Templateをクリックします。

  5. ダイアログボックスで名前を入力してください。例えばMyParameters、Templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parameters/Base Rendering Parametersアイテムを選択します。パラメータテンプレートの場所としてCustomTemplatesフォルダを選択し、Nextをクリックします。

  6. CustomTemplatesフォルダを右クリックしてからInsert > New Templateをクリックします。

  7. ダイアログで名前を入力してください。例えばMyDatasource、、を選び、/Templates/System/Templates/Standard templateアイテムを選択します。 CustomTemplatesフォルダをデータソーステンプレートの場所として選び、Nextをクリックします。

  8. SomeTextという名前のテキストフィールドをデータソーステンプレートに追加するには、以下の手順に従ってください。

    • 右クリックMyDatasource、そしてInsert > Template sectionをクリックします。セクションの名前を入力してください。または、BuilderタブのAdd a new sectionフィールド内をクリックしてください。

    • もう一度MyDatasourceをクリックし、Builderタブで、追加したセクションの下のフィールド内をクリックしてください。

    • 名前SomeTextを入力し、例えばRich Textのフィールドタイプを選択します。

    Create a data source template and add a text field

  9. コンテンツツリーでCustomComponent1コンポーネントに移動します:

    • Datasource Template欄でInsert linkをクリックし、作成したMyDatasourceアイテムを選択します。

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

       

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

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

以下のスクリーンショットは、Pagesに内蔵されているRich Textコンポーネントと、バリアントを選択する場所を示しています。カスタムコンポーネントも似たような仕上がりになります:

Select a variant for a component in Pages

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

  1. sitecore/Content/[site collection]/[site]に移動し、右クリックData、そしてInsert > Insert from Templateをクリックします。

  2. Insert from TemplateダイアログでTemplates/Commonに移動し、Folderを選択します。Item Name欄に名前を入力してくださいCustomComponent1DataSources。このフォルダはコンポーネントのデータソースを保存するために使われます。

  3. sitecore/Content/[site collection]/[site]/Presentation/Headless Variantsに移動して「Insert > Variants」をクリックします。ここで名前Custom Component Variant。

  4. 右クリックCustom Component Variant、そしてInsert > Variant Definitionをクリックします。ここで名前Default。ここで記載されている名前は、後にコンポーネントTSXファイルで使われる名前と一致している必要があります。

    Create the Default variant for a custom component

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

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

注記

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

src/components.

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

  • TSXファイルがあるディレクトリに、コンポーネントアイテムのComponent Nameフィールドで定義した名前と同じ名前のコンポーネントファイルを追加します。この例では、CustomComponent1.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<string>;

} 

type CustomComponent1Props = {

  params: { [key: string]: string };

  fields: Fields;

};

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

  return (

    <div className={`component customcomponent1 ${props.params.styles}`}>

      <div className="component-content">

        <div>

          <Text field={props.fields.SomeText} />

        </div>

      </div>

    </div>

  );

};

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

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

注記

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

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

  1. sitecore/Templates/Feature/CustomTemplatesに移動してMyParametersをクリックします。

  2. ContentタブのDataセクションで、必要なベーステンプレートをパラメータテンプレートに割り当てます:

    • /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コード内の要素に属性をレンダリングします。

      Add base templates to a custom component

シンプルなカスタムコンポーネントを作成したら、お好みのエディターで利用できるようにすれば、コンテンツ作成者がページデザイン時にそのコンポーネントを使い始められます。

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