nazonoDiary(日々うろおぼえ記)

2005-01-06 木

パーツ

実装力もないのに相も変わらずHTMLテンプレートについてずっと考えているのだけれど。

パーツ化は普通 include でやってしまう。

;;;テンプレートを使うPHP
$template =& new Template("base.html");
$model["header"]="condition1.html";

;;;テンプレート本体HTML(base.html)
<html>
 <body>
  <div id="header">{include file=$header}</div>
  <div id="main">いろいろ</div>
 </body>
</html>

;;;パーツ側HTML(condition1.html)
<ul>
  <li><a href="hoge">hoge</a></li>
  <li><a href="hoge">hoge</a></li>
</ul>

みたいなかんじ。だけれど、それだと部品の方が「完全なHTML」では無くなってしまう。完全でないというのはつまり、<html>とかをつけないといけないのに、つけるとテンプレート展開した後に変になってしまう、ということだ。

「完全なHTML」でないと何が困るのか、というとまあ、Dreamweaverなんかで部品部分を非プログラマーに作らせる場合に困る、のである。またスタイルシートとか利用している場合に、プレビューできなくて困るのもある。

そこで、パーツ取りされるHTMLの方もID指定できるようになるとうれしいのではないだろうか？　パーツHTMLもファイルまるまる取り込むのではなくて一部だけ取り込むのである。

;;;テンプレートを使うPHP
$template =& new Template("base.html");
$template->use("condition1.html");

;;;テンプレート本体HTML(base.html)
<html>
 <body>
  <div id="header" t:replace="header">ここにヘッダが入る</div>
  <div id="main">いろいろ</div>
 </body>
</html>

;;;パーツ側HTML(condition1.html)
<html>
 <body>
  <div id="header">
   <ul>
    <li><a href="hoge">hoge</a></li>
    <li><a href="hoge">hoge</a></li>
   </ul>
  </div>
  <div id="main">無視される</div>
 </body>
</html>

こんな感じ。これで、スタイルシートなどもプレビューしながらパーツ部分を作れるはず。

パーツが複数のファイルに分かれている場合はuseを複数行えばいい。同じIDが複数のパーツファイル内で指定されていた場合は後に指定した方で上書きする、と。

プログラマーがHTMLも作る場合、タグ手打ちな人が多いので、HTMLタグとかが必要ない方が喜ばれたりするのだけれど、パーツも部分指定できるといくつかメリットがあるように思う。

パーツも部分指定できると何がうれしいかというと、一つのファイルに複数の「部分」を埋め込めることだ。

例えばヘッダとフッタの変更が常に同じ時に起こるデザインとか。１ファイル１パーツ制だと複数の部分を一度に変えたいときに複数のファイルをメンテナンスしないといけないのだけれど、１ファイル複数パーツ制だとヘッダとフッタを一つのファイルに埋め込んでおいて管理できる。

これで継承みたいにできるのかな？

コメントを書く

トラックバック

2004-12-23 木

HTMLテンプレートの続きの続き

PHP, テンプレート | 00:01 |

早速ご返答いただきました_(..)_

http://d.hatena.ne.jp/harux/20041222#p1

「デザイナー用HTML（テンプレート）←→プログラマー用HTML（PHPとか）」の可逆変換が必要（というか変換しないですむor表示時に自動変換ならそれが一番）。

というのが、具体的にはどういうことか解らないが、

ということですが、わかりにくくてすいません。考えながら書いていたので途中から全然別の方向に…PHPを直接埋め込む方法だとデザイナー→プログラマーの一方通行だよな、と思いながら書いていました。

デザイナーもプログラマーも同じテンプレート用ファイルを見て理解＆文法チェックできる方法は一番良いのです。

PHPを埋め込んだものをデザイナーに渡していじらせると、一番多いのが「範囲の閉じ忘れ」。テストサーバにおいてプレビューさせてチェックすることができますが、エラーを見てテンプレートファイルを修正することができない。その点タグで埋め込む形式にすると「閉じ忘れ」はデザイナーがチェックできる。

