eZ Publish勉強会9月〜テンプレート言語〜

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 = " 晴れ "}
 本日の天気は {$weather}
{set $weather = " 雨 "}
 明日の天気は {$weather}
{undef}

文字列
● 設定の際に「””」又は「 '' 」で囲まれた変数
は文字列として扱われる

{def $weather = " 晴れ "}
 今日の天気は {$weather}
{set $weather = " 雨 "}
 明日の天気は {$weather}
{undef}

文字列代表的オペレーター
●
concat() 複数の文字列を合体する
{concat(' 東京都 ',' 新宿区 ')} => 東京都新宿区
●
contains() 文字列が含まれてるを確認する
{' 東京都新宿区 '|contains(' 東京都 ')} => true
● explode() 文字列を配列に分散する
{' 青、赤、緑 '|explode(' 、 ')} => [' 青 ',' 赤 ',' 緑 ']
●
wash() HTML にセーフ文字列を戻す
{' テスト '|wash} => ' テスト '

配列
● 配列は {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
●
ビューテンプレートで利用できる
● [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, ' しりとり ')}
 りんご 
{elseif eq($word,' ゴリラ ')}
 ラムネ 
{else}
 。。。 
{/if}

ループ
●
ループ形式は複数ありますが、ほとんどのケースに使われるのは
「 foreach 」です
●
配列・ハッシュに使えます
●
基本の書き方は
{foreach $array as $item }
{$item}
{/foreach}
●
キー付ける事はできます（配列の場合は位置の数字となる）
{foreach $array as $key => $item }
{$key} {$item}
{/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} {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 トリック
●
簡単なページネーション実装
'parent_node_id', ノード ID,
'offset', mul($page_nb|dec(), $items_per_page),
'limit', $items_per_page
))}
●
フォルダークラスだけのノードをフェッチ
'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/Templateope
rators
●
http://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Templatefun
ctions
●
ブロック
http://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Templatecont
rolstructures
●
オブジェクトタイプ
http://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Objects
●
フェッチファンクション

http://doc.ez.no/eZPublish/Technicalmanual/4.x/Reference/Objects

eZ Publish勉強会9月〜テンプレート言語〜

Recommandé

Recommandé

Contenu connexe

Similaire à eZ Publish勉強会9月〜テンプレート言語〜

Similaire à eZ Publish勉強会9月〜テンプレート言語〜 (20)

Plus de ericsagnes

Plus de ericsagnes (10)

Dernier

Dernier (9)

eZ Publish勉強会9月〜テンプレート言語〜