q19cms

HTMLTemplateについて

HTMLTemplateとは

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

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

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

HTML template for PHP

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

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

HTML template for PHP改

このサイトで販売しているCMSでも、HTMLTemplateを使用しています。

使用方法

参照方法

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_dataの中にimage1_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