Enviar búsqueda
Cargar
Sitecore におけるレイアウトの考え方
•
Descargar como PPTX, PDF
•
3 recomendaciones
•
7,392 vistas
サイトコア株式会社
Seguir
Sitecore CMS におけるレイアウトの概念を紹介しています。このスライドの内容は、ブログにて紹介していきます。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 9
Descargar ahora
Recomendados
Selenium入門(2023年版)
Selenium入門(2023年版)
onozaty
Obsidian Talk JP - Template & Daily notes - 2021-09-04
Obsidian Talk JP - Template & Daily notes - 2021-09-04
博文 斉藤
Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!
ymmt
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話
Taiga Takahari
[DO08] 『変わらない開発現場』を変えていくために ~エンプラ系レガシー SIer のための DevOps 再入門~
[DO08] 『変わらない開発現場』を変えていくために ~エンプラ系レガシー SIer のための DevOps 再入門~
de:code 2017
SharePoint Framework を触ってみた
SharePoint Framework を触ってみた
Kosuke Kuromiya
SmartNewsのニュース配信を支えるサーバ技術 / Kazhiro Sera @ SmartNews,Inc. #jjug_ccc
SmartNewsのニュース配信を支えるサーバ技術 / Kazhiro Sera @ SmartNews,Inc. #jjug_ccc
SmartNews, Inc.
Recomendados
Selenium入門(2023年版)
Selenium入門(2023年版)
onozaty
Obsidian Talk JP - Template & Daily notes - 2021-09-04
Obsidian Talk JP - Template & Daily notes - 2021-09-04
博文 斉藤
Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!
ymmt
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話
Taiga Takahari
[DO08] 『変わらない開発現場』を変えていくために ~エンプラ系レガシー SIer のための DevOps 再入門~
[DO08] 『変わらない開発現場』を変えていくために ~エンプラ系レガシー SIer のための DevOps 再入門~
de:code 2017
SharePoint Framework を触ってみた
SharePoint Framework を触ってみた
Kosuke Kuromiya
SmartNewsのニュース配信を支えるサーバ技術 / Kazhiro Sera @ SmartNews,Inc. #jjug_ccc
SmartNewsのニュース配信を支えるサーバ技術 / Kazhiro Sera @ SmartNews,Inc. #jjug_ccc
SmartNews, Inc.
Visual Studio を使わず .NET する
Visual Studio を使わず .NET する
m ishizaki
マイクロサービスアーキテクチャとは何か
マイクロサービスアーキテクチャとは何か
Yusuke Suzuki
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
CData Software Japan
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
COWJS.pdf
COWJS.pdf
ssuser1d8ff9
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
Cookpad TechConf 2016 - DWHに必要なこと
Cookpad TechConf 2016 - DWHに必要なこと
Minero Aoki
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
Recruit Technologies
HBaseを用いたグラフDB「Hornet」の設計と運用
HBaseを用いたグラフDB「Hornet」の設計と運用
Toshihiro Suzuki
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
ドメイン駆動設計とマイクロサービス
ドメイン駆動設計とマイクロサービス
kouki_mitsuishi
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
Takehiro Suemitsu
Hadoop ~Yahoo! JAPANの活用について~
Hadoop ~Yahoo! JAPANの活用について~
Yahoo!デベロッパーネットワーク
オンプレミスRDBMSをAWSへ移行する手法
オンプレミスRDBMSをAWSへ移行する手法
Amazon Web Services Japan
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
Más contenido relacionado
La actualidad más candente
Visual Studio を使わず .NET する
Visual Studio を使わず .NET する
m ishizaki
マイクロサービスアーキテクチャとは何か
マイクロサービスアーキテクチャとは何か
Yusuke Suzuki
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
CData Software Japan
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
COWJS.pdf
COWJS.pdf
ssuser1d8ff9
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
Cookpad TechConf 2016 - DWHに必要なこと
Cookpad TechConf 2016 - DWHに必要なこと
Minero Aoki
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
Recruit Technologies
HBaseを用いたグラフDB「Hornet」の設計と運用
HBaseを用いたグラフDB「Hornet」の設計と運用
Toshihiro Suzuki
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
ドメイン駆動設計とマイクロサービス
ドメイン駆動設計とマイクロサービス
kouki_mitsuishi
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
Takehiro Suemitsu
Hadoop ~Yahoo! JAPANの活用について~
Hadoop ~Yahoo! JAPANの活用について~
Yahoo!デベロッパーネットワーク
オンプレミスRDBMSをAWSへ移行する手法
オンプレミスRDBMSをAWSへ移行する手法
Amazon Web Services Japan
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
La actualidad más candente
(20)
Visual Studio を使わず .NET する
Visual Studio を使わず .NET する
マイクロサービスアーキテクチャとは何か
マイクロサービスアーキテクチャとは何か
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
「私のkintone 連携には何が最適?」CData Software ソリューションを使うケースは?
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
COWJS.pdf
COWJS.pdf
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Cookpad TechConf 2016 - DWHに必要なこと
Cookpad TechConf 2016 - DWHに必要なこと
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
HBaseを用いたグラフDB「Hornet」の設計と運用
HBaseを用いたグラフDB「Hornet」の設計と運用
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
ドメイン駆動設計とマイクロサービス
ドメイン駆動設計とマイクロサービス
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
AWSでAPI Gatewayから非同期でLambdaを起動してS3にファイルアップロードしようとしたらハマった話。
Hadoop ~Yahoo! JAPANの活用について~
Hadoop ~Yahoo! JAPANの活用について~
オンプレミスRDBMSをAWSへ移行する手法
オンプレミスRDBMSをAWSへ移行する手法
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Similar a Sitecore におけるレイアウトの考え方
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
Wp html5
Wp html5
regret raym
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
Ryuji Egashira
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
20141101 handson
20141101 handson
Six Apart
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
Keisuke Todoroki
20130225 pronet study
20130225 pronet study
Six Apart
20141206 handson
20141206 handson
Six Apart
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
20130406 rainier study
20130406 rainier study
Six Apart
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Keisuke Todoroki
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
Seto Takahiro
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
Similar a Sitecore におけるレイアウトの考え方
(20)
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
WordBenchTokyo-20111126
WordBenchTokyo-20111126
Wp html5
Wp html5
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
HTML5 for IA
HTML5 for IA
20141101 handson
20141101 handson
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
20130225 pronet study
20130225 pronet study
20141206 handson
20141206 handson
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
20130406 rainier study
20130406 rainier study
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Head First XML Layout on Android
Head First XML Layout on Android
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Más de サイトコア株式会社
Sitecore レイアウトに関して
Sitecore レイアウトに関して
サイトコア株式会社
Sitecore ワイルドカード モジュールについて
Sitecore ワイルドカード モジュールについて
サイトコア株式会社
Sitecore Social connected
Sitecore Social connected
サイトコア株式会社
Sitecore cms マルチデバイス対応
Sitecore cms マルチデバイス対応
サイトコア株式会社
サイトコアを活用した Web マーケティング最新事例
サイトコアを活用した Web マーケティング最新事例
サイトコア株式会社
Sitecore CMS 概要
Sitecore CMS 概要
サイトコア株式会社
Más de サイトコア株式会社
(6)
Sitecore レイアウトに関して
Sitecore レイアウトに関して
Sitecore ワイルドカード モジュールについて
Sitecore ワイルドカード モジュールについて
Sitecore Social connected
Sitecore Social connected
Sitecore cms マルチデバイス対応
Sitecore cms マルチデバイス対応
サイトコアを活用した Web マーケティング最新事例
サイトコアを活用した Web マーケティング最新事例
Sitecore CMS 概要
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
Descargar ahora