Sitecore におけるレイアウトの考え方
Download as PPTX, PDF3 likes7,424 views
Sitecore CMS におけるレイアウトの概念を紹介しています。このスライドの内容は、ブログにて紹介していきます。
Sitecore におけるレイアウトの考え方
- 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