Sitecore cms マルチデバイス対応

1,165 views

Published on

Sitecore CMS におけるマルチデバイスの概念を紹介しているスライドになります。

Published in: Technology, Travel
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,165
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sitecore cms マルチデバイス対応

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

×