eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,135 views

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

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

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

Statistics

Views

Total Views
1,135
Views on SlideShare
1,135
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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