コンテンツモデリングとプレゼンテーション

コンテンツモデリング

コンテンツモデリングとは、ウェブサイト上で提示される要素のスキーマ構造を作成することを指します。これはテンプレート^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_template、別名データテンプレートを使って行います。テンプレートはフィールドで構成されます^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_field。例えば、記事をサイトに寄稿する著者に関する情報を含むウィジェットのデータ構造を作成します。そのモデルには、著者のフルネーム、一行の略歴、画像、専門分野を含めることができます。これらのフィールドは単なるデータであり、データの提示方法に関する情報は含まれていません。

プレゼンテーション

作る要素のデザインが決まってから、プレゼンテーション要素の作成を始めます。SitecoreAIでは、ほとんどのプレゼンテーション要素がコンテンツエディターで構築されています。プレゼンテーションには以下の要素が含まれます:

• プレースホルダー - プレースホルダーキーを用いて、コンポーネント、ページ、またはあらゆる種類のプレゼンテーション要素の許容される位置を決定します。また、プレースホルダーで許可されるコンポーネントの種類も決められます。
• 部分的なデザイン - プレゼンテーションやコンテンツ要素があらかじめ組み込まれている要素です。部分的なデザインを更新すると、サイト内で再利用されているすべての場所で変更されます。
• コンポーネント - Pagesでウェブページに追加し、内容を追加・編集し、見た目をカスタマイズできるプレゼンテーション定義です。
• ページデザイン - ページの表示定義。プレースホルダー、部分的なデザイン、コンポーネント、レンダリングパラメータで構成されています。
• レイアウト - プレゼンテーションの定義を組み合わせ、異なるプレゼンテーション要素を組み合わせるものです。

製本内容とレイアウト

コンテンツとページレイアウトをバインドするには、データソース^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_datasourceを使っています。例えば、ドロップダウンメニュー(レイアウト)にコンテンツツリー内の子項目の名前を入力できます。プレースホルダーを使って動的にバインドできます。

データソースを使うだけでなく、レンダリングパラメータを使ってコンテンツをバインドせずに表示を制御できます。レンダリングパラメータを使うと、コンテンツ作成者がそのコンポーネントを使う際に選択できるプレゼンテーションオプションを設定できます。例えば、そのコンポーネントが著者の情報を表示するウィジェットであれば、作者がウィジェットの背景色を選択できるようにレンダリングパラメータを設定できます。

要素の再利用

SitecoreAIでは、多くのデータやプレゼンテーション要素を、サイトやコレクション全体で柔軟かつ強力な組み合わせで再利用できます。いくつかの例は以下の通りです:

• ヘッダーやフッターを部分的なデザインとして作成し、サイト全体で再利用できるようにしましょう。これにより、部分的な設計を一度にクエリ・ロードし、キャッシュしてサイトのパフォーマンスを向上させるという利点もあります。
• 分岐テンプレートを使って、一貫性のある事前構成された構造で複数の関連項目を作成するのを効率化しましょう。著者はFAQやチームプロフィールなどのセットを一度に素早く挿入できるため、サイト全体で構造化されたコンテンツをより迅速かつ効率的に構築できます。
• コンテンツアイテムを再利用するには、コンテンツアイテムのグループ(ヒール、メンズエレガントシューズ、ハイキングブーツなどを含む Shoes 製品フォルダ)を作成し、それらを異なるコンポーネント(靴コレクションを回転させるカルーセルコンポーネントや、20%オフのプロモーション用アイテムなど)で表示します。
• レンダリングパラメータをコンポーネントに割り当て、まったく同じコンポーネントを異なるスタイルでレンダリングできるようにします。
• データソースが複数のページにまたがって再利用されている場合、変更は一度更新するだけですべての場所で適用されます。

例のコンポーネント

以下の例は、従業員名、役割、画像、引用を含む従業員カードコンポーネントのテンプレートを示しています。

コンポーネント自体はメディアライブラリのメディアで埋められ、テキストフィールドのフィールドは次のように記入されます:

最後に、コンポーネントはウェブサイト上でレンダリングされ、プレゼンテーションの詳細とCSSが適用されます。

さらなる参考文献

コンテンツのモデリングやレイアウトの制御は、コンテンツエディターやページなどのインターフェース、またはコンテンツ作成・管理のGraphQL APIを使います。

これらの特徴についてさらに読むことができます:

• データソース
• データテンプレート
• コンポーネント内で動的プレースホルダーを使う
• ページデザインの仕事
• 部分設計の作業
• Sitecore著作および管理GraphQL API

^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_datasource

We differentiate between *internal* and *external* data sources. An internal data source is created and handled within SitecoreAI, for example: text, images, media, a site page. They can be stored on a page level (available to all the components on that page) or the site level (available to all the site components). In addition, you can set the data source of a page to be the page itself. This is useful for utilizing the page's metadata. For example, the title of the page as it appears in the browser tab can be tied to the page name.

External data sources are created and saved outside of SitecoreAI. A component can fetch the data from an external source using one of the following methods: by including some JSON that calls the data source, sending an HTTP request and handling the response, or using the result of a GraphQL query.

^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_template

For example, a Product data template contains 2 sections: General information, and Manufacturing details. The General information section contains these fields:

• Name – string
• Catalog ID – string
• Price – integer

The Manufacturing details section contains:

• Manufacturer – string
• Manufacturing country – list

Templates inherit definitions from a *base template*, which is simply a template that other templates inherit fields and sections from.

^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a_xmc_field

The following image fromƒuswer Explorer shows a Title component (also known as a rendering) and default variant. On the right are the various fields that this item is made of.

!Items in Explorer(../images/item_field.jpg)