behavior で希望している機能は入力値チェックとかだけでは無くって、

<input type="text" name="date" v:behavior="dropdowndate" />

などとした場合に最終的なHTMLとして

<input type="hidden" name="date" />
<select name="date/year" onchange="hiddenset('date',this.form);">
  <option>2001</option>
  <option>2002</option>
  ....
</selct>
<select name="date/month" onchange="hiddenset('date',this.form);">
....
</selct>
<script>
function hiddenset(name,form){
 ...
}
</select>

みたいなのをまとめてはき出す、てのもやりたいのです。ie DHTML の Behaviorが一番イメージに近かった。

だから僕が必要なのはやっぱりHTMLタグの拡張＝カスタムタグなんだと思います。

「phpをおいていく方法」でわかりやすい方法でWordPressを見てみましたが、たぶん「必要な部品をすべて関数化する」ってことだと思うんですが、引数の指定方法とかPHP形式になるのが微妙かな、と。特に、先ほど説明した behavior のような仕組みを作る場合とか。<? wedget_date("name",$date) ?> だと「その部分にDreamweaverやブラウザ上では何も表示されない」のが嫌なのです。（ちなみに現在はそのやり方でやってます）

カスタムタグだと何も表示してくれないんで同じなんですが…

テンプレート等のプレゼンテーションにデータ構造が依存するのではなく、データ構造にプレゼンテーションを依存させるという発想だ。

ということですが、一番違和感を感じたのがコンディションのところ。つまり http://phpoot.sourceforge.jp/zogan/ar01s07.html の部分ですが、

 ***PHP
$model['table']=$table; // array(1,2,3);

 ***HTML
<p var:cont="{table}"></p>

という感じで作っていたものに「空の時はその旨を表示してくれ」という変更要求が入ったとき、Zoganだとたぶん

 ***PHP
$model['table']=$table; // array(1,2,3);
$model['table_empty']=empty($table);

 ***HTML
<p var:cont="{table}"></p>
<p var:cont="{table_empty}">空です</p>

だと思うんですが。僕が求めているテンプレートはこういう場合、PHPに変更を加えずに

 ***HTML
<p var:cont="{table}"></p>
<p var:cont="{table}" var:condition="empty">空です</p>

みたいな感じで設定できるものなんです。

具体的には、ちょっとしたイントラの画面変更とか、かな。「ここのHTMLかえたら変わるから自分でやってよー。」

という投げ方をしたい場合、こういう仕組みが用意されていないと難しいかな、と。

まあ、こんなことを言い出すとタグがどんどん多様複雑化していってXSLTになっていくわけですが…

（追記： <p var:cont="{not:table}>空です</p> みたいなのができるらしいです… function の存在を忘れてました汗）

あと「僕が作りたい物」にJavaScriptによるいろんな機能は絶対必要なんで…それをサポートしてくれる機能がないとやっぱり困ります。

ということで設計思想で食い違いがあるようなので、誰か別の物を作ってくれる人が現れるのを待つ方向で… behavior がMozillaで使えれば(;_;)

PHPカスタムタグは、「既存のタグを乗っ取る」機能がないのが辛いです。behaviorは属性で設定したい…。でコードを覗いてみるといろいろ違和感が(--;)

コメントを書く

トラックバック

2004-12-22 水

Kwartz

テンプレート | 17:52 |

Kwartzとは？

プレゼンテーションデータとプレゼンテーションロジックとが分離可能

高速な動作

複数のプログラミング言語に対応

HTMLテンプレートがSGML形式を崩さない

任意のテキストファイルで使用可能

自動サニタイズ機能をサポート

kuwata-lab: Kwartzユーザーズガイド

これはおもしろそう。プレゼンテーションデータとプレゼンテーションロジックとが分離可能ってのがいいかもしれん。ちょっと調べてみよう。

HTMLのテンプレート

