Sitecore CMS におけるレイアウトの概念を紹介しています。このスライドの内容は、ブログにて紹介していきます。

1. Sitecore におけるレイアウトの考え方
サイトコア株式会社
© 2012 Sitecore www.sitecore.net/japan

2. レイアウトの考え方
• ページ全体のデザインを「レイアウト」として管理
– ページで表示する「コンテンツ」と「デザイン」を分けて管理を
して、デザイン部分を「レイアウト」として管理します
– デバイスごとに異なるレイアウトを準備することができます
• ページのデザインにおける区分けを「サブレイアウト」
として管理
– ヘッダー、フッターなどを「サブレイアウト」で定義をします
– レイアウトに設定されている「プレースホルダー」に割り当てが
できます
– レイアウトの中にサブレイアウトを固定して配置できます
– プレースホルダーを階層化して持つこともできます
• レンダリング
– サイトコアの管理しているコンテンツ単位「アイテム」を表示す
る部品
– 部品も「プレースホルダー」に配置することができます
© 2012 Sitecore www.sitecore.net/japan

3. 例： www.sitecore.net/japan の場合
Header ヘッダーエリア
Main Banner メインバナー
Content
Demo request コンテンツエ デモリクエス
リア ト
Highlight 新着ニュース
Partner パートナー
Footer フッターエリア
© 2012 Sitecore www.sitecore.net/japan

4. 代表的なレイアウト構造
• ページレイアウト
ヘッダー
– ページが利用する全体の情報を
用意します
• ヘッダー、フッター
– サイトの中では変わることがな
いサブレイアウトとして、今回
はレイアウトに埋め込みます
コンテンツエリア
ページレイアウト
（content） • コンテンツエリア（content)
– プレースホルダーを設定します
– サブレイアウトなどを配置でき
るようにします
フッター
© 2012 Sitecore www.sitecore.net/japan

5. サブレイアウト
• サブレイアウト = ページの中を部品化して並べる仕組み
– レイアウトに固定して配置する（ヘッダー、フッターなど）
– プレースホルダー（配置する場所）にサブレイアウトを配置する
– サイトコアで管理しているコンテンツ（情報）を表示するエリア
Header <div id="Header">
ヘッダーのサブレイアウトを配置
</div>
<div id="Campaign">
Campaign キャンペーンのサブレイアウトを
配置</div>
<div id="Banners">
複数のバナーを配置</div>
Banners div タグで区分けする部分で再利
用するエリアを部品化
© 2012 Sitecore www.sitecore.net/japan

6. 例：レイアウト・サブレイアウトの実装
• レイアウトファイル
<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 のコ
ンポーネントの使い方をマスターするだけで、レイアウトを作成することが
可能
* サンプルのコードは、説明上必要な部分をピックアップしています。基本的には HTML と Sitecore における定義のみで記載してい
ます。
© 2012 Sitecore www.sitecore.net/japan

7. デベロッパーセンター
• レイアウト、サブレイアウト、レンダリングを作成しま
す
– ファイルの作成と同時に、Sitecore の設定も自動的に実行します
– 簡単な変更であれば、このツールからでも実行可能
© 2012 Sitecore www.sitecore.net/japan

8. テンプレートマネージャー
• コンテンツのデータ構造（テンプレート）を作成・管理
します
© 2012 Sitecore www.sitecore.net/japan

9. Appendix
• プロジェクト単位でコンポーネント化をすると、並行し
てサイトの構築作業を実施することができて効率的です
• コンポーネント毎のファイルの管理において、以下の
ディレクトリ構造で管理しています
– Components : 役割に分けてフォルダを分けて管理します
• PresentationLayer : デザインに関するファイル
– Layout : Components に関連するレイアウトファイル
– Sublayout : Components に関連するサブレイアウトファイル
– Renderings : Components に関連するレンダリングファイル
• Scripts : コンポーネント固有の JavaScript を管理します
• Styles : コンポーネント固有のスタイルシートを管理します
• プロジェクトの作成は、別記事で紹介予定
© 2012 Sitecore www.sitecore.net/japan