CRYTUS.INFO

HTMLTemplateについて

目次
  1. HTMLTemplateとは
  2. 使用方法
    1. 参照方法
    2. テンプレート処理
  3. テンプレート用タグ
    1. 変数の出力（改行あり）
    2. 変数の出力（改行なし）
    3. 値が存在するか判定
    4. 値が存在 しない か判定
    5. 繰り返し
    6. コメント
    7. その他
  4. サンプル
  5. 応用例
    1. checkbox radioの出力
    2. 選択selectの出力
    3. 画像の出力
    4. テーブル（表）の出力

HTMLTemplateとは

Hiroshi Ayukawa氏により作成された、所定の記法で作成されたテンプレートからHTMLを生成するプログラム（テンプレートエンジンと呼びます）です。

テンプレートエンジンを使用することで、処理を行うPHPと表示内容となるhtmlテンプレートのファイルを分けることで、サイトの作成や変更を効率よく行うことが出来ます。

当方で販売しているCMSでも利用させていただいています。
簡単設置のCMS

オリジナルは、次のURLからダウンロードできます。
HTML template for PHP

利用ライセンスについては、上記アーカイブ内にありますので、それを御覧ください。

上記のサイトからダウンロードできるhtmltemplate.incは、PHP4用のものです。 PHP5以降で実行するには、修正が必要です。
PHP5以降に対応したhtmltemplate.incは、次のURLからダウンロードできます。
HTML template for PHP改

使用方法

参照方法

htmltemplateは、PHP環境下で動作します。

PHPプログラムから、次のように参照します。

require('htmltemplate.inc');

上記は、PHPプログラムと同じディレクトリに存在する場合で、必要によりディレクトリ指定を追加します。
例：includeの中にある場合：

require('include/htmltemplate.inc');

テンプレート処理

動作は、テンプレートファイル（または変数）を読み込んで、その中の決まった記法を規則に従って、HTMLに変換します。

テンプレートファイルを読み込む方法には、いくつかの方法があります。 

htmltemplate::t_include("sample.html",$val);

これによりsample.htmlファイルを読み込んで、htmlに変換して出力します。
その際に、入力ファイル内にある変数などの記法で該当するものを$val変数の内容に置き換えます。
$valには、連想配列で出力するデータを入れておきます。 変数名は、$valでなくても構いません。

直接出力せずに、htmlに変換した内容を変数に保存する場合は、次のようにします。 

$html = htmltemplate::t_buffer("sample.html",$val);
echo $html;

sample.htmlファイルを読み込んで、htmlに変換して$html変数に保存します。
この例では、その次の行で、表示を行います。
この様な使い方は、htmlの内容を更に修正したい場合や、同じ内容を複数の場所に出力するなどの場合に有効です。

テンプレート用タグ

テンプレートファイルに、専用のタグを使用してデータを出力します。

変数の出力（改行あり）

{val one}
{val two/three}

与えられた変数の中の要素名に対応するデータを出力します。対応するものがなければ、何も出力されません。 

$val['one'] = 1;
$val['tow']['three'] = "test";

この様に変数に値を設定すると、1行目は1、2行目はtestと出力されます。

変数の中に改行が含まれている場合、<br>を出力します。

変数の出力（改行なし）

valのかわりにrvalとすることで、変数の中に改行が含まれていても改行されません。 

{rval one}

変数に改行を含むデータを入れておくと、 

$val['one'] = "ここで
改行します。";

次のように出力されます。 

ここで
改行します。

rvalの場合は、<br>が出力されません。（ブラウザの表示では改行されない）

値が存在するか判定

変数の中に、特定の値が定義されているかを判定して、定義している場合だけ、出力を行います。 

<!--{def one}-->
  {val one}が設定されています<br>
<!--{/def}-->

この場合、oneが定義されている場合に、<!--{def one}-->と<!--{/def}-->の間の部分を出力します。 この間は複数行でも問題ありません。

入れ子にすることも出来ます。 

<!--{def one}-->
  {val one}が設定されています<br>
  <!--{def two}-->
    {val two}も設定されています<br>
  <!--{/def}-->
<!--{/def}-->

defでは、変数が空の場合は、定義されていないと判定します。

値が存在 しない か判定

defの代わりにndefを使用すると、値が定義されていない場合に出力を行います。 

<!--{ndef one}-->
  値が設定されていません<br>
<!--{/ndef}-->

入れ子にすることも出来ます。 

<!--{def one}-->
  {val one}が設定されています<br>
  <!--{ndef two}-->
    twoは設定されていません<br>
  <!--{/ndef}-->
<!--{/def}-->

ndefでは、変数が空の場合は、定義されていないと判定します。

繰り返し

配列の内容を出力する場合に使用します。 

<!--{each three}-->
	{val three}<br>
<!--{/each}-->

この様にすると、配列threeの内容を順番に出力できます。 

$val["three"][] = "one";
$val["three"][] = "two";
$val["three"][] = "three";

この様に変数に値が入っていると、 

one<br>
two<br>
three<br>

と出力されます。
変数の中を配列にすることも出来ます。 

<!--{each three}-->
	{val three/value}->{val three/text}<br>
<!--{/each}-->

変数に次のように設定すると、 

$val["three"][0]['value'] = 1
$val["three"][0]['text'] = "one";

この様に出力されます。 

1->one<br>

コメント

commentで囲った範囲は常に出力されません。 

<!--{comment}--> this is a comment <!--{/comment}-->

<!--{comment}-->と<!--{/comment}-->の間は複数行にすることも出来ます。

その他

