Sitecore におけるレイアウトの考え方

www.sitecore.net/japan© 2012 Sitecore

Sitecore におけるレイアウトの考え方

サイトコア株式会社


レイアウトの考え方

• ページ全体のデザインを「レイアウト」として管理– ページで表示する「コンテンツ」と「デザイン」を分けて管理をして、

デザイン部分を「レイアウト」として管理します– デバイスごとに異なるレイアウトを準備することができます

• ページのデザインにおける区分けを「サブレイアウト」として管理– ヘッダー、フッターなどを「サブレイアウト」で定義をします– レイアウトに設定されている「プレースホルダー」に割り当てができま

す– レイアウトの中にサブレイアウトを固定して配置できます– プレースホルダーを階層化して持つこともできます

• レンダリング– サイトコアの管理しているコンテンツ単位「アイテム」を表示する部品– 部品も「プレースホルダー」に配置することができます


例： www.sitecore.net/japan の場合

Header ヘッダーエリア

Footer フッターエリア

Contentコンテンツエリア

Main Banner

Highlight

Demo request

Partner

メインバナー

デモリクエスト

新着ニュース

パートナー


代表的なレイアウト構造

• ページレイアウト– ページが利用する全体の情報を

用意します• ヘッダー、フッター

– サイトの中では変わることがないサブレイアウトとして、今回はレイアウトに埋め込みます

• コンテンツエリア（ content)– プレースホルダーを設定します– サブレイアウトなどを配置でき

るようにします

ページレイアウト

ヘッダー

フッター

コンテンツエリア（ content ）


サブレイアウト

• サブレイアウト = ページの中を部品化して並べる仕組み– レイアウトに固定して配置する（ヘッダー、フッターなど）– プレースホルダー（配置する場所）にサブレイアウトを配置す

る– サイトコアで管理しているコンテンツ（情報）を表示するエリ

アHeader

Campaign

Banners

<div id="Header">ヘッダーのサブレイアウトを配置 </div><div id="Campaign">キャンペーンのサブレイアウトを配置 </div><div id="Banners">複数のバナーを配置 </div>

div タグで区分けする部分で再利用するエリアを部品化


例：レイアウト・サブレイアウトの実装

• レイアウトファイル

* サンプルのコードは、説明上必要な部分をピックアップしています。基本的には HTML と Sitecore における定義のみで記載しています。

<div id="header"> <sc:sublayout runat="server" RenderingID="{64977EC7-B61C-4CFE-9633-88B23BB0909A}" Path="/Components/mainlayout/PresentationLayer/header.ascx" ID="pageHeader" /></div><div id="MainPanel"> <sc:placeholder runat="server" key="content" id="Placeholder1" /></div><div id="footer"> <sc:sublayout runat="server" RenderingID="{64977EC7-B61C-4CFE-9633-88B23BB0909A}" Path="/Components/MainLayout/PresentationLayer/footer.ascx" ID="pageFooter" /></div>

• ヘッダー、フッターのレイアウトを部品として作成し、配置する• Placeholder には、別途作成したサブレイアウトやレンダリングを配置ができる• コンポーネントの中は、 HTML のコードを中心に作ることができます

• <sc: /> タグを利用して、サイトコアに格納している情報を呼び出します。

簡単なレイアウトの作成であれば、 HTML を基本とした情報と、 Sitecore のコンポーネントの使い方をマスターするだけで、レイアウトを作成することが可能

サブレイアウトの設定

サブレイアウトの設定

プレースホルダー


デベロッパーセンター

• レイアウト、サブレイアウト、レンダリングを作成します– ファイルの作成と同時に、 Sitecore の設定も自動的に実行しま

す– 簡単な変更であれば、このツールからでも実行可能


テンプレートマネージャー

• コンテンツのデータ構造（テンプレート）を作成・管理します


Appendix

• プロジェクト単位でコンポーネント化をすると、並行してサイトの構築作業を実施することができて効率的です

• コンポーネント毎のファイルの管理において、以下のディレクトリ構造で管理しています– Components : 役割に分けてフォルダを分けて管理します

• PresentationLayer : デザインに関するファイル– Layout : Components に関連するレイアウトファイル– Sublayout : Components に関連するサブレイアウトファイル– Renderings : Components に関連するレンダリングファイル

• Scripts : コンポーネント固有の JavaScript を管理します• Styles : コンポーネント固有のスタイルシートを管理します

• プロジェクトの作成は、別記事で紹介予定

Technology

Sitecore におけるレイアウトの考え方