Embed Size (px)
DESCRIPTION
eZ Publishのテンプレート言語の紹介
Citation preview
eZ Publish 勉強会～ 9 月～
テンプレート言語
ご挨拶
● サニエ エリック● twitter/identica : @ericsagnes● サイト http://clina.jp/
eZ Publish CE 2012.8
● 2012.7 がなかったため、変更が多く● eZ Publish 5 に向けてコードの修正はメインでした
eZ Publish 5
● 2012.9 は eZ Publish の初めてリリースとなる● メージャーバージョンなので、多くの機能が変わります● Symfony 2 ベースになります● テンプレートエンジンは twig になります
テンプレート言語
用語定義
デザイン
● エクステンションの design/ フォルダー直下のフォルダー一個とその下のファイル一式
● 標準デザインは eZ Publish のルートフォルダー直下の design/ に入ります
● 一つのデザインはテンプレート、 CSS 、 JS 、コンテンツでない静的ファイル等を含めます
テンプレート
● デザインフォルダー内に、ファイル拡張は .tplのファイル
● 中身は HTML 、 eZ Publish テンプレート言語とカスタムテンプレート言語の組み合わせ
● ２種類あります● システムテンプレート● ノードテンプレート
オーバーライド
● 標準デザインのテンプレートの代わりに独自なテンプレートを利用する仕組み
● ２種類があります● 標準オーバーライド● 条件付きオーバーライド
● テンプレート以外にもデザインの各コンテンツをオーバーライドできます
ページ
● ユーザが見る、 CMS の WEB ページ● 複数のテンプレートを組み合わせて作られています
● ノードを見る場合は必ず「 full 」ビューモードが利用されます
テンプレート言語
● HTML と eZ Publish 独自のコードが使える言語● smarty によくにています● eZ Publish のコードは波括弧 {} に入ります● オペレーター、ファンクション、ブロックを利用できます
● 独自オペレーターで拡張できます
テンプレート変数
● テンプレートで利用できる変数● 「 $ 」で始まる● ２種類あります
● モジュールが提供する変数$node など
● 独自で作る変数
テンプレートオペーレーター
● テンプレート内でロジックを実行できる特別なキーワード
● 基本的はインプットに対してアウトプットを生成する{10|inc()} => 11
● 「 | 」で連続できる{10|inc()|dec()} => 10
● PHP で独自のオペレーターが作れる
テンプレートブロック
● テンプレート内でロジックブロックを実行できる特別なキーワード
● 主に● 条件ブロック {if}{elsif}{else}{/if}● ループ {foreach}{/foreach}
● 閉じタグが必ず付く {/tag}
テンプレートファンクション
● テンプレート内でロジックを実行できる特別なキーワード
● オペレーターとの違いはインプットをとらない事{fetch} など
● 一般的は独自ファンクションのを作らない
テンプレート言語
MVC と eZ Publish
● eZ Publish は MVC デザインパータンを利用しています● モデル（ M ）はコンテンツクラス● コントローラ（ C ）はモジュール・ビュー● ビュー（ V ）はテンプレート
● ただし、 eZ Publish の場合はコントローラを変更できないため、ビューにコントローラ的なロジックが入ります
変数
テンプレート変数● ２種類あります
● eZ （モジュール）が提供する変数● 独自で作る変数
● 変数には複数な種類があります● 数字 {def $var = 1234}● 文字 {def $var = “ 変数” }● ブーリアン {def $var = true()}● 配列 {def $var = array('a','b','c')}● ハッシュ {def $ var = hash('name', 'bob', 'age', 24)}● オブジェクト（テンプレートでは作れない）
テンプレート変数
● 変数に関わる主なファンクション● {def} で変数を作る {def $a = 1}● {set} で変数の値を変更する {set $a = 2}● {undef} で変数を破棄する
● 注意● 既に存在する変数に {def} をするとエラーが出ます● {undef} はテンプレートの終わりに自動的にされます● {def} で作られてない変数に {set} をかけるとエラーが出ます
テンプレート変数
{def $weather = " 晴れ "}<p> 本日の天気は {$weather}</p>{set $weather = " 雨 "}<p> 明日の天気は {$weather}</p>{undef}
文字列
● 設定の際に「””」又は「 '' 」で囲まれた変数は文字列として扱われる
{def $weather = " 晴れ "}<p> 今日の天気は {$weather}</p>{set $weather = " 雨 "}<p> 明日の天気は {$weather}</p>{undef}
文字列 代表的オペレーター
● concat() 複数の文字列を合体する{concat(' 東京都 ',' 新宿区 ')} => 東京都新宿区
● contains() 文字列が含まれてるを確認する{' 東京都新宿区 '|contains(' 東京都 ')} => true
● explode() 文字列を配列に分散する{' 青、赤、緑 '|explode(' 、 ')} => [' 青 ',' 赤 ',' 緑 ']
● wash() HTML にセーフ文字列を戻す{'<p> テスト <p>'|wash} => '<p> テスト <p>'
配列
● 配列は {array( 値 )} で作れる● 配列の項目は「 [ 数 ] 」と「 . 数」でアクセスできる
{def $fruits = array(' りんご ', ' バナナ ', ' みかん ')}{$fruits.0} => ' りんご '{$fruits[1]} => ' バナナ '{set $fruits = $fruits|replace(0,1,' 桃 ')}{$fruits} => [' 桃 ', ' バナナ ', ' みかん ']
配列 代表的オペレーター● append() 配列に項目を追加
{array('a','b')|append('c','d')} => ['a','b','c','d']● contains() 配列の中身の確認
{array('a', 'b')|contains('a')} => true● implode() 配列を文字列に合体させる
{array('a','b')|implode('&')} => 'a&b'● merge() 二つの配列を合体する
{array('a','b')|merge(array('c','d'))} => ['a','b','c','d']● reverse() 配列を逆の順番にする
{array('a','b','c')|reverse()} => ['c','b','a']● count() 配列のサイズを戻します
{array('a', 'b', 'c')|count} => 3
ハッシュ
● 特別な配列、キーとバリューを結びます● 配列と同じオペレーターを利用できます
{def $user = hash('name', 'bob', 'age', 24)}{$user['name']} => 'bob'{$user.age} => 24{set $user = $user|merge(hash('id', 'bob24'))}{$user['id']} => 'bob24'
数字
● 数字をする {def $a = 1}● フロート数字 {def $a = 3.14159}
数字 代表的オペレーター● ceil() floor() round() 少数をなくす
{3.1415|ceil()} => 4{3.1415|floor()} => 3{3.1415|round} => 3
● inc() dec() 1 を足す・引く{1|inc()} => 2{2|dec()} => 1
● sum() sub() mul() div() 計算をする{2|sum(3,4)} => 9{2|sub(1)} => 1{2|mul(10)} => 20{10|div(5)} => 2
数字 代表的オペレーター
● gt() lt() ge() le() eq() 比較オペーレーター● gt() greater than >
{2|gt(1)} => true()● lt() lesser than <
{2|lt(1)} => false()● ge() greater or equal >=
{2|ge(2)} => true()● le() lesser or equal <=
{2|le(2.1)} => true()● eq() equal =
{2|eq(2)} = true
ブーリアン
● true() か false オペーレーターで設定{def $a = true()}
● 注意：数字の 0 と空文字列 '' は false() として扱われます
$node
$node
● ビューテンプレートで利用できる● [eZContentObjectTreeNode] のインスタンス● 現ノードの情報を幅広くもっています● $node の情報を確認したい場合は
{$node|attribute('show',1)}
$node 代表的な変数
● $node.parent – 親ノード [eZContentObjectTreeNode]
● $node.children 子ノード [ 配列 ]
● $node.data_map ノードの属性 [ 配列 ]
● $node.url_alias ノードの相対 URL[ 文字列 ]
● $node.name ノードの名前● $node.sort_array 子ノードのソート順● $node.object ノードの元オブジェクト
$node 注意
● 「 . 」で結ぶサブ変数はデフォルトで生成されていない物もあります、必要な時にモジュールが生成します
● そのために「 .children 」のような変数はデータベースにリクエストを増やします
● 「 .children[0].children[1].children 」のような書き方はパフォーマンスに影響をします
● そういう場合はピンポイントで fetch したほうがパフォーマンスあがります
一般オペレーター
URL 関係
● ezurl() url を整理する（サイトアクセスなど）<a href={$node.url_alias|ezurl()}> リンク </a>
● ezimage() 画像の URL を生成する（デザインの imagesフォルダーを利用する）<img src={'image.jpg'|ezimage()} />
● ezdesign() デザインリソースの URL を生成する（デザインフォルダーを利用する）@import url({'stylesheets/style.css'|ezdesign('no')})
テンプレートブロック
if – elseif – else
{if eq($word, ' しりとり ')}<p> りんご </p>{elseif eq($word,'ゴリラ ')}<p> ラムネ </p>{else}<p>。。。 </p>{/if}
ループ● ループ形式は複数ありますが、ほとんどのケースに使われるのは「 foreach 」です
● 配列・ハッシュに使えます● 基本の書き方は
{foreach $array as $item }<p>{$item}</p>{/foreach}
● キー付ける事はできます（配列の場合は位置の数字となる）{foreach $array as $key => $item }<p>{$key} {$item}</p>{/foreach}
foreach オプション
● reverse – 配列を逆順でループする{foreach $array as $item reverse}
● max – 最大のループ数{foreach $array as $item max = 3}
● offset – ループのスタート時点{foreach $array as $item offset = 3}
● sequence – ループする追加配列（ css 定義に便利）{foreach $array as $item sequence array('light', 'dark') as $style}
foreach – 特別キーワード
● {foreach} ループ内で特別なキーワードが使えます
● {delimiter}{/delimiter} ループの間に入れるブロク{delimiter}<br />{delimiter}
● {skip} 次のイテレーションに行きます、{delimiter} を利用しない
● {continue} 次のイテレーションに行きます、{delimiter} を利用する
● {breaks} 次のイテレーションを実行せず、{foreach} から出る
テンプレートファンクション
fetch ファンクション
● fetch ファンクションでモデルにクエリーを送れます
● fetch ファンクションはモジュール毎に複数設定されています
● 公式ドキュメンテーションにドキュメントされています
● 書き方は{fetch(' モジュール ',' ファンクション ', [ パラメーター ])}
代表的な fetch ファンクション
● ほとんどのプロジェクトでは 3 つの fetch で対応できます
● 一つのノードをフェッチfetch('content', 'node', hash( 'node_id', 2 ))
● 複数のノードをフェッチfetch('content','list', hash('parent_node_id', 2))
● 現ユーザをフェッチfetch('user','current_user')
fetch – content, node
● 単独のノードをフェッチする● ノードオブジェクト [eZContentObjectTreeNode] を戻す● 書き方
{def $a = fetch('content', 'node', hash('node_id', ノード ID
))}● 追加パラメーター
● 'languagecode' 特定な言語でコンテンツをフェチする
fetch – content, list● 複数のノードをフェッチする● ノードオブジェクト [eZContentObjectTreeNode]の配列を戻す● 書き方
{def $a = fetch('content', 'list', hash('parent_node_id', ノード ID
))}● 代表的な追加パラメーター
● 'sort_by' ソート順の設定 [配列 ] ● 'limit' 戻すノードの数 [数字 ]● 'offset' 結果のスタート位置 [数字 ]● 'class_filter_type' クラス絞り込みロジック ['include'|'exclude']● 'class_filter_array' クラスの絞り込み [クラスの配列 ]● 'attribute_filter' 属性の値で結果を絞り込む
fetch – content, list トリック● 簡単なページネーション実装
{def $a = fetch('content', 'list', hash('parent_node_id', ノード ID,'offset', mul($page_nb|dec(), $items_per_page),'limit', $items_per_page
))}
● フォルダークラスだけのノードをフェッチ{def $a = fetch('content', 'list', hash(
'parent_node_id', ノード ID,'class_filter_type', 'include','class_filter_array', array('folder')
))}
fetch – user, current_user
● ログインユーザをフェッチします● [eZUser] を戻す● 書き方
{def $user = fetch('user', 'current_user')}● {$user.contentobject.main_node} でユーザの
eZContentObjectTreeNode を選択することができます
テンプレート呼び出しファンクション
テンプレート呼び出しファンクション
● テンプレート内からテンプレートオーバーライドルールに従って、テンプレートを呼び出す事を可能にするファンクション
● 最も使われますのは下記の二つ● ノードテンプレートを呼び出す
{node_view_gui}● 属性テンプレートを呼び出す
{attribute_view_gui}
node_view_gui● ノードをオーバーライドルールにマッチしたテンプレートで表示する● パラメター
● content_node 表示したいノードオブジェクト [eZContentObjectTreeNode]content_node = $some_node
● view ノードを表示するように利用するビューモード [文字列 ]view = 'full'
● 独自パラメーター （任意）my_param = 'あいうえお '
● 例{node_view_gui content_node = $some_node view = full}{node_view_gui content_node = $some_node view = full my_param = ' あいうえお'}
node_view_gui
● 例、現ノードの子ノードをビューモードで表示する
{foreach $node.children as $children}{node_view_gui content_node=$children view='line'}{/foreach}
attribute_view_gui
● 属性をオーバーライドルールにマッチしたテンプレートで表示する
● パラメター● attribute 表示したい属性オブジェクト [eZContentObjectAttribute]
attribute = $node.data_map.title● 独自パラメーター （任意）
my_param = ' あいうえお '
● 例{attribute_view_gui attribute = $node.data_map.image}{attribute_view_gui attribute = $node.data_map.image image_class='thumbnail'}
attribute_view_gui
● 例、現ノードの属性を全て適切なテンプレートで表示する
{foreach $node.data_map as $attribute}{attribute_view_gui attribute = $attribute}{/foreach}
テンプレートファンクション
デバッグ● 配列、ハッシュやオブジェクトの中身を確認したい場合は
attribute() オペレーターを利用します
● パラメーターを２渡す事ができます
● attribute( 値フラグ ,階層 )● 「値フラグ」を 'show' にすると値が表示されます● 「階層」はどの階層まで表示するのを決める、デフォルトは２、１にするのはわかりやすい
● おすすめな使い方は {$var|attribute('show',1)}
カスタムオペレーター
カスタムオペレーター
● テンプレートに多数のロジックを入れると次の問題が発生します● デバッグは複雑になります● パーフォーマンスに影響が出ます
● さらにテンプレート言語でできる事は限られています
● 一つの結果を出すために５行以上のロジックを書くと、カスタムオペレーターを書いたをがおすすめです
カスタムオペレーター
● カスタムオペーレーターはエクステンションに入る● PHP ベース● 管理画面の「システム設定」「アプリ開発ツール」で PHP ファイルのテンプレートを作れます
● PHP では直接 eZ Publish の API を利用できますhttp://pubsvn.ez.no/doxygen/trunk/html/index.html
● さらに、 eZComponents の API も使えます。グラフの生成やメールの送信・受信にお勧めです。http://ezcomponents.org/docs
ドキュメンテーション● テンプレート言語のメインなドキュメンテーションはリファレンスで確認できますhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/
● オペーレーターhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Templateoperators
● ファンクションhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Templatefunctions
● ブロックhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Templatecontrolstructures
● オブジェクトタイプhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Objects
● フェッチファンクションhttp://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Objects
質問タイム
