eZ Publish 勉強会~ 8 月~   テンプレートオーバーライドシステム
ご挨拶●    サニエ エリック●   twitter/identica : @ericsagnes●   サイト http://clina.jp/
eZ Publish CE 2012.6●    バグフィックス●    のみ
テンプレートその1テンプレートオーバーライド
用語定義
デザイン●   エクステンションの design/ フォルダー直下の    フォルダー一個とその下のファイル一式●   標準デザインは eZ Publish のルートフォルダー    直下の design/ に入ります●   一つのデザインはテ...
テンプレート●   デザインフォルダー内に、ファイル拡張は .tpl    のファイル●   中身は HTML 、 eZ Publish テンプレート言語    とカスタムテンプレート言語の組み合わせ●    2種類あります    ●     ...
オーバーライド●    標準デザインのテンプレートの代わりに独自な    テンプレートを利用する仕組み●    2種類があります    ●        標準オーバーライド    ●        条件付きオーバーライド●    テンプレート以...
ページ●   ユーザが見る、 CMS の WEB ページ●    複数のテンプレートを組み合わせて作られてい    ます●   ノードを見る場合は必ず「 full 」ビューモード    が利用されます
テンプレートオーバーライド     可能性
オーバーライドの可能性●    テンプレートの粒度構造と管理●    テンプレートを複数サイトアクセスで利用●    テンプレート及びデザインの優先順位●    すべてのテンプレートのオーバーライド●   JSON 、 XML などのコンテンツ...
オーバーライドの可能性●    テンプレートを他プロジェクトで簡単に再利用●    テンプレート及びデザインの抽象化●    開発スピードと効率を究極に上げる
オーバーライドシステム     紹介
基本システム●    一つのページは複数のテンプレートを利用します●    必要なテンプレートだけをオーバーライドします●    標準の standard デザインはすべての標準テンプ    レートを提供します●    同じテンプレートは複数な...
基本システム●    デザイン毎にテンプレートセットを管理します●    一つのエクステンションは複数のデザインを含    む事ができます●   メインなテンプレートは pagelayout.tpl●    オーバーライドシステムは二種類ありま...
システムテンプレート          ノードテンプレート●   CMS の機能を利用する場合はシステムテンプ    レートが利用されます    例: user/login => user/login.tpl    content/edit =...
テンプレート組み合わせ図pagelayout.tpl                 メインナビゲーション   ノードテンプレート又は   システムテンプレート                    フッター
ページで利用されるテンプレート●    ページで利用されるテンプレートを確認する場    合はデバッグモードを有効にします●    デバッグとテンプレートデバッグを有効にした    場合はページの下利用されたテンプレートが表    示されます●...
ページで利用されるテンプレート
標準オーバーライド●    要求されるテンプレートをカスタムデザインで    読み込む仕組み●   テンプレートはカスタムデザインの templates    フォルダーに入ります●    テンプレート名は同じです    例: pagelayo...
テンプレート抽出の仕組み●   site.ini で設定されたデザインリストの順にテン    プレートの存在を確認します●    テンプレートはデザインに存在する場合、利用    されます●    テンプレートはデザインに存在しない場合、次  ...
テンプレート抽出の仕組み・基本                 有効デザインリストpagelayout.tpl                             extension/myext/design/design3/       ...
問題点●    コンテンツ閲覧の場合はノードテンプレートが    利用されます●    ノードテンプレートは一つのみです    node/view/full.tpl●    全てのコンテンツを同じテンプレートで実装す    る?●    そこに...
条件オーバーライド●    特定な条件が満たされた場合に特定なテンプレートを    利用する仕組み●   条件オーバーライドは override.ini という設定ファイ    ルに宣言します●    一つの条件オーバーライドは一つの設定ブロッ...
条件オーバーライドブロック ブロックタイトル           [full_article] 要求テンプレート           Source=node/view/full.tpl 利用テンプレート           MatchFile=...
オーバーライド・フォルダー●    条件オーバーライドで利用されるテンプレート    はデザインの「 override 」フォルダーの下に入    ります    例: extension/myext/design/mydesign/overri...
条件オーバーライドブロックの特徴●    ブロックタイトルは独特で設定する必要があり    ます●    ブロックに複数の条件を入れる事ができます、    その場合、条件は論理積で適用されます●    二つの条件を論理和で適用したい場合は各条件...
override.ini の特徴●   override.ini のブロック順はとても大事です●   override.ini のブロックは記載順で確認されま    す、最初に条件が満たされたブロックは利用さ    れます●   そのため、 o...
ビューモード●    ノードテンプレートが要求された場合には必ず    [node/view/full.tpl]●   標準として、 full ビューモードが利用されます●    ただし、テンプレートから他のテンプレートを    呼び出す際 (...
ビューモードの追加●    ビューモードの追加はとても簡単にできます、    テンプレートから他コンテンツを表示する際    node_view_gui オペレーターに view パラメー    ターを足します    例: {node_view...
注意点とベストプラクティス
注意点●   eZ Publish の柔軟性でもありますが、設定ファ    イル、テンプレートファイル等は複数な場所に    散らかっています●    特に設定ファイルは場所によって利用順番は決    まりますので要注意●    混乱する場合 ...
ベストプラクティス:鉄則●   eZ Publish の標準テンプレートは絶対変更しま    せん●    必ずデザインエクステンションを作って、カス    タムデザインを作ります●    標準テンプレートの微調整したい場合は、その    テン...
ベストプラクティス●   条件オーバーライドの「 MatchFile 」は条件、    ビューモード、属性等でフォルダーを作った方    が管理しやすい    ●   override/        –   page/ ページ名 .tpl  ...
テンプレートオーバーライド    ユースケース
多ビューモードで簡単に                ニュース一覧・概念●    ニュース一覧リストを下記のようにしたい    ●        最新のニュースはタイトル、画像と概要全文    ●   次の 4 ニュースはタイトルと概要全文  ...
多ビューモードで簡単に ニュース一覧・テンプレートニュース一覧テンプレート{foreach $news_item in $index => $news_list   max 10}  {if lt($index,1)}    {$node_vi...
多ビューモードで簡単に         ニュース一覧・テンプレートheadline テンプレート<div class="news"><h3><a href={$node.url_alias|ezurl}>{attribute_view_gui ...
デザインの抽象・概念●    医療関係プロジェクトが多い    ●        歯科    ●        皮膚科    ●        眼科●    作業の効率を上げるためにできるだけ再利用し    たい
デザインの抽象・図              病院            抽象デザイン  皮膚科         眼科       歯科抽象デザイン      抽象デザイン   抽象デザイン 皮膚科 A       眼科 B     眼科 C
デザインの抽象・構造●   extension/abstract_medical/design    ●   abstract_hospital/        基本の病院テンプレート    ●   abstract_ophthalmologi...
デザインの抽象・メリット●    メリット    ●        横展開は楽    ●   マルチサイト・ SAAS に向いています    ●        テンプレートの数はかなり少ない    ●        上階層の抽象デザインに機能を...
まとめ
まとめ●    テンプレートオーバーライドは作業効率の最強    の味方です●    ただし、ファイル配置と設定関係は複雑です、    気をつけないと絶対落とし穴になります●    テンプレート設計はプロジェクトを作りながら    行うでなく、...
まとめ●    テンプレートオーバーライドは今回紹介した以    上の可能性があります●   例えば、 wysiwyg エディターで利用するタグ一    つ一つは条件オーバーライドできます●    カスタムモジュールではカスタムブロック条件  ...
ご清聴ありがとうございました!
質問タイム
Upcoming SlideShare
Loading in …5
×

eZ Publish 2012年8月勉強会 - テンプレートオーバーライド

1,387 views

Published on

今回の課題はテンプレートの第一回の「オーバーライドシステム」となります。

ベストプラクティス、実装方法とユースケースを含め、
eZ Publishの最強特徴であるテンプレートオーバーライドシステムを紹介いたします。

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

No Downloads
Views
Total views
1,387
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

eZ Publish 2012年8月勉強会 - テンプレートオーバーライド

  1. 1. eZ Publish 勉強会~ 8 月~ テンプレートオーバーライドシステム
  2. 2. ご挨拶● サニエ エリック● twitter/identica : @ericsagnes● サイト http://clina.jp/
  3. 3. eZ Publish CE 2012.6● バグフィックス● のみ
  4. 4. テンプレートその1テンプレートオーバーライド
  5. 5. 用語定義
  6. 6. デザイン● エクステンションの design/ フォルダー直下の フォルダー一個とその下のファイル一式● 標準デザインは eZ Publish のルートフォルダー 直下の design/ に入ります● 一つのデザインはテンプレート、 CSS 、 JS 、 コンテンツでない静的ファイル等を含めます
  7. 7. テンプレート● デザインフォルダー内に、ファイル拡張は .tpl のファイル● 中身は HTML 、 eZ Publish テンプレート言語 とカスタムテンプレート言語の組み合わせ● 2種類あります ● システムテンプレート ● ノードテンプレート
  8. 8. オーバーライド● 標準デザインのテンプレートの代わりに独自な テンプレートを利用する仕組み● 2種類があります ● 標準オーバーライド ● 条件付きオーバーライド● テンプレート以外にもデザインの各コンテンツ をオーバーライドできます
  9. 9. ページ● ユーザが見る、 CMS の WEB ページ● 複数のテンプレートを組み合わせて作られてい ます● ノードを見る場合は必ず「 full 」ビューモード が利用されます
  10. 10. テンプレートオーバーライド 可能性
  11. 11. オーバーライドの可能性● テンプレートの粒度構造と管理● テンプレートを複数サイトアクセスで利用● テンプレート及びデザインの優先順位● すべてのテンプレートのオーバーライド● JSON 、 XML などのコンテンツ特別バージョ ン
  12. 12. オーバーライドの可能性● テンプレートを他プロジェクトで簡単に再利用● テンプレート及びデザインの抽象化● 開発スピードと効率を究極に上げる
  13. 13. オーバーライドシステム 紹介
  14. 14. 基本システム● 一つのページは複数のテンプレートを利用します● 必要なテンプレートだけをオーバーライドします● 標準の standard デザインはすべての標準テンプ レートを提供します● 同じテンプレートは複数なデザインで存在できます● 一つのページは複数のデザインを利用します
  15. 15. 基本システム● デザイン毎にテンプレートセットを管理します● 一つのエクステンションは複数のデザインを含 む事ができます● メインなテンプレートは pagelayout.tpl● オーバーライドシステムは二種類あります ● 標準オーバーライド ● 条件付きオーバーライド
  16. 16. システムテンプレート ノードテンプレート● CMS の機能を利用する場合はシステムテンプ レートが利用されます 例: user/login => user/login.tpl content/edit => content/edit.tpl モジュール / ビュー =>  モジュール / ビュー .tpl● コンテンツ閲覧の場合はノードテンプレートが 利用されます 例: company/about => node/view/full.tpl news/2012 => node/view/full.tpl
  17. 17. テンプレート組み合わせ図pagelayout.tpl メインナビゲーション ノードテンプレート又は システムテンプレート フッター
  18. 18. ページで利用されるテンプレート● ページで利用されるテンプレートを確認する場 合はデバッグモードを有効にします● デバッグとテンプレートデバッグを有効にした 場合はページの下利用されたテンプレートが表 示されます● 必ず pagelayout.tpl とシステム又はノードテン プレートは要求されます
  19. 19. ページで利用されるテンプレート
  20. 20. 標準オーバーライド● 要求されるテンプレートをカスタムデザインで 読み込む仕組み● テンプレートはカスタムデザインの templates フォルダーに入ります● テンプレート名は同じです 例: pagelayout.tpl extension/ エクステンション /design/ デザイン /templates/pagelayout.tpl
  21. 21. テンプレート抽出の仕組み● site.ini で設定されたデザインリストの順にテン プレートの存在を確認します● テンプレートはデザインに存在する場合、利用 されます● テンプレートはデザインに存在しない場合、次 のデザインを確認します● どのデザインに見つからない場合は standard デザインが利用されます
  22. 22. テンプレート抽出の仕組み・基本 有効デザインリストpagelayout.tpl extension/myext/design/design3/ design1 templates/pagelayout.tpl design2 design3 ... standard
  23. 23. 問題点● コンテンツ閲覧の場合はノードテンプレートが 利用されます● ノードテンプレートは一つのみです node/view/full.tpl● 全てのコンテンツを同じテンプレートで実装す る?● そこに条件オーバーライド!
  24. 24. 条件オーバーライド● 特定な条件が満たされた場合に特定なテンプレートを 利用する仕組み● 条件オーバーライドは override.ini という設定ファイ ルに宣言します● 一つの条件オーバーライドは一つの設定ブロックで完 結します● 利用できる条件は要求されたテンプレートによって決 まります● どのテンプレートにどの条件が使えるのはドキュメン テーションで確認できます
  25. 25. 条件オーバーライドブロック ブロックタイトル [full_article] 要求テンプレート Source=node/view/full.tpl 利用テンプレート MatchFile=full/article.tplテンプレートフォルダー Subdir=templates テンプレート条件 Match[class_identifier]=articleこのオーバーライドブロックの意味は:「 node/view/full.tpl 」が要求されて、コンテンツのクラスは「 article 」の場合に「 templates 」フォルダーの下にある「 full/article.tpl 」テンプレートを利用します。従えて、この条件は利用された場合は下記の様なパスのテンプレートを読み込みます。extension/myext/design/mydesign/override/templates/full/article.tpl
  26. 26. オーバーライド・フォルダー● 条件オーバーライドで利用されるテンプレート はデザインの「 override 」フォルダーの下に入 ります 例: extension/myext/design/mydesign/override/templates/page/top.tpl● 標準オーバーライドの場合はデザインの 「 templates 」フォルダーに入ります 例: extension/myext/design/mydesign/templates/pagelayout.tpl
  27. 27. 条件オーバーライドブロックの特徴● ブロックタイトルは独特で設定する必要があり ます● ブロックに複数の条件を入れる事ができます、 その場合、条件は論理積で適用されます● 二つの条件を論理和で適用したい場合は各条件 を含めたブロックを作る事が必要
  28. 28. override.ini の特徴● override.ini のブロック順はとても大事です● override.ini のブロックは記載順で確認されま す、最初に条件が満たされたブロックは利用さ れます● そのため、 override.ini 内のブロックは詳しい 条件から一般的な条件の順で並ぶ事が必要とな ります
  29. 29. ビューモード● ノードテンプレートが要求された場合には必ず [node/view/full.tpl]● 標準として、 full ビューモードが利用されます● ただし、テンプレートから他のテンプレートを 呼び出す際 (node_view_gui オペーレーター ) にビューモードを自由に設定できます● そのために同じコンテンツは複数なビューモー ドで見れます
  30. 30. ビューモードの追加● ビューモードの追加はとても簡単にできます、 テンプレートから他コンテンツを表示する際 node_view_gui オペレーターに view パラメー ターを足します 例: {node_view_gui content_node=$node  view=headline}● この場合の要求されたテンプレートは node/view/headline.tpl となって、さら条件オー バーライドを設定できます
  31. 31. 注意点とベストプラクティス
  32. 32. 注意点● eZ Publish の柔軟性でもありますが、設定ファ イル、テンプレートファイル等は複数な場所に 散らかっています● 特に設定ファイルは場所によって利用順番は決 まりますので要注意● 混乱する場合 ● サイトアクセス毎で適用される設定は管理画面で確 認できます ● 利用されるテンプレートはデバッグで確認できます
  33. 33. ベストプラクティス:鉄則● eZ Publish の標準テンプレートは絶対変更しま せん● 必ずデザインエクステンションを作って、カス タムデザインを作ります● 標準テンプレートの微調整したい場合は、その テンプレートをカスタムデザインにコピーし て、微調整をします
  34. 34. ベストプラクティス● 条件オーバーライドの「 MatchFile 」は条件、 ビューモード、属性等でフォルダーを作った方 が管理しやすい ● override/ – page/ ページ名 .tpl 特定なページのテンプレート 例 : page/top.tpl – クラス名 /view/ ビューモード名 .tpl ビューモードのテンプレート 例 :article/view/list.tpl – クラス名 /layout/ レイアウト名 .tpl レイアウトのテンプレート 例 :article/layout/rss.tpl – クラス名 /attribute/ 属性名 .tpl 属性テンプレート 例 :article/attribute/title.tpl
  35. 35. テンプレートオーバーライド ユースケース
  36. 36. 多ビューモードで簡単に ニュース一覧・概念● ニュース一覧リストを下記のようにしたい ● 最新のニュースはタイトル、画像と概要全文 ● 次の 4 ニュースはタイトルと概要全文 ● その次のニュースはタイトルのみです● ビューモードは3つ利用します: ● headline ● detailed ● line
  37. 37. 多ビューモードで簡単に ニュース一覧・テンプレートニュース一覧テンプレート{foreach $news_item in $index => $news_list max 10} {if lt($index,1)} {$node_view_gui content_node=$news_item view=headline} {elseif lt($index,5)} {$node_view_gui content_node=$news_item view=detailed} {else} {$node_view_gui content_node=$news_item view=line} {/if}{/foreach}
  38. 38. 多ビューモードで簡単に ニュース一覧・テンプレートheadline テンプレート<div class="news"><h3><a href={$node.url_alias|ezurl}>{attribute_view_gui attribute=$node.data_map.title}</a></h3><p>{attribute_view_gui attribute=$node.data_map.photo image_class=thumbnail}{attribute_view_gui attribute=$node.data_map.short_text}</p></div>detailed テンプレート<div class="news"><h3><a href={$node.url_alias|ezurl}>{attribute_view_gui attribute=$node.data_map.title}</a></h3><p>{attribute_view_gui attribute=$node.data_map.short_text}</p></div>line テンプレート<div class="news"><p><a href={$node.url_alias|ezurl}>{attribute_view_gui attribute=$node.data_map.title}</a></p></div>
  39. 39. デザインの抽象・概念● 医療関係プロジェクトが多い ● 歯科 ● 皮膚科 ● 眼科● 作業の効率を上げるためにできるだけ再利用し たい
  40. 40. デザインの抽象・図 病院 抽象デザイン 皮膚科 眼科 歯科抽象デザイン 抽象デザイン 抽象デザイン 皮膚科 A 眼科 B 眼科 C
  41. 41. デザインの抽象・構造● extension/abstract_medical/design ● abstract_hospital/ 基本の病院テンプレート ● abstract_ophthalmologist/ 眼科の一般テンプレート ● abstract_dermatologist/ 皮膚科の一般テンプレート ● abstract_dentist/ ● 歯科の一般テンプレート● extension/dermatologist_a/design 皮膚科 A 特定の画像やテンプレート
  42. 42. デザインの抽象・メリット● メリット ● 横展開は楽 ● マルチサイト・ SAAS に向いています ● テンプレートの数はかなり少ない ● 上階層の抽象デザインに機能を追加した場合、下階 層もすぐ利用できます● 注意点 ● override.ini の管理はデザインほど柔軟でないこと
  43. 43. まとめ
  44. 44. まとめ● テンプレートオーバーライドは作業効率の最強 の味方です● ただし、ファイル配置と設定関係は複雑です、 気をつけないと絶対落とし穴になります● テンプレート設計はプロジェクトを作りながら 行うでなく、データベース設計と同様に事前に 心掛けて行うべき● 抽象化はできるだけ行うべき● 抽象化デザインを準備すれば、横展開は楽
  45. 45. まとめ● テンプレートオーバーライドは今回紹介した以 上の可能性があります● 例えば、 wysiwyg エディターで利用するタグ一 つ一つは条件オーバーライドできます● カスタムモジュールではカスタムブロック条件 も簡単に足せます● 抽象デザインとカスタムテンプレートオペレー ターの組み合わせで自分だけの eZ Publish が作 れます
  46. 46. ご清聴ありがとうございました!
  47. 47. 質問タイム

×