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

5,151 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,151
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Sitecore におけるレイアウトの考え方 サイトコア株式会社© 2012 Sitecore www.sitecore.net/japan
  2. 2. レイアウトの考え方 • ページ全体のデザインを「レイアウト」として管理 – ページで表示する「コンテンツ」と「デザイン」を分けて管理を して、デザイン部分を「レイアウト」として管理します – デバイスごとに異なるレイアウトを準備することができます • ページのデザインにおける区分けを「サブレイアウト」 として管理 – ヘッダー、フッターなどを「サブレイアウト」で定義をします – レイアウトに設定されている「プレースホルダー」に割り当てが できます – レイアウトの中にサブレイアウトを固定して配置できます – プレースホルダーを階層化して持つこともできます • レンダリング – サイトコアの管理しているコンテンツ単位「アイテム」を表示す る部品 – 部品も「プレースホルダー」に配置することができます© 2012 Sitecore www.sitecore.net/japan
  3. 3. 例: www.sitecore.net/japan の場合 Header ヘッダーエリア Main Banner メインバナー Content Demo request コンテンツエ デモリクエス リア ト Highlight 新着ニュース Partner パートナー Footer フッターエリア© 2012 Sitecore www.sitecore.net/japan
  4. 4. 代表的なレイアウト構造 • ページレイアウト ヘッダー – ページが利用する全体の情報を 用意します • ヘッダー、フッター – サイトの中では変わることがな いサブレイアウトとして、今回 はレイアウトに埋め込みます コンテンツエリア ページレイアウト (content) • コンテンツエリア(content) – プレースホルダーを設定します – サブレイアウトなどを配置でき るようにします フッター© 2012 Sitecore www.sitecore.net/japan
  5. 5. サブレイアウト • サブレイアウト = ページの中を部品化して並べる仕組み – レイアウトに固定して配置する(ヘッダー、フッターなど) – プレースホルダー(配置する場所)にサブレイアウトを配置する – サイトコアで管理しているコンテンツ(情報)を表示するエリア Header <div id="Header"> ヘッダーのサブレイアウトを配置 </div> <div id="Campaign"> Campaign キャンペーンのサブレイアウトを 配置</div> <div id="Banners"> 複数のバナーを配置</div> Banners div タグで区分けする部分で再利 用するエリアを部品化© 2012 Sitecore www.sitecore.net/japan
  6. 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. 7. デベロッパーセンター • レイアウト、サブレイアウト、レンダリングを作成しま す – ファイルの作成と同時に、Sitecore の設定も自動的に実行します – 簡単な変更であれば、このツールからでも実行可能© 2012 Sitecore www.sitecore.net/japan
  8. 8. テンプレートマネージャー • コンテンツのデータ構造(テンプレート)を作成・管理 します© 2012 Sitecore www.sitecore.net/japan
  9. 9. Appendix • プロジェクト単位でコンポーネント化をすると、並行し てサイトの構築作業を実施することができて効率的です • コンポーネント毎のファイルの管理において、以下の ディレクトリ構造で管理しています – Components : 役割に分けてフォルダを分けて管理します • PresentationLayer : デザインに関するファイル – Layout : Components に関連するレイアウトファイル – Sublayout : Components に関連するサブレイアウトファイル – Renderings : Components に関連するレンダリングファイル • Scripts : コンポーネント固有の JavaScript を管理します • Styles : コンポーネント固有のスタイルシートを管理します • プロジェクトの作成は、別記事で紹介予定© 2012 Sitecore www.sitecore.net/japan

×