PHPとJSONでお手軽に量産型HTMLテンプレートを作ってみた

同じような形式の静的なHTMLページを複数作る場合ってたまにありますが、その時って「これをいかに効率良く作成するにはどうすればいいか」って考えますよね。そういった場合は大抵PHPでテンプレート作ってそれを使い回すことをします。

多くの人が使うんでしょうね、PHPには複数のテンプレートエンジンがあります。でも、そこまで必要ないんだけど・・と思うようなページの作成をすることになった時のために、シンプルなテンプレートエンジンを作成してみました。

達成目標

今回は、以下の目標が達成されるPHPテンプレートエンジンを作成します。

共通テンプレートを出力するクラスの作成
各ページで使用する共通テンプレートの作成
共通テンプレートを読込んで出力してみる
各ページで出力するデータJSONファイルの作成と読込

開発環境

開発環境ですが、Apache、またはnginxでPHPが動作する環境であればOKです。Windowsの場合はXampp、Macの場合はMAMPを使えば簡単にPHPが動く環境が作れます。以前MAMPで開発環境を作成するの記事を書きましたのでそちらを参考にしていただければ。（WordPressをインストールする前までです）

www.fact-of-life.com

量産型HTMLテンプレートの作成

ファイル構成

Webフォルダ
|
+-- app/
|   |
|   +-- template.class.php
|
+-- json/
|   |
|   +-- index.json
|
+-- template/
|   |
|   +-- common.tpl.php
|
+-- index.php

共通テンプレートを出力するクラスの作成

まずは共通で使用されるテンプレートHTMLを出力するクラスの作成を行います。

app/template.class.php

<?php 
	class hwTemplate {
		public function show($tpl_file) {
			include("{$tpl_file}");
		}
	}
?>

こちらで行っていることは、指定したファイルをincludeして出力しているだけです。

HTML共通テンプレートの作成

次に、共通で使用するHTMLのテンプレートを作成します。

template/common.tpl.php

<html>
<head>
<meta charset="utf-8">
<title><?php echo $this->title ?></title>
</head>
<body>
<h1><?php echo $this->h1 ?></h1>
<ul>
<?php for($i=0; $i<count($this->lists); $i++){ ?>
	<li><?php echo $this->lists[$i]; ?></li>
<?php } ?>
</ul>
</body>
</html>

タイトルとH1、リスト表示を入れてみました。

実際に出力してみよう

出力ロジックとテンプレートが完成したので、実際に出力してみましょう。

index.php

<?php

$dirname = dirname(__FILE__);

include($dirname . '/app/template.class.php');

$template = new template();

$template->title = '１ページ目 - 量産型PHPテンプレート';
$template->h1 = '量産型PHPテンプレート １ページ目';
$template->lists = ['りんご', 'バナナ', 'みかん'];

$template->show($dirname . '/template/common.tpl.php');

?>

エラーもなく、ページが表示されればOKです。

JSONファイルを使って量産してみよう

一通りの流れを作ったところで、次は量産体制に入ります。JSONファイルを作成し、量産してみましょう。

先ほど作成した変数をJSON化してみます。

json/index.json

{
	"title": "１ページ目 - 量産型PHPテンプレート",
	"h1": "量産型PHPテンプレート １ページ目",
	"lists": [
		{ "name": "りんご" },
		{ "name": "バナナ" },
		{ "name": "みかん" }
	]
}

次に、出力用のファイルとテンプレートを変更します。

template/common.tpl.php

<html>
<head>
<meta charset="utf-8">
<title><?php echo $this->jsonData['title'] ?></title>
</head>
<body>
<h1><?php echo $this->jsonData['h1'] ?></h1>
<ul>
<?php for($i=0; $i<count($this->jsonData['lists']); $i++){ ?>
	<li><?php echo $this->jsonData['lists'][$i]['name']; ?></li>
<?php } ?>
</ul>
</body>
</html>

index.php

<?php

$dirname = dirname(__FILE__);

include($dirname . '/app/template.class.php');

$template = new template();

$json = file_get_contents($dirname . '/json/index.json');
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$jsonData = json_decode($json, true);
$template->jsonData = $jsonData;

$template->show($dirname . '/template/common.tpl.php');

?>

JSONファイルを読み込み、データをそのまま変数に突っ込んで使用しています。

これで量産体制が整いました！あとはindex.phpとindex.jsonを使えばページの量産は可能です。

JSONファイルの構成を変えていろいろ試してみてください。