コンポーネントの作成とテンプレート連携

コンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。

ファイルコンポーネントの作成

今回はファイルを指定するためのコンポーネントを作っていきます。

コンポーネントの作成

まず最初に、以下のコードを実行して Data/FileSample の定義ファイル２つを準備します。

jss scaffold Data/FileSample

これにより、以下の２つのファイルが作成されます。

sitecore/definitions/components/Data/FileSample.sitecore.ts
src/components/Data/FileSample.tsx

１つ目のファイルはテンプレートを構成するフィールドのタイプを定義することができます。以下のファイルにコードを追加します。contentlist1 を作成して、コンテンツタイプを CommonFieldTypes.ContentList としています。

export default function FileSample(manifest: Manifest): void {
  manifest.addComponent({
    name: 'FileSample',
    icon: SitecoreIcon.DocumentTag,
    fields: [{ name: 'file1', type: CommonFieldTypes.File }],
  });
}

レンダリングを担うコードは以下の通りです。import に File および FileField の項目が追加されている点など、標準で作成されているコードと異なります。

import { File, FileField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';

type FileSampleProps = StyleguideComponentProps & {
  fields: {
    file1: FileField;
  };
};

const FileSample = (props: FileSampleProps): JSX.Element => (
  <div>
    <p>ファイル コンポーネント</p>
    <div>
      <File field={props.fields.file1} />
    </div>
  </div>
);

export default withDatasourceCheck()<FileSampleProps>(FileSample);

Sitecore にテンプレートの作成、データ保存のためのフォルダの作成

まず最初に、コンポーネントの定義となるテンプレートを作成します。フィールド名は file1 でフィールド形式は File を選択します。

続いてデータ保存のためのフォルダを作成します。

サンプルのデータに関しては、メディアライブラリにあるファイルを指定します。

レンダリングの追加、プレースホルダーの設定

続いてレンダリングを追加します。/sitecore/layout/Renderings/Project/sitecoredemo-jp/Data のパスの下に新しく Json Rendering を追加します。レンダリング名は FileSample を指定してください。作成したレンダリングの設定のうち、以下の２つの項目を設定します。

データソースの場所: 事前に作成をしたフォルダ
データソーステンプレート: 事前に作成をしたテンプレート

設定は以下のようになります。