限られたタグですが、PHPの出力を工夫することで、いろいろな出力が可能です。
大小判定が必要な場合は、PHP内で大小判定をした結果をデータの有無で出力することなどです。

また、全く新しい機能を持ったタグを追加する機能もあります。
サンプルが、アーカイブに含まれていますので、PHPが記述できる方は、独自のタグを追加できます。

サンプル

テンプレートファイルsample.htmlを次のようにします。 

<!--{comment}--> this is a comment <!--{/comment}-->
{val one}<br>
{val two}<br>
<!--{each three}-->
	{val three}
<!--{/each}-->

<!--{each address}-->
----------------------------------
	ZIP:{val address/zip}<br>
	PREF:{val address/pref}<br>
	<!--{def address/zip}-->
		"address/zip" is defined.<br>
	<!--{/def}-->
<!--{/each}-->

<!--{def one}-->
  "one" is defined.<br>
<!--{/def}-->

<!--{def five}-->
	"five" is defined.  !?<br>
<!--{/def}-->

<!--{def address}-->
	"address" is defined.<br>
<!--{/def}-->

	<!--{def address/zip}-->
		OUT OF 'EACH'!!
		"address/zip" is defined.<br>
	<!--{/def}-->

	<!--{vdef address/zip}-->
		OUT OF 'EACH'!!
		"address/zip" is defined.<br>
	<!--{/vdef}-->

VAL:<br>
{val nl2brtest}<br><br>

RVAL:<br>
{rval nl2brtest}

PHPファイルの内容を次のようにします。 

<?php
$val=array(
	"one"=>"firstvalue",
	"two"=>"secondvalue",
	"three"=>array(
		"child_a",
		"child_b",
		"child_c",
	),
	"address"=>array(
		array(
			"zip"=>"1112222",
			"pref"=>"Tokyo"
		),
		array(
			"zip"=>"333666",
			"pref"=>"Osaka"
		)
	),
	"nl2brtest"=>"aaaaaaaaaaaaaaaaaaaa
	bbbbbbbbbbbbbbbbbbb
	ccccccccccccccccccc"
);

require("htmltemplate.inc");
htmltemplate::t_include("sample.html",$val);

サーバーにファイルをアップロードして、PHPファイルをブラウザで開くと、結果は次のように出力されます。 

firstvalue
secondvalue
child_a child_b child_c ---------------------------------- ZIP:1
PREF:Tokyo
"address/zip" is defined.
---------------------------------- ZIP:3
PREF:Osaka
"address/zip" is defined.
"one" is defined.
"address" is defined.
VAL:
aaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbb
ccccccccccccccccccc

RVAL:
aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbb ccccccccccccccccccc

応用例

htmltemplateには、基本的な限られたタグしか存在しませんが、PHPで出力を工夫することで、色々な使い方が可能です。

checkbox radioの出力

チェックボックスやラジオボタンの選択を行う。 フォームなどで、デフォルトや前回の入力状態にするために使います。

PHPでの処理です。 

if (is_array($_REQUEST["check"])) {
	foreach ($_REQUEST["check"] as $v) {
		$form["check_" . $v] = "checked";
	}
}
if ($_REQUEST["radio"]) {
	$form["radio_" . $_REQUEST["radio"]] = "checked";
}
$val["form"] = $form;

テンプレートでは次の様にします。 

<input type="checkbox" name="check[]" value="1" {val form/check_1}>１の場合<br>
<input type="checkbox" name="check[]" value="2" {val form/check_2}>２の場合<br>
<input type="checkbox" name="check[]" value="3" {val form/check_3}>３の場合<br>

<input type="radio" name="radio" value="1" {val form/radio_1}>１の場合<br>
<input type="radio" name="radio" value="2" {val form/radio_2}>２の場合<br>
<input type="radio" name="radio" value="3" {val form/radio_3}>３の場合<br>

選択selectの出力

選択タグselectでのデフォルトやフォーム入力を反映するものです。

PHPでの処理です。 

if ($_REQUEST["select"]) {
	$form["select_" . $_REQUEST["select"]] = "selected";
}
$val["form"] = $form;

テンプレートでは次の様にします。 

<select name="select">
<option value="">選択してください</option>
<option value="1" {val form/select_1}>１の場合</option>
<option value="2" {val form/select_2}>２の場合</option>
<option value="3" {val form/select_3}>３の場合</option>
</select>

画像の出力

画像が登録されている場合画像を表示して、登録されていない場合にNO IMAGE画像を出力するサンプルです。 

<!--{def image1_file}-->
<img src="user_data/{val image1_file}" alt="{val title1}">
<!--{/def}-->
<!--{ndef image1_file}-->
<img src="images/noimg.png" alt="{val title1}">
<!--{/ndef}-->

この例では、user<em>dataの中にimage1</em>fileがあると想定しています。
image1_fileに画像ファイル名が入っている場合それを表示し、なければ、images/noimg.pngを表示します。

テーブル（表）の出力

テーブル用のデータを用意します。 

$table["title"] = array("見出し", "内容");
$table["data"][0] = array("col1" => "color", "col2" => "red");
$table["data"][1] = array("col1" => "price", "col2" => "1,234");
$val["table"] = $table;

テンプレートでは、次のように記述します。 

<table>
<tr>
<!--{each table/title}-->
<th>{val table/title}</th>
<!--{/each}-->
</tr>
<!--{each table/data}-->
<tr>
<td>{val table/data/col1}</td>
<td>{val table/data/col2}</td>
</tr>
<!--{/each}-->
</table>

結果は次のようになります。

見出し 内容
color red
price 1,234