Published on

コンポーネントの作成とテンプレート連携 - テキスト編

Authors

Sitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。

フィールド形式および定義の整理

まず最初に、Sitecore のコンポーネントを作るにあたっての定義と Sitecore におけるフィールド形式の一覧を整理していきます。項目と値を一覧にしたものは以下の通りです。

項目用途設定する値Sitecore のフィールド形式
singlelinetext11行テキストCommonFieldTypes.SingleLineTextSingle-Line Text
multilinetext1複数行テキストCommonFieldTypes.MultiLineTextMulti-Line Text
richtext1リッチテキストCommonFieldTypes.RichTextRich Text
image1画像CommonFieldTypes.ImageImage
number1数字CommonFieldTypes.NumberNumber
checkbox1チェックボックスCommonFieldTypes.CheckboxCheckbox
contentlist1コンテンツリストCommonFieldTypes.ContentListTreelist
date1日付CommonFieldTypes.DateDate
datetime1日付時間CommonFieldTypes.DateTimeDatetime
generallink1一般リンクCommonFieldTypes.GeneralLinkGeneral Link
itemlink1アイテムリンクCommonFieldTypes.ItemLinkDroptree
file1ファイルCommonFieldTypes.FileFile

今回はテンプレートをいくつかに分けて、利用方法を紹介していきたいと考えています。基本的には jss scaffold を利用してコンポーネントを作成して、いくつかのフィールド形式を設定してコンポーネントとして展開するという流れで考えています。

テキスト関連のコンポーネントの作成

今回はコンポーネントとして、テキストのフィールドを組み合わせたものを作成して、Sitecore に展開、編集できるところまで作っていきます。

コンポーネントの作成

上の表でいくと、最初の3つの項目を定義しているコンポーネントの作成を進めていきます。まず最初に、以下のコードを実行して Data/TextSample の定義ファイル2つを準備します。

jss scaffold Data/TextSample
template

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

  • sitecore/definitions/components/Data/TextSample.sitecore.ts
  • src/components/Data/TextSample.tsx

1つ目のファイルはテンプレートを構成するフィールドのタイプを定義することができます。以下のファイルにコードを追加します。

sitecore/definitions/components/Data/TextSample.sitecore.ts
export default function TextSample(manifest: Manifest): void {
  manifest.addComponent({
    name: 'TextSample',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { name: 'singlelinetext1', type: CommonFieldTypes.SingleLineText },
      { name: 'multilinetext1', type: CommonFieldTypes.MultiLineText },
      { name: 'richtext1', type: CommonFieldTypes.RichText },
    ],
  });
}

CommonFieldTypes につける設定項目は、Visual Studio Code を利用すれば以下のように選択できるようになっています。

template

続いてこの項目をページのアイテムとして表示するように指定します。

src/components/Data/TextSample.tsx
import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';

type TextSampleProps = StyleguideComponentProps & {
  fields: {
    singlelinetext1: Field<string>;
    multilinetext1: Field<string>;
    richtext1: Field<string>;
  };
};

const TextSample = (props: TextSampleProps): JSX.Element => {
  return (
    <div>
      <h2>1行テキスト</h2>
      <div>
        <Text field={props.fields.singlelinetext1} />
      </div>
      <h2>複数行テキスト</h2>
      <div>
        <Text field={props.fields.multilinetext1} />
      </div>
      <h2>リッチテキスト</h2>
      <div>
        <Text field={props.fields.richtext1} />
      </div>
    </div>
  );
};

export default withDatasourceCheck()<TextSampleProps>(TextSample);

上記のコードが出来上がったところで、GitHub にコードを展開しましょう。

Sitecore にテンプレートを作成する

続いて上記のコンポーネントに関する Sitecore 側の設定を進めていきます。今回は全て Data のフォルダを作成してサンプルのコードを展開していくため、フォルダを作成してテンプレートの作成をします。

  1. Data フォルダを作成
  2. TextSample のテンプレートを作成する
  3. singlelinetext1, multilinetext1 および richtext1 を追加してそれぞれのフィールド形式に揃えます

出来上がったテンプレートは以下の通りです。

template

データ保存のためのフォルダの作成

テンプレートの作成と合わせて、今回のデモ用のデータを保存する場所を設定しておきます。今回はサイトの Components フォルダの中に Data のフォルダを作成、その下に定義をするデータを格納できるようにもう1つフォルダを作成します。

template

レンダリングの追加

今回定義をしたデータをもとにしたアイテムを作成するために、レンダリングを追加します。Data フォルダを作成して、の下に Json レンダリングのアイテムを作成します。アイテムの名前は、すでに作成しているコンポーネントと同じく TextSample とします。

template

続いてこのレンダリングの追加設定を行います。設定するべきは2点。データソースの場所にはコンテンツを配置するフォルダ(1つ前に作成したもの)、もう一つは データソース テンプレート で、テンプレートの定義(2つ前に作成したもの)を利用します。以下の画面が設定している内容となります。

template

プレースホルダーの設定

プレースホルダーとしては jss-main のみを現在のところは設定しているだけとなるため、jss-main でこのコンポーネントを使えるようにします。対象となるアイテムは、/sitecore/layout/Placeholder Settings/Project/sitecoredemo-jp/jss-main で、 関連付けられたコントロール に表示されるように設定を変更します。

template

検証

動作検証をするために、先にアイテムを用意します。 /sitecore/content/sitecoredemo-jp/Components/Data/TextSample フォルダの下に SampleTextData というアイテムを作成します。もちろん、対象となるテンプレートを作成してというのが前提となります。

template

作成したアイテムにデータを入れておきます。内容はなんでも問題ありませんが、今回は以下のように記載しました。

template

続いて Horizon のエディターを開きます。

template

コンポーネントが有効になって、編集することが可能となりました。

まとめ

テキストの3つのタイプのデータを含んだテンプレートを作成して、表示する部分および編集ができるようになるところまで紹介をしました。しばらくはこのシリーズを進めていきたいと思います。