とっても簡単なPHPのテンプレートエンジンSmartyを導入するよ

2018-03-11Web開発/デザインPHP, Smarty

どもども、最近は仮想通貨の話題ばっかりだったので、おひさしぶりのWeb開発系の記事です。今回は、PHPのテンプレートエンジンであるSmartyを導入してみようと思います。

これまでWebサイトを作成するときは、全て一人でやっていたため、テンプレートエンジンを利用したことはありませんでした(フレームワークとかも使っていませんでした)。しかし、そのうちチームを組むことがあるかもなので、テンプレートエンジンを導入することでデザインとシステムを分離させていこうと思いました。

今回の記事ではMAMPを利用したWeb環境に導入していきます。また、本記事ではWeb環境の構築は触れないので、それぞれ事前に環境構築をしておいてください。

OS : macOS Sierra
Web : MAMP(Apache+PHP7)
Smarty : 3.1.30

Contents

1. エンジン準備

まずは、Smartyの導入をします。先ほども述べました通り、Web開発環境はすでに整っている事を前提に、Smartyの導入だけやっていきます。

はじめにSmartyの公式サイトから、本体をダウンロードしてきます。本記事執筆時点で2.6.31と3.1.30の二つのバージョンがメインにリリースされていました。今回は3.1.30の方を使っていきます。ダウンロードが完了したら、解凍してください。

解凍すると色々なファイルが出てくるかと思いますが、大切なのはlibのディレクトリとその中身です。これらを作業ディレクトリに移動してください。続いて、同じく作業ディレクトリに”templates”と”templates_c”というディレクトリを作成してください。templatesにはHTMLのテンプレート入れます。”teplates_c”にはキャッシュ化されたテンプレートデータが自動的に格納されます。また、”templates_c”はコードの方からキャッシュファイルが格納されるため、書き込み権限を与えておく必要があります。

下準備は終わったので後は、PHPのコードからSmartyを呼び出してあげれば使用することができます。

2. 使用準備

今回は、簡単な例を用いて実際に動作を確認してみようと思います。まずは、作業ディレクトリに”sample.php”を作成します。このファイルには以下のように描いてみます。

<?php

require_once("libs/Smarty.class.php");

$smarty = new Smarty();
$smarty->template_dir = "templates/";
$smarty->compile_dir = "templates_c/";

// 文字列変数
$smarty->assign("hello", "Hello");

// ユーザ情報
$user_name = "データベースあたりから取得する名前的な何か";
$smarty->assign("name", $user_name);

// ユーザログ的な何かとか
// 配列も渡せるよ
$user_log = array('log1','log2','log3','log4');
$smarty->assign("logs", $user_log);

// テンプレートファイルを読み込む
$smarty->display('sample.html');

<?php

require_once("libs/Smarty.class.php");

$smarty = new Smarty();

$smarty->template_dir = "templates/";

$smarty->compile_dir = "templates_c/";

// 文字列変数

$smarty->assign("hello", "Hello");

// ユーザ情報

$user_name = "データベースあたりから取得する名前的な何か";

$smarty->assign("name", $user_name);

// ユーザログ的な何かとか

// 配列も渡せるよ

$user_log = array('log1','log2','log3','log4');

$smarty->assign("logs", $user_log);

// テンプレートファイルを読み込む

$smarty->display('sample.html');

このコードでは、Smartyの読み込みと、テンプレートとなるHTML側(sample.html)に変数を割り当てる処理を行なっています。大切なのは、最終行に書かれているテンプレートを呼び出す処理です。あと、値をテンプレート側に渡すのであれば、”assign”の記述を忘れないよういお気をつけください。

次に、PHP側呼び出されるテンプレートを書いていきます。テンプレートは”templates”のディレクトリに入れます。というわけで”sample.html”を以下の内容で作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>

{$hello}, {$name}

<ul>
{foreach $logs as $log}
<li>{$log}</li>
{/foreach}
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

{$hello}, {$name}

<ul>

{foreach $logs as $log}

{/foreach}

</ul>

</body>

</html>

上記のコードは最低限です。見てもらえるとわかるかと思いますが、先ほど”assign”した名前を呼び出すことで表示していることがわかると思います。また配列も独自の記述により、配列の各要素毎に処理できることがわかるかと思います。

確認してみる

ここまで、できたら最後に動作確認です。普通のページと同じようにURLを指定してアクセスしてください。ちなみに自分の環境では”http://localhost:8888/sample.php”でした。ページを表示すると、テンプレートを元にPHPから渡された情報を表示しているはずです。

もし500Errorが出てきたら、PHP側の読み込みや記述が合っているかを確認して見てください。それでもダメなら、Smartyのバージョンを変えるのも手です。もし、何も表示されないのであれば、PHPファイルの最終行にテンプレートを読み込みをちゃんとしているかを確認して見てください。

コーディングで分からないことがあれば
プログラミングや環境構築で分からないことがあったら『teratail』というエンジニア特化型のQ＆Aサービスがオススメです。自分もどうしても分からないことがあったら、時々質問しにいきますが、かなりニッチな質問にも意外と早く回答がつくのでとても頼もしいです。という宣伝でした。

おわりに

さて、今回はPHPのテンプレートエンジンを導入してみました。これまでは、デザインもシステムも一人で孤独に全てを作っていたので、ありがたみは全くありませんでした。しかし、一度だけグループで開発する機会があり、その時にテンプレートエンジンのありがたみを初めて知りました。というわけで、今後もグループ開発ができる事を祈りつつ、導入だけやってみました。

「すぐ分かるテンプレートエンジン Smarty」

2018-03-112020-01-25Web開発/デザインPHP, Smarty