スポンサーリンク

今から３分で，Smartyの使い方を覚えよう　（PHPテンプレートエンジンの入門）

PHP フレームワーク Smarty n分

PHPのテンプレートエンジンであるSmartyの使い方を，

Windowsマシン上で，たった３分の作業で覚える。

位置付けを解説：「テンプレートエンジン」「Smarty」とは何なのか？

まずは前提知識から。

（この部分は３分の作業にカウントしない。）


ある程度の規模のWebサイトやWebアプリを構築する際には，優れたフレームワークの選定が重要だ。


他の言語と同じく，PHPにもMVCフレームワークが存在し，
主要なものは「４大フレームワーク」などと呼ばれる。

PHPフレームワークの種類（2011年の情報）
http://winroad.info/codeigniter/2011/...


そういった各種フレームワークの中でも，

  • MVCの中から「M」に相当するDBがなくなって，
  • 「Vã‚’Cでうまく運用する」

というフレームワークが「テンプレートエンジン」だと言える。

データベースを使わなくて済むので，デザイナ向けだ。



DBのレコードを順番に表示するのではなく，

設定ファイルの書き換えや，画面の断片の継ぎはぎだけで運用されている

というサイトも多数存在する。

主な作業者は，デザイナやマークアップエンジニア達である。


そうすると，アーキテクチャにはモデル層がほぼ不要になる。（もちろん付与することもできる）



現時点までで，テンプレートエンジンの中で最もスタンダードなのがSmarty。

Webでテンプレートエンジンと言えば大抵，Smartyのことね，と通じる状況だ。


最新は3系だが，既に枯れた2.6系は広く普及している。

この扱い方を習得しておけば，レガシー小規模Webサイトのメンテに役立てる事ができる。



ここから下では，たった３分の作業でSmartyを使ってみる。


作業を開始

ApacheとPHPのインストールは済んでいるものとする。

Windows Vista上に XAMPP と XOOPS Cube をインストールし，サイトをカスタマイズする手順
http://language-and-engineering.hatenablog.jp/entry/20110730/p1

  • （１）Vista上でインストール環境を整える。
  • （２）XAMPPをインストールする。
（１）Smartyの利用環境を作る

Apacheの公開ディレクトリ xampp\htdocs\ の中に，「smarty_test」というフォルダを作成。

その中に，「templates」「templates_c」という空フォルダを作成。



smartyのダウンロードページへ遷移。
http://www.smarty.net/download



「Download」の項目には３系のファイルが並んでいるが，一番下の

「Smarty 2 Releases：Smarty 2.6.26 　June 18th, 2009」という所から，

zipファイルをダウンロードする。保存先はデスクトップ。



ダウンロードは一瞬で終わる。なんせ，200kbもないから。


すぐに解凍。

Smarty-2.6.26というフォルダが生成される。

その中の「libs」というフォルダを，さっき作った「smarty_test」フォルダの中に設置（丸ごとコピペ）。



これで，Smartyの利用環境が完成。


（２）Smartyで動くWebサイトを作る

ここからは，Smartyを使ってWebページを作る。


「smarty_test」フォルダの直下に，sample.phpというファイルを作成。

<?php

require( dirname( __FILE__ ).'/libs/Smarty.class.php' );

$smarty = new Smarty();

$smarty->template_dir = dirname( __FILE__ ).'/templates';
$smarty->compile_dir  = dirname( __FILE__ ).'/templates_c';

$smarty->assign('name', 'ワールド');
$smarty->display('sample.tpl');

?>

また，templatesフォルダの中に，sample.tplというファイルを作成。

<html>
<head>
<title>Smartyのテスト</title>
</head>
<body>
Hello, {$name}!
</body>
</html>


これで完成。


Webページの動作確認をする。

ブラウザで，下記のURLにアクセス。


「Hello, ワールド! 」と表示されていれば，テンプレートのWebページ化に成功している。



最後に，templates_cフォルダの中をチラッとのぞいてみる。


変なファイルが自動生成されているのが見えるだろう。

これは，自作のテンプレートをSmartyが「コンパイル」した結果生まれたファイルだ。



以上，３分もかからなかったはず。

動作原理の説明

コードの中身の説明に入る。

簡単にいえば，下記のような流れで動いている。

  • ブラウザからリクエストされたPHPファイルの中で，Smartyライブラリを呼び出す。
  • Smartyに，テンプレートの場所と，コンパイル結果の保存場所を教える。
  • Smartyに，変数と値の組み合わせをセットする。
  • Smartyに，特定のテンプレートを使って画面を描画するように指示する。
  • Smartyは，指示されたテンプレートをコンパイルし，そのテンプレートの中に変数の値を埋め込んで，画面を表示する。


「変数操作」と「画面描画」のコードが分離しているのがわかる。

  • 変数の値を操作・構築するのは，ブラウザからリクエストされたPHPファイル。（＝コントローラ）
  • 画面のレイアウトのひな型を記述するのは，テンプレートファイル。（＝ビュー）

MVCパターンで言うと，C層とV層が分離している。



Webサイト全体を構築する際には，

  • リクエストされる各URLごとに，上記のような描画ロジックとテンプレート（CとVに相当するファイル）を個別に作成。
  • Smartyの設定事項のコードは共通のPHPファイルに切り出して，全URLでインクルードする。

という形態になる。

補足：今後の学習に役立つリンク集

Smartyの入門記事：

PHP-Smartyの使い方
http://park.geocities.jp/gdfsm000/php...

  • 2008年の情報，バージョンは2.6.20
  • １ページだけで短い


Smarty入門者のための逆引きSmartyリファレンス
http://d.hatena.ne.jp/sotarok/2008032...

  • 2008年の情報，バージョンは2ç³»
  • よく使うもの・最悪これだけ知ってれば大体かけるよ、というものをピックアップして１ページにまとめたもの


PHPプロ yossy先生のSmarty講座
http://www.phppro.jp/school/smarty/

  • 2007〜2009年の情報，バージョンは2.6.18
  • 解説が詳しい


バージョン２系と３系の違い：

Smarty2.0からSmarty3.0への変更点（2010年の情報）
http://suin.asia/2010/03/06/smarty_3.0

  • PHP5のみになった。その他シンタックスの変更


【メモ】Smarty2 → 3のハマリどころ
http://nplll.com/archives/2010/04/sma...

  • デリミタの前後で改行とかスペースがあると無効になった


Smartyのさまざまな用途：

XOOPS USERS GROUP / Smarty小ネタ
http://www.xugj.org/modules/xpwiki/?S...

  • XOOPSã‚„XCL向けに，Smarty を使う上で知っておくと便利な小ネタ集
  • 2011å¹´9月の情報


突貫工事で携帯向けとスマホ向けサイトを作る
http://blog.ichino.be/web-engineer/278/

  • サイトをガラケーにも対応させる場合，Smartyで表示する直前に文字コードをUTF-8からSJISに変更
  • 2011å¹´8月の情報



関連する記事：

Windows Vista上に XAMPP と XOOPS Cube をインストールし，サイトをカスタマイズする手順
http://language-and-engineering.hatenablog.jp/entry/20110730/p1


フリーのブログソフト「WordPress」で，マルチサイトの独自ブログを立ち上げる手順
http://language-and-engineering.hatenablog.jp/entry/20120711/p1


JScript製の簡易 HTML テンプレートエンジン　（Webサイト作成時に，画面の共通部品を外部読み込み）
http://language-and-engineering.hatenablog.jp/entry/20090112/1231757918

　

language_and_engineering 読者になる

広告を非表示にする
スポンサーリンク
スポンサーリンク