View
911
Download
7
Embed Size (px)
DESCRIPTION
Sitecore CMS におけるマルチデバイスの概念を紹介しているスライドになります。
Citation preview
www.sitecore.net/japan© 2012 Sitecore
Sitecore CMS におけるマルチデバイス例:サイトコア株式会社
• ユーザーがアクセスしてきたデバイスに合わせて、ページを表示する。– http://www.sitecore.net/japan へ PC でアクセス(左)とスマートフォンでアク
セス(右)
www.sitecore.net/japan© 2012 Sitecore
Sitecore CMS におけるマルチデバイス変換ツールではない多くのメリット
• デバイスの特性に合った形で Web ページでの情報提供が可能– PC では広い画面を想定した、より使いやすいナビゲーションの提供– iPhone / Android / Windows Phone などのスマートフォンは縦スクロールを中心に– iPad や Android Tablet は少し広い画面での情報提供
• レイアウトを自由に定義することができる– 今後提供されるデバイス、デジタルサイネージなどブラウザが搭載されているデバイ
スに対しての情報提供を柔軟に実施することができる– 新しいレイアウトを定義することで、過去のコンテンツへの対応が容易に可能
ワンソース マルチユース
長期的なコスト削減
www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
Place holder
1. レイアウトの Place Holder を設定する
www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
Place holder
1. レイアウトの Place Holder を設定する
2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする
www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
1. レイアウトの Place Holder を設定する
2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする
3. Place Holder にサブレイアウトを適用して、その中にコンポーネントを配置する
Sub Layout
www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
1. レイアウトの Place Holder を設定する
2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする
3. Place Holder にサブレイアウトを適用して、その中にコンポーネントを配置する
Sub Layout
レンダリング
レンダリング
レンダリング
レイアウトに Place Holder を設定し、そこにサブレイアウト、レンダリングを配置する
www.sitecore.net/japan© 2012 Sitecore
レイアウトの例( PC )
全体のレイアウトHTML
+Placeholder の設定
レンダリング(ヘッダー)
サブレイアウト サブレイアウト
レンダリング
レンダリング
レンダリング(フッター)
www.sitecore.net/japan© 2012 Sitecore
レイアウトの例( PC )
全体のレイアウトHTML
+Placeholder の設定
レンダリング(ヘッダー)
サブレイアウト サブレイアウト
レンダリング
レンダリング
レンダリング(フッター)
PC 向けには必ずヘッダ、フッタをつけて、サイトの統一感を提供
www.sitecore.net/japan© 2012 Sitecore
レイアウトの例( PC )
全体のレイアウトHTML
+Placeholder の設定
レンダリング(ヘッダー)
サブレイアウト
レンダリング
レンダリング
レンダリング(フッター)
左側にメニューを配置するサブレイアウトの展開
www.sitecore.net/japan© 2012 Sitecore
レイアウトの例( PC )
全体のレイアウトHTML
+Placeholder の設定
レンダリング(ヘッダー)
サブレイアウト
レンダリング(フッター)
製品の紹介
製品写真
メニ
ュー
製品の紹介をするための写真、製品の紹介を表示して、 PC 向けのページが完成。
www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウトHTML
+Placeholder の設定
レイアウトの例(スマートフォン)
レンダリング(ヘッダー)
サブレイアウト サブレイアウト
レンダリング
レンダリング
レンダリング(フッター)
www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウトHTML
+Placeholder の設定
レイアウトの例(スマートフォン)
サブレイアウト
レンダリング
レンダリング
レンダリング(フッター)
サブレイアウト
画面の狭いスマートフォンではヘッダを入れないレイアウトにする。
www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウトHTML
+Placeholder の設定
レイアウトの例(スマートフォン)
サブレイアウト
レンダリング(フッター)
製品写真
製品の紹介画面が狭くなる分、製品写真に関しても縮小版のサムネイルを作成して自動生成、製品の紹介だけとシンプルなページを作る
www.sitecore.net/japan© 2012 Sitecore
マルチデバイスサイトのメリット
• スマートフォンユーザーに対して、見やすいページの情報提供を実現
• 変換ツールの提供ではないため、自由にレイアウトの変更が可能• アプリ対応(デバイス連携)
– REST API や XML 連携などで、アプリに対してのコンテンツ配信を実現
• ユーザーのシナリオにあわせた情報提供(マツダ オーストラリア)– PC では車の紹介が項目としては一番重要な場所に、スマートフォンでアクセスを
すると、ディーラーを探すが一番上の項目になっており、デバイスを使うユーザーがどのようにページを活用するのかを想定したものとしている。