テンプレートパックサンプル emerald -SOY CMS blog-

2回目はテンプレートエンジンのSOY2HTMLについて解説します。

SOY2HTMLは1つの画面を全てObjectとみなして管理するテンプレートエンジンです。

・画面にフォームがある＝Formタグがある＝Formコンポーネントが追加されている

・画面にリンクがある＝Aタグがある＝Linkコンポーネントが追加されている

のように、HTMLの要素一つ一つをコンポーネントとして取り扱います。

タグの数だけ対応するコンポーネントがありますが、似たような物もあるのでとりまとめて以下のコンポーネントがあります

・HTMLPage 画面に対応するクラス

・HTMLLink リンク

・HTMLLabel pやspanなど、画面に文字を表示する

・HTMLImage 画像

・HTMLInput Inputタグ

・HTMLForm Formタグ

・※HTMLModel 何もしない

・※HTMLList

細かいクラスなどもありますが、大枠はこの程度です。

○HTMLを扱うテンプレートエンジンに求められること

HTMLタグを構成しているものは何でしょうか。

SOY2HTMLではHTMLタグを

・タグ(種類)がある

・属性がある

・テキストがある（ない）

・子にHTMLタグを含む

の4種の性質にわけて考えています。

例えばこんなテンプレートがあったとします。

<p>{$example_text}</p>

{$example_text}にプログラム側で何かしらの文字列を割り当てて表示する、そんなテンプレートエンジンが基本かと思います。シンプルで使い勝手は良いです。

では仮に仕様として、特定の条件の時pタグにclass="hoge"を表示する必要があった場合どうするでしょうか？

例えばテンプレートを修正する？

<p {if $condition}class="hoge"{/if}>{$example_text}</p>

もしくは<p>タグを含んだ全てをプログラム側から出力する？

どちらも解決法ですが、class名が変わった時、デザインが変わった時など細かい修正は多々あるかと思います。そのたびにプログラムとテンプレート、両方の修正が必要になってしまっては意味が無いです。

出来ればテンプレートエンジンでこのあたりを解決したいと思っていました。

SOY2HTMLはタグを一つのオブジェクトととらえています。

<p soy:id="example_text">何か文字列がはいります</p>

HTMLタグに拡張属性soy:idを付加することでプログラムとテンプレートを関連づけます。

 
$html->createAdd("example_text","HTMLLabel",array(
 "text" => $example_text,
 "class" => ($condition) ? "hoge" : "",
 "onclick" => "alert(100)",
 "style" => "background-color:red;",
 "visible" => true
));

属性やテキストはプログラム側で制御出来ます。タグにsoy:idと書くだけでその箇所のHTMLは全てコントロール可能になります。

例えば特定の条件の時(例えばテキストが0文字の時に<p></p>と出力されたくない)にタグを丸ごと出力したくなければ、「"visible" => false」と記述するだけで可能です。

CSSやJavaScriptなども同時に制御出来るので、Ajaxとの連携にも向いています。

○メリット・デメリット

メリット

・上述のように属性値を制御出来るため、テンプレートの修正が減少する

・テンプレートとプログラムが１：１で対応するため、デバッグが容易

・再利用性が高い

・テンプレートの入れ替えコストが低い

テンプレートにはsoy:idを入れるだけなので、テンプレート化のコストが低いです。

このあたりはSOY CMSをお使いの方にはわかるかと思います。

デメリット

・HTMLを構造化して理解する必要がある

・コード量が非常に多い

1画面に1クラスが対応するため、コード量が非常に多いです。

管理画面を作る場合などは、データの取得・コンポーネントの追加・繰り返し構造など全てを記述することとなり、1クラスのコード量が数百行になることもあります。

でも、動かないコードやよくわからない記述方法の画面クラスがあった場合、躊躇うことなく捨ててしまえます。影響箇所は最大でも現在表示されている画面だけなのです。

○まとめ

SOY2HTMLでシステムを作る時は今までのやり方を少し忘れる必要があります。

・テンプレートにIF文をかけない

・テンプレートにforeach文をかけない

このあたりは最初はきっと戸惑うはずです。

途中から

・プログラムを変更する時はテンプレートを全く触らない

・デザインを変更するときはプログラムを全く触らない

ことに気づくでしょう。そしてその楽しさにも。

次回はSOY2HTMLの補足として具体的な構築方法を解説していきます。