テンプレートエンジンの必要性昔 (2000 年ごろ?) の典型的な PHP のコード : <?php // 処理?> <html> <body> <?php print("hello World!");?> </body> </html> 以下のような問題で衝突していた 1 一旦プログラムコードを

Size: px

Start display at page:

Download "テンプレートエンジンの必要性昔 (2000 年ごろ?) の典型的な PHP のコード : <?php // 処理?> <html> <body> <?php print("hello World!");?> </body> </html> 以下のような問題で衝突していた 1 一旦プログラムコードを"

しょうこしもね
6 years ago
Views:

1 デザイナーとプログラマーの共通言語 Smarty の導入と活用

2 テンプレートエンジンの必要性昔 (2000 年ごろ?) の典型的な PHP のコード : <?php // 処理?> <html> <body> <?php print("hello World!");?> </body> </html> 以下のような問題で衝突していた 1 一旦プログラムコードを埋め込んでしまうとデザイナーが HTML を修正できなくなる 2 プログラマーとデザイナーが同時に 1 つのファイルを修正して衝突してします 3 デザインの見栄えを修正したくてもプログラマーにお願いしないといけない

3 PHP をテンプレートエンジンにする古典的ですが今でもよく用いられますデザインとプログラムの分離は出来ていますし速度も速いというメリットがありますただしテンプレートエンジンと呼べるかは微妙です hoge.php <?php // プログラムコード require("hoge_template.php");?> hoge_template.php <?php // テンプレートコード?> <html> <body> <?=$var?> </body> </html>

4 PHP をテンプレートとして使うために PHP をテンプレートとして使うためには以下の構文が便利です変数を表示する <?=$var?> if 構文の別の書き方 <? if($aaa)?> true 時の処理 <? else;?> その他の処理 <? endif;?> for 構文の別の書き方 <? for ($i = 0; $i < 10; $i++):?> これは <?=$i?> 番目の処理です <? endfor;?> foreach 構文の別の書き方 <? foreach ($array as $key => $value):?> キー :<?=$key?> 値 :<?=$value?> <? endforeach;?>

5 テンプレートエンジンが生まれた背景それでもデザイナーにとってコードが読みづらいショートタグを使うのは望ましくない文書をフォーマットするという意味では使いづらいもう少しテンプレートを読み込んで処理することに主眼をおいたライブラリがあると良いのでは?

6 テンプレートエンジン登場そこでテンプレートエンジンを使うと以下のようなコードに変わります (Smarty の例 ) スクリプト側 (hoge.php) <?php require("common.php"); require("/path/to/libs/smarty.class.php"); $smarty = new Smarty(); $smarty->assign("var1", "Hello World"); $smarty->display("hoge.html");?> テンプレート側 (hoge.html) <html> <body> {$var1} </body> </html>

7 テンプレートを使った場合の作業フロー開発時共同作業デザイナーデザイン作成タグ打ち完成プログラマーロジック作成テンプレート埋め込み修正時デザイナー修正依頼テンプレート修正完了プログラマーロジック修正

8 なぜ Smarty? 同じような動作をするテンプレートエンジンは数多くありますが今回は Smarty に焦点を当てます 1 Smarty を使った事例が多い ( 一番メジャー開発歴も長い ) 2 そこそこ良くできている ( ただしハマる所は知っておく必要あり ) 3 日本語のドキュメントが多い ( 日本語マニュアル書籍も出ている )

9 テンプレートエンジンを使うメリットビューを分離できる HTML コードとも見やすくなる( はず ) 便利機能がある

10 使わないメリットやっぱり遅くなる最初のセットアップが大変コンパイルキャッシュ周りの知識が必要

11 特徴的な機能単にビューを分離するだけではなくいろいろな機能を持っています関数修飾子キャッシュブロックカスタマイズコンパイルキャッシュ等々

12 Smarty の動作の仕組み初回読み込み時テンプレートファイル PHP ファイル内次回以降 PHP ファイル内読み込みパースコンパイル保存コンパイルキャッシュファイル読み込み出力出力