PHP, テンプレート | 17:03 |

デザイナーとプログラマーが仕事を分担するという視点で考えると

「デザイナー用HTML（テンプレート）←→プログラマー用HTML（PHPとか）」の可逆変換が必要（というか変換しないですむor表示時に自動変換ならそれが一番）。
デザイナー用HTMLはDreamWeaver等のWYVIWYGなエディターで無理なく編集可能
テンプレート用プログラム記号の他にサンプル文字列が設定できる
JavaScriptとの連携…JavaScriptはどちらが担当する？

ということで、目をつけているのがJava用のカスタムタグとZOGAN。PHPカスタムタグというものもあるし。

「XMLとして解釈できる」と、テンプレートエンジンを作る方もうれしいし、たぶんDreamWeaverのエクステンションを作るのも簡単そうだ。以前PHPを埋め込むエクステンションを書いたことがあったけど、DreamWeaverのエクステンションはHTMLを「DOMで処理する」「正規表現で処理する」くらいしか手段が無くって（そりゃそうだ）、「あるPHPコードがおかれているかおかれていないか」を判定するためのコードをJavaScriptで書くって場合とか、すごいつらい。円マークが連続するする。その点DOMで処理できると安心ぽい。

で、ZOGANは実に良い線を行っていると思うのだが、JavaScriptとの連携がちょっと惜しいなぁ。

ちなみにZOGANというのはRubyのAmritaを元に考えられたXMLテンプレートエンジンで、<textarea var:cont="{var}"></textarea> で、textarea内にvarの値が展開されるといったようなもの。属性値の書き換え機能もあって<input type="text" value="{var}" />でvalueにvarの値が入る（この書き方よりも新仕様として考察されている <input type="text" value="sample" a:value="{var}" />みたいな書き方の方が好きだけど…）Amritaのidタグを使った設定ってのは、idタグをjavascriptで使いたいときとかに困るんだな…。

で、例えば ZOGAN で input タグの onblue で入力内容の検証を行いたいときとか <input type="text" onblue="{dateinput_onbluescript}" /> みたいにテンプレートを設定しなければいけなくなる。思うにZOGANで、「このタグをカスタムタグとして処理」みたいなタグがあって、<input type="text" v:behavior="dateinput" /> みたいに書いたときに <t:dateinput type="text" /> みたな「カスタムタグ」として処理されるとうれしいだろうな（内部的には <php $template->addTag( "dateinput", array('type'=>'text','_overwrited'=>array('tagName'=>"input") ); ?> てな感じにコンパイルされるのかな… ）。

あと、テキスト内の改行を brタグにする（nl2br）みたいな処理もほしいな。でも同じ複数行値でも textarea 内だとbrタグはいらないけど、p タグ内だと改行タグが必要になったりするし…この切り分けはプログラマーがやるべきか、デザイナーがやるべきか…。やっぱり var:cont=text とか属性値で処理するんじゃなくて <v:value-of select="text" filter="nl2br" />みたいなカスタムタグ形式の方が良さそうか。それとも、$templateEngine->setFilter('text','nl2br') みたいにテンプレート展開用プログラム内でこの処理を行うべきか？

あ、ZOGANで %text% とかをテキストノード中に使うと text の値を表示してくれる機能とかもほしい。もちろん<span var="text" var:omit-tag="yes"></span>とかで処理できるわけだけど…長い。PHPカスタムタグだと %text% で表示してくれるけど…コンパイルされたコードは<?=$text ?> になっちゃう。タグがエスケープされてない。やっぱりエスケープしてほしいし。ZOGAN用の非XMLプリプロセッサにかければいいのかな…JavaScriptとの連携を考えると、「この行を無視」みたいなのもほしいし。

まあZOGANを詳しく調べた訳じゃないので、もしかしたら全部できるのかもしれないなぁ。どうしてドキュメントが英語しかないんですか（；＿；）＞id:harux さん

コメントを書く

トラックバック