全てのスマートフォンブラウザと、Nintendo3DSで！
February 23, 2006
「Jemplate で JavaScript でもロジックとビューを分離する」に刺激されて、phpでやってみようかと思ったら、あまりにも簡単なことしか思いつかなくて、それってこういうこと？ってのを書いてみます。
でシンプルなウインドウマネージャを作ってみたのですが、naoyaさんが書かれている通り、JavaScriptで動的出力するHTML部分のコーディングが面倒だなぁと思っていたので、Jemplateなるものの変わりにSmartyを使ったらどうよ？ということで以下のような感じになりましたが・・・・
例：まず最もシンプルなHTML側のコードを書いてみる。
document.writeしてるのは、スクリプトタグから読み込まれるjsonオブジェクトの中にあるHTMLに該当します。
------------------------------------
＜script src="testSmt.php" type="text/javascript">＜/script>
と、
document.write(jsonTmpl.tmpl);
------------------------------------
scriptタグから読み込まれるphpのコード
smartyの出力をfetchして、jsonでエンコードしてJavaScriptの出力に変換してるだけです。
------------------------------------
require 'lib/smarty/Smarty.class.php';
require 'lib/JSON.php';
$json = new Services_JSON();
$tmpl = $smarty->fetch("dlg_edit_feed.tpl");
$arr = array();
$arr['tmpl'] = $tmpl;
$form = $json->encode($arr);
echo 'var jsonTmpl = ' . $form . ';'
------------------------------------
これで例えば、テンプレートファイルであるdig_edit.feed.tplに、こんな感じのHTMLを書いておけば、
------------------------------------
＜form ＞
フィードURL ＜input type = "text" size="20" ＞
＜input type ="button" name="" value="読み込む"＞＜br /＞
＜/form＞
------------------------------------
phpのアウトプットは、以下の通り。
var jsonTmpl = {"tmpl":"＜form >\r\n\u30d5\u30a3\u30fc\u30c9URL ＜input type = \"text\" size=\"40\" >\r\n＜input type =\"button\" name=\"\" value=\"\u8aad\u307f\u8fbc\u3080\">＜br \/>\r\n＜\/form>\r\n\r"};
この例で言えば、smartyテンプレートのHTMLがそのままdocument.writeによる画面に出力されます。
実際使う場合は、レイヤーのウインドウの中身とかにJavaScript側で動的出力するために好きに使ってくださいと言うことですね。
もちろんPHPですから、Ajaxで呼ばれたときに動的に出力を変えるのも簡単です。
・・・って、これだけで良いんですかね？（＾＾；
もしビューのデータを静的ファイルにしたければ、サーバサイドの出力をコピペして、HTMLに貼り付けてあげればそれでOKですね。Smartyは出力をキャッシュしてるからあえて静的ファイルに切り出すほどのことでもないかもしれませんが。
これでデータとビューはAjaxでJson形式で渡すことができるわけで、JavaScript上にはコントローラーとバリデーションだけを書いてあげれば良いってところでしょうか。
-------------------------------
朝起きて追記：
あぁ勘違い。違うか！
Jemplateのポイントは、クライアントサイドでTTの文法が使えるってことにポイントがあるのか。
あと一歩、先を考えなきゃいけないのね。お恥ずかしい。このエントリ、消そうかな。
--------------------------------
まぁでもデータ同期などを考えると、逐次「あちら側」で処理するのがWeb正しいモデルであり、Ajaxの限界なハズなので、ある程度は使えるな。クライアントサイドでバリバリ高速処理する場合はアレだけど。