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

1. eZ Publish 勉強会～ 8 月～
テンプレート
オーバーライドシステム

2. ご挨拶
●
サニエ エリック
● twitter/identica : @ericsagnes
● サイト http://clina.jp/

3. eZ Publish CE 2012.6
●
バグフィックス
●
のみ

4. テンプレートその１
テンプレートオーバーライド

5. 用語定義

6. デザイン
● エクステンションの design/ フォルダー直下の
フォルダー一個とその下のファイル一式
● 標準デザインは eZ Publish のルートフォルダー
直下の design/ に入ります
● 一つのデザインはテンプレート、 CSS 、 JS 、
コンテンツでない静的ファイル等を含めます

7. テンプレート
● デザインフォルダー内に、ファイル拡張は .tpl
のファイル
● 中身は HTML 、 eZ Publish テンプレート言語
とカスタムテンプレート言語の組み合わせ
●
２種類あります
●
システムテンプレート
●
ノードテンプレート

8. オーバーライド
●
標準デザインのテンプレートの代わりに独自な
テンプレートを利用する仕組み
●
２種類があります
●
標準オーバーライド
●
条件付きオーバーライド
●
テンプレート以外にもデザインの各コンテンツ
をオーバーライドできます

9. ページ
● ユーザが見る、 CMS の WEB ページ
●
複数のテンプレートを組み合わせて作られてい
ます
● ノードを見る場合は必ず「 full 」ビューモード
が利用されます

10. テンプレートオーバーライド
可能性

11. オーバーライドの可能性
●
テンプレートの粒度構造と管理
●
テンプレートを複数サイトアクセスで利用
●
テンプレート及びデザインの優先順位
●
すべてのテンプレートのオーバーライド
● JSON 、 XML などのコンテンツ特別バージョ
ン

12. オーバーライドの可能性
●
テンプレートを他プロジェクトで簡単に再利用
●
テンプレート及びデザインの抽象化
●
開発スピードと効率を究極に上げる

13. オーバーライドシステム
紹介

14. 基本システム
●
一つのページは複数のテンプレートを利用します
●
必要なテンプレートだけをオーバーライドします
●
標準の standard デザインはすべての標準テンプ
レートを提供します
●
同じテンプレートは複数なデザインで存在できます
●
一つのページは複数のデザインを利用します

15. 基本システム
●
デザイン毎にテンプレートセットを管理します
●
一つのエクステンションは複数のデザインを含
む事ができます
● メインなテンプレートは pagelayout.tpl
●
オーバーライドシステムは二種類あります
●
標準オーバーライド
●
条件付きオーバーライド

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. テンプレート組み合わせ図
pagelayout.tpl
メインナビゲーション
ノードテンプレート又は
システムテンプレート
フッター

18. ページで利用されるテンプレート
●
ページで利用されるテンプレートを確認する場
合はデバッグモードを有効にします
●
デバッグとテンプレートデバッグを有効にした
場合はページの下利用されたテンプレートが表
示されます
● 必ず pagelayout.tpl とシステム又はノードテン
プレートは要求されます

19. ページで利用されるテンプレート

20. 標準オーバーライド
●
要求されるテンプレートをカスタムデザインで
読み込む仕組み
● テンプレートはカスタムデザインの templates
フォルダーに入ります
●
テンプレート名は同じです
例： pagelayout.tpl
extension/ エクステンション /design/ デザイン /templates/pagelayout.tpl

21. テンプレート抽出の仕組み
● site.ini で設定されたデザインリストの順にテン
プレートの存在を確認します
●
テンプレートはデザインに存在する場合、利用
されます
●
テンプレートはデザインに存在しない場合、次
のデザインを確認します
● どのデザインに見つからない場合は standard
デザインが利用されます

22. テンプレート抽出の仕組み・基本
有効デザインリスト
pagelayout.tpl
extension/myext/design/design3/
design1 templates/pagelayout.tpl
design2
design3
...
standard

23. 問題点
●
コンテンツ閲覧の場合はノードテンプレートが
利用されます
●
ノードテンプレートは一つのみです
node/view/full.tpl
●
全てのコンテンツを同じテンプレートで実装す
る？
●
そこに条件オーバーライド！

24. 条件オーバーライド
●
特定な条件が満たされた場合に特定なテンプレートを
利用する仕組み
● 条件オーバーライドは override.ini という設定ファイ
ルに宣言します
●
一つの条件オーバーライドは一つの設定ブロックで完
結します
●
利用できる条件は要求されたテンプレートによって決
まります
●
どのテンプレートにどの条件が使えるのはドキュメン
テーションで確認できます

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. オーバーライド・フォルダー
●
条件オーバーライドで利用されるテンプレート
はデザインの「 override 」フォルダーの下に入
ります
例： extension/myext/design/mydesign/override/templates/page/top.tpl
●
標準オーバーライドの場合はデザインの
「 templates 」フォルダーに入ります
例： extension/myext/design/mydesign/templates/pagelayout.tpl

