Sitecore XM Docker コンテナ サンプルページ解説 -概念編-

Sitecore XM Docker コンテナ インスタンス を立ち上げるとサンプルページが立ち上がりますがどのように表示されているか見ていきます。
この記事を読んでいただけると、Sitecore XM におけるページ構成の基礎が理解できます。

サンプルページの構成について

コンテナを立ち上げると次のようなページが表示されます。細部については少し変えてありますが、基本的な構成は同じです。

エクスペリエンスエディターをデザインモードで確認

エクスペリエンスエディターを立ち上げて、デザインモードにします。

画面左上のあたりをクリックするとクリックした場所に応じてレイアウトが表示され、Sample Sublayoutが表示されます。

この時次のボタンをクリックするとレイアウトのツリー構造が表示されます。

Sample Sublayoutの親がmainということがわかります。

さらに下部の Sitecore の文字あたりをクリックして、Sample Rendering も同様に確認すると先ほどよりも複雑なツリーが表示されます。

このサンプルページは複数のパーツから構成されていることが理解できるかと思います。

サンプルページを表示する各要素

サンプルページの各要素を大まかな図にすると次のようなイメージです。

レイアウト、サブレイアウト、レンダリング、プレースホルダーなど聞きなれない言葉が出てきますが、Webフレームワークを使った開発の経験があれば、おそらくイメージ通りかと思います。

サイトコアのすべてのページに必要な要素は一部例外を除いて４つで、テンプレート・コンテンツ・レイアウト・レンダリングです。

レイアウトとレンダリング

このうちページを表示する骨格となるのはレイアウトとレンダリングです。
レイアウトでページ構成の基礎を作り、細部をサブレイアウトで詳細化します。最終的なコンテンツの表示はレンダリングにて行います。

各レイアウトとサブレイアウトにはプレースホルダーを設定可能で後述のテンプレートにて動的に設定をすることが可能です。

テンプレートとコンテンツ

テンプレートとコンテンツを先の図に書き足すと次の通りになります。

テンプレートは人によって意味のとらえ方が異なるかもしれません。私は誤解を恐れずに言えば、サイトコアのテンプレートは「データテンプレート」もしくはプログラミングでいうところの「クラス」に近いものだと思っています。
テンプレートはデータや関連性の定義であって、単体では画面に表示することができません。

テンプレートには主に２つの役割があります。
１つ目はコンテンツのデータ定義。コンテンツに登録できるデータの定義をします。このサンプルでは「Title」と「Text」の2つが定義されています。
２つ目はレイアウトの定義。テンプレートにレイアウトとプレースホルダーの指定を行います。

したがって、サイトコアのページの中核はテンプレートであるといっても過言ではないと思います。

各関係性

テンプレートを中心とした各要素の関係性は次のようになります。コンテンツとレイアウトのつなぎこみをテンプレートが行っていると理解していただければと思います。

ベーステンプレートというものが新しく出てきました。サンプルページの Sample Item テンプレートはベーステンプレートを継承して作られています。オブジェクト指向プログラミン グでいう継承と同じ概念です。

ベストプラクティスの一つとしてすべてのテンプレートは継承を利用することが推奨されます。

Sample Item テンプレートはデフォルトである Standard Template を継承しています。

すべてはアイテム

ここまで、テンプレート・コンテンツ・レイアウト・レンダリングが必要だということを説明してきましたが、サイトコアではこれらをすべてアイテムとして管理しています。また新しい言葉が出てきて恐縮ですが、サイトコア上で管理するデータはすべてアイテムです。

テンプレートアイテム

具体的に Sitecore Rocks で見てみましょう。 Sample Item テンプレートを見てみます。
Instances の 5 instanses をクリックしていると、このテンプレートが参照しているアイテムと参照されているアイテムが表示されます。

このテンプレートは Standard template から継承され、Home と Sampleitem で使われていることがわかります。
また、 Item Name, Item ID, Item Path などすべて Item として表現されているということが読み取れます。

レイアウトアイテム

続いてレイアウトである Sample Layout を見てみましょう。

Template Name は Layout となっています。 Sample Layout は Layout テンプレートを継承したアイテムだということがわかります。

また、余談ですが Path に /layouts/Sample Layout.aspx が指定されており、このレイアウトの振る舞いは aspx のファイルが登録されていることがわかります。
Item Name, Item ID, Item Path など、テンプレートと同様です。

サブレイアウトアイテム

サブレイアウトについても同じです。簡単にキャプチャを載せます。

それぞれ、レイアウト同様で違いは Template Name が SubLayout で Path に指定されるのは ascx ファイルということです。

レンダリングアイテム

レンダリングも同様です。

Template Name が Xsl Rendering で Path に指定されるのは xslt ファイルです。

コンテンツアイテム

コンテンツです。

Template Name が Sample Item なので、 Title と Text が指定できます。
これも余談ですが、 Sitecore Rocks 上から直接編集することも可能です。

アイテムの型はテンプレート

これらからすべてのアイテムはなんらかのテンプレートであることがわかります。言い方を変えると、テンプレート・レイアウト・レンダリングといったアイテムたちはテンプレートの違いでしかないということです。

このあたりをしっかり理解できるようになると、サイトコアを扱いやすくなるのではと思います。

まとめ

サンプルページを通じて、サイトコアのページ構成の基礎を解説しました。
テンプレート・レイアウト・レンダリングといったサイトコアの重要な概念が複数出てきましたので、ぜひ理解していただければと思います。

次回はプレースホルダーや aspx など、コードの部分を解説していきたいと思います。