13 Smarty のセットアップ 1. Smarty 本体をダウンロード ( 2. ディレクトリに展開 3. templates ディレクトリ templates c ディレクトリを作成 ( デフォルトはスクリプトと同階層 ) 4. templates c ディレクトリに Apache から書き込める権限を付与 5. require ("/path/to/lib/smarty.class.php"); 6. $smarty = new Smarty(); で Smarty オブジェクトを作成 Smarty を使うためのコード <?php require("/path/to/libs/smarty.class.php"); $smarty = new Smarty(); $smarty->assign("var1", "Hello World"); $smarty->display("hoge.html");?>

14 Smarty の使い方 1 インスタンス作成 2 変数のアサイン 3 出力 or 取得 PHP 側 (hoge.php) <?php $scalar = "Hello World"; $array = array ("a" => "A", "b" => "B"); require("libs/smarty.class.php"); $smarty = new Smarty(); $smarty->assign("scalar", $scalar); $smarty->assign("array", $array); $smarty->display("hoge.html");?> テンプレート側 (templates/hoge.html) 変数を表示する場合 :{$scalar} 配列を表示する場合 :{$array.a} {$array.b}

$Smarty の設定 $smarty オブジェクトのプロパティを修正して各種設定ができる設定の例 : // デバッグコンソールを出す ({debug} 関数でも可能 ) $smarty->debugging = true; // 各必須ディレクトリの場所の変更 $smarty->template_dir =$

15 Smarty の設定 $smarty オブジェクトのプロパティを修正して各種設定ができる設定の例 : // デバッグコンソールを出す ({debug} 関数でも可能 ) $smarty->debugging = true; // 各必須ディレクトリの場所の変更 $smarty->template_dir = "/path/to/template_dir"; $smarty->compile_dir = "/path/to/compile_dir"; // デリミタの変更 $smarty->left_delimiter = "{{"; $smarty->right_delimiter = "}}"; // コンパイルを強制する $smarty->force_compile = true;

16 Smarty 関数の使い方 PHP の関数とは別に Smarty 上で関数が利用できるこれによりビュー特有の処理を関数でまとめることができる他のファイルを読み込む場合 : {include file=" ファイル名 "} foreach を使う場合 : {foreach from=$array key=key item=item} キー :{$key} 値 :{$item} {/foreach} そのほかにもいくつかの関数がデフォルトで用意されているまた自作で関数を作ることも可能

17 Smarty 修飾子 (modifier) の使い方関数をより簡単にした形 Linux でいうパイプの役割をして表現するデータに合わせて表示形式を変更できる数値をフォーマットする場合 : {$value number_format} HTML エスケープを行う場合 (XSS 対策 ): {$value escape} また修飾子は重ねることが可能 : {$value escape nl2br} 引数を渡すことも可能 : {$value strip_tags substr:3}

18 自作関数の利用関数修飾子はカスタムで作ることができます作り方には 2 通りありますプラグインに保存する場合 : 1 プラグイン用ディレクトリを作成しそのディレクトリを plugins dir として指定する $smarty->plugins_dir = array("plugins", "my_plugins"); 2 smarty function 関数名とした関数作成し smarty.function. 関数名という名称でプラグイン用ディレクトリに保存する <?php function smarty_function_imagetag ($params, &$smarty) { $filename = $params["filename"]; list($width, $height, $type, $attr) = getimagesize($filename); return "<img src= "$filename " $attr />"; }?> 3 関数を使う {imagetag filename="image.png"}

19 キャッシュ初回読み込み時 PHP ファイル内テンプレートファイル読み込み出力次回以降 PHP ファイル内保存キャッシュ読み込み出力キャッシュ機能を有効にする $smarty->caching = true;

20 Tips 1 クロスサイトスクリプティング脆弱性を強化する assign メソッドを改良しデフォルトで HTML エスケープされた状態で assign する class MySmarty extends Smarty { function assign($varname, $value) { $parent->assign($varname, htmlspecialchars($value, ENT_QUOTES)); } } $smarty = new MySmarty(); 2 テンプレート変数を連想配列で 1 つにまとめる assign メソッドを必要回数分記述するよりは $template var 等の変数に連想配列形式でテンプレート変数を割り当てると便利 $template_var["var1"] = "Hello World"; $template_var["var2"] = "hogehoge"; $smarty->assign($template_var);

21 SmartyDWT Dreamweaver から Smarty を簡単に操作するためのプラグイン

Template Lite(http://templatelite.sourceforge.

22 Template Lite( 以前 Smarty Light と呼ばれていたテンプレートエンジンを引き継ぐ形で別の作者によって公開されているもの Smarty とほぼ同等の機能を備えている上 for や switch 関数などが追加されている

23 Simplate( Smarty の機能を PHP エクステンションの形で実現したもの必要最低限の機能しか有していないがとても高速に動作する変数のアサインデリミタの変更 Smarty Simplate 関数 {function var=val} 形式 { 関数名 ($var)} 形式修飾子ループ処理 section,foreach section,foreach キャッシュ ( キャッシュ ID 対応 ) ( 出力の保存のみ ) 動作速度

24 ベンチマーク対決 Smarty Simplate TemplateLite でどの程度速度が異なるのか?PHP で計測 PHP 側 (hoge.php) <?php $scalar = "Hello World"; $array = array ("a" => "A", "b" => "B", "c" => "C"); $smarty->assign("scalar", $scalar); $smarty->assign("array", $array); $smarty->display("hoge.html");?> テンプレート側 (templates/hoge.html) スカラー値 :{$scalar}<br> 配列 :{$array.a} {$array.b} {$array.c} <ul> {foreach from=$array item=a key=k} <li> キー :{$k} 値 :{$a}</li> {/foreach} </ul>

計測結果 ab n 1000 c 10 or 20 http://url 圧倒的にSimplateが高速これは

25 計測結果 ab n 1000 c 10 or 20 圧倒的にSimplateが高速これは SimplateがPHPエクステンションとして動作するため処理速度が速くまた機能実装もシンプルであることが大きな要因だと思います

26 ご清聴誠にありがとうございました

1.MVC モデル MVC モデルとは Model View Controller ( モデルビューコントローラ ) を意味しますこれは中 ~ 大規模システムを開発する場合に処理の中核を担う Model 表示出力を司る View 入力を受け取ってその内容に応じて View と Model

1.MVC モデル MVC モデルとは Model View Controller ( モデルビューコントローラ ) を意味しますこれは中 ~ 大規模システムを開発する場合に処理の中核を担う Model 表示出力を司る View 入力を受け取ってその内容に応じて View と Model PHP マニュアルプログラミング基礎 for Windows, Linux Smarty 編 1.MVC モデル 2.Smarty とは? 3. インストール template_dir compile_dir config_dir cache_dir 4.Smarty の基本 assign display escape XSS 5. ループ処理と配列 foreach 6. テンプレートの動的切り替え

テンプレートエンジンの必要性 昔 (2000 年ごろ?) の典型的な PHP のコード : <?php // 処理?> <html> <body> <?php print("hello World!");?> </body> </html> 以下のような問題で衝突していた 1 一旦プログラムコードを

テンプレートエンジンの必要性昔 (2000 年ごろ?) の典型的な PHP のコード : <?php // 処理?> <html> <body> <?php print("hello World!");?> </body> </html> 以下のような問題で衝突していた 1 一旦プログラムコードを