27. 条件オーバーライドブロックの特徴
●
ブロックタイトルは独特で設定する必要があり
ます
●
ブロックに複数の条件を入れる事ができます、
その場合、条件は論理積で適用されます
●
二つの条件を論理和で適用したい場合は各条件
を含めたブロックを作る事が必要

28. override.ini の特徴
● override.ini のブロック順はとても大事です
● override.ini のブロックは記載順で確認されま
す、最初に条件が満たされたブロックは利用さ
れます
● そのため、 override.ini 内のブロックは詳しい
条件から一般的な条件の順で並ぶ事が必要とな
ります

29. ビューモード
●
ノードテンプレートが要求された場合には必ず
[node/view/full.tpl]
● 標準として、 full ビューモードが利用されます
●
ただし、テンプレートから他のテンプレートを
呼び出す際 (node_view_gui オペーレーター )
にビューモードを自由に設定できます
●
そのために同じコンテンツは複数なビューモー
ドで見れます

30. ビューモードの追加
●
ビューモードの追加はとても簡単にできます、
テンプレートから他コンテンツを表示する際
node_view_gui オペレーターに view パラメー
ターを足します
例： {node_view_gui content_node=$node
view=headline}
●
この場合の要求されたテンプレートは
node/view/headline.tpl となって、さら条件オー
バーライドを設定できます

31. 注意点と
ベストプラクティス

32. 注意点
● eZ Publish の柔軟性でもありますが、設定ファ
イル、テンプレートファイル等は複数な場所に
散らかっています
●
特に設定ファイルは場所によって利用順番は決
まりますので要注意
●
混乱する場合
●
サイトアクセス毎で適用される設定は管理画面で確
認できます
●
利用されるテンプレートはデバッグで確認できます

33. ベストプラクティス：鉄則
● eZ Publish の標準テンプレートは絶対変更しま
せん
●
必ずデザインエクステンションを作って、カス
タムデザインを作ります
●
標準テンプレートの微調整したい場合は、その
テンプレートをカスタムデザインにコピーし
て、微調整をします

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. テンプレートオーバーライド
ユースケース

36. 多ビューモードで簡単に
ニュース一覧・概念
●
ニュース一覧リストを下記のようにしたい
●
最新のニュースはタイトル、画像と概要全文
● 次の 4 ニュースはタイトルと概要全文
●
その次のニュースはタイトルのみです
●
ビューモードは３つ利用します：
● headline
● detailed
● line

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. 多ビューモードで簡単に
ニュース一覧・テンプレート
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. デザインの抽象・概念
●
医療関係プロジェクトが多い
●
歯科
●
皮膚科
●
眼科
●
作業の効率を上げるためにできるだけ再利用し
たい

40. デザインの抽象・図
病院
抽象デザイン
皮膚科 眼科 歯科
抽象デザイン 抽象デザイン 抽象デザイン
皮膚科 A 眼科 B 眼科 C

41. デザインの抽象・構造
● extension/abstract_medical/design
● abstract_hospital/
基本の病院テンプレート
● abstract_ophthalmologist/
眼科の一般テンプレート
● abstract_dermatologist/
皮膚科の一般テンプレート
● abstract_dentist/
●
歯科の一般テンプレート
● extension/dermatologist_a/design
皮膚科 A 特定の画像やテンプレート

42. デザインの抽象・メリット
●
メリット
●
横展開は楽
● マルチサイト・ SAAS に向いています
●
テンプレートの数はかなり少ない
●
上階層の抽象デザインに機能を追加した場合、下階
層もすぐ利用できます
●
注意点
● override.ini の管理はデザインほど柔軟でないこと

43. まとめ

44. まとめ
●
テンプレートオーバーライドは作業効率の最強
の味方です
●
ただし、ファイル配置と設定関係は複雑です、
気をつけないと絶対落とし穴になります
●
テンプレート設計はプロジェクトを作りながら
行うでなく、データベース設計と同様に事前に
心掛けて行うべき
●
抽象化はできるだけ行うべき
●
抽象化デザインを準備すれば、横展開は楽

45. まとめ
●
テンプレートオーバーライドは今回紹介した以
上の可能性があります
● 例えば、 wysiwyg エディターで利用するタグ一
つ一つは条件オーバーライドできます
●
カスタムモジュールではカスタムブロック条件
も簡単に足せます
●
抽象デザインとカスタムテンプレートオペレー
ターの組み合わせで自分だけの eZ Publish が作
れます

46. ご清聴ありがとうございました！

47. 質問タイム