【初心者向け】PHP Smartyとは?使い方を徹底解説!

公開日: 2017.08.06
更新日: 2024.01.31

PHPは、サイトを構築していくにあたって、とても使いやすい言語です。

なぜかというと「PHPはHTMLと親和性の高いスクリプト言語」といわれているからです。
しかし多くのページ、複雑な構造のページなどを作成していくにあたって、PHP単体ではスムーズに進まない場合が出てきます。
それに対しての解決策、そしてその中のおすすめのひとつが「Smarty」になります。Smartyとは、phpのテンプレートエンジンのひとつです。今回の記事ではSmartyについて解説していきます。

PHPのテンプレートエンジンとは?

パソコンと両手たとえば、下記のようなHTMLの中にPHPを書き加えることができます。
これはHTMLを少しでも知っていれば、すごく分かりやすい書き方だと思います。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>分かりやすいPHP初歩の書き方</title>
<meta charset=”utf-8″>
</head>
<body>
こんにちは、<?php echo “スマート太郎”; ?>さん。
</body>
</html>

しかし、いくら親和性が高いとはいえ、ページ数が多くなったりしてくると管理も大変になります。内容のメンテナンスなどを行いたい場合に多くの時間がかかると更新も億劫になってしまいます。

問題は、プログラムファイル自体はPHPとHTMLが混在し一般的な可読性が非常に悪いということです。なぜかというと「表示内容(View)」と「動作するルール(処理内容)(Controller)」が混在しているためです。
そこで登場したのが「テンプレートエンジン」と呼ばれる仕組みです。

テンプレートエンジンとは?

「テンプレートエンジン」は、処理内容(PHP主体)と表示内容(HTML+CSS主体)に分けてページ管理が可能になります。わざわざ分割する意味は、単純なページや数ページ程度ではわかりにくいかもしれません。ですが、PCとスマホで別々のレイアウトを用意したい場合などに、通常ですと2ページ別々に用意するところを「処理内容」の部分は同じで「表示内容」が違うだけのページを作成すればよく、管理が容易になります。

共通の「処理内容」は1か所にまとめることができる(使い回しがきく)というメリットがあることになります。もちろん、共通の「表示内容」もまとめることができます。ページ設計次第で、保守やメンテナンスのしやすいページを作成することが可能になります。

Smartyとは?

パソコン 横から

PHPバージョン4あたりから使われるようになった有名なPHPテンプレートエンジンです。最古参のテンプレートエンジンでPHPテンプレートエンジンといえば当時はこれでした。最古参とはいえ、現在稼働している多くのシステムでも使われており、ネットでの情報も多いです。バージョンによって、書式が変わっていたりするので、使用するときはバージョンをきちんと把握しておく必要があります。

前述のとおり、一つのPHPファイルにロジックとデザインの両方を書いて作成することも可能ですが、分離することでプログラムの見通しが良くなります。また、プログラマーとデザイナーの分業など、複数の人が制作に関わる場合、特に威力を発揮します。

Smartyの特徴

映し出されたパソコン

PC

代表的な特徴をいくつか挙げます。

1. 非常に高速
2. コンパイルは一度だけ行われるので、テンプレートを毎回解析するような無駄がない
3. 変更があったテンプレートファイルのみ再コンパイルされるので効率的
4. 簡単に独自の 関数変数の修飾子 を作成できるので、機能拡張が容易
5. エンジン自体が カスタマイズ できる
6. プラグイン機能も備えている

https://web-camp.io/magazine/archives/12654

Smartyの利用方法

猫とパソコン

Smartyを利用するには、公式サイト(https://www.smarty.net/)からダウンロードしたファイルを、PHPから読み込める場所に設置します。

その後、PHPプログラムから require_once ‘libs/Smarty.class.php’; のように Smarty.class.php を読み込めばOKです。(Smarty.class.php がSmartyの本体です。)

基本構文

全てのテンプレートタグはデリミタによって囲まれます。デフォルトではデリミタは { と } ですが、これは 変更可能 です。Smarty では、デリミタ外の内容は静的コンテンツとして表示されます。Smarty がテンプレ ートタグを見つけると、解析を実行し、内容に応じた出力に置換します。

コメント

テンプレートのコメントはまずアスタリスクで囲まれ、次にそれを デリミタ タグで囲みます。
以下のような形式になります。

Smarty のコメントは、テンプレートの最終的な出力には表示されません。つまり、表示されたページのソースを見ても、コメントはありません。

※HTML のコメントは、ソースに残ります。

 {* コメントです *}

例)

{* Smarty コメントです。画面ページのソースには表示されません *}
<html>
<head>
<title>テスト</title>
</head>
<body>

{* Smarty コメント *}
<!– HTML コメント。これは画面ページのソースに表示されます –>

{* ヘッダファイル *}
{include file=’header.tpl’}

{* 変数 $includeFile の値は foo.php *}
<!– 本体コンテンツブロックを表示します –>
{include file=$includeFile}

{* コメントを入れ子にすることはできません *}
{*
<select name=”company”>
{* <option value=”0″>– none — </option> *}
{html_options options=$vals selected=$selected_id}
</select>
*}
</body>

変数

変数は、先頭にドル記号 $ を付けます。変数名には PHP の変数 と同様に英数字およびアンダースコアが使用できます。
配列の参照には、インデックスの数値もしくはそれ以外の文字を使用できます。オブジェクトのプロパティとメソッドの参照も同様です。Config ファイルの変数 にはドル記号を付けず、参照する際にはハッシュマーク # で囲むか、 $smarty.config 変数として指定します。

変数                  :{$foo}               <– 基本的な変数を表示
配列                  :{$foo[4]}            <– 配列の5番目の要素を表示
連想配列              :{$foo.bar}           <– “bar”というキーに対応する配列の値を表示
連想配列(動的)      :{$foo.$bar}          <– 変数barに格納されているキーに対応する配列の値を表示
オブジェクトプロパティ:{$foo->bar}          <– プロパティ “bar”を表示
オブジェクトメソッド  :{$foo->bar()}        <– メソッド”bar”の実行
configファイル変数(1) :{#foo#}              <– configファイル変数”foo”を表示
configファイル変数(2) :{$smarty.config.foo} <– {#foo#}と同じ
静的な値              :{“foo”}              <– 静的な値”foo”そのものを表します。
サーバ変数            :{$smarty.server.SERVER_NAME}

関数

すべての Smarty タグは、 変数 を出力したり関数を呼び出す動作をします。関数には、組み込み関数とカスタム関数があります。

組み込み関数とは Smarty の 内部で 動作する関数で、たとえば {if}、 {section} および {strip} などのことです。これらを変更したり修正したりすることはありません。

カスタム関数は プラグイン機構 で実装します。(プラグインを自作してももちろんOKです)これらは自由に修正したり、新たな関数を追加したりする事が可能です。有名なものでは、{html_options} や {popup} などがカスタム関数で存在します。

ただし、使い方はどちらの関数も構文は同じで、{funcname attr1=’val1′ attr2=’val2′} のように関数名とその 属性 をデリミタで囲みます。

{config_load file=’colors.conf’}
{include file=’header.tpl’}

{if $logged_in}
<font color=”{#fontColor#}”>{$name}さんがログインしました。</font>
{else}
{$name}さん、こんにちは。
{/if}

属性

ほとんどの 関数 には、 それらの動作を指定したり修正するための属性があります。Smarty 関数の属性は HTML の属性にかなり近いものです。属性には、静的な値や変数を使用することができます。

{include file=’header.tpl’ attrib_name=’attrib value’}{include file=$includeFile}{include file=#includeFile# title=’Smarty’}

{html_select_date display_days=yes}

{mailto address=’test@foo.com’}

<select name=’company_id’>
{html_options options=$companies selected=$company_id}

演算子

演算子は、変数の値に直接適用されます。

加算:{$foo + 1}
減算:{$foo – 1}
乗算:{$foo * $bar}
除算:{$foo / $bar}

複雑な例)
{$foo->bar – $bar[1] * $baz->foo->bar() – 3 * 7}

{if ($foo + $bar.test%$baz * 134232 + 10 + $b + 10)}

{assign var=”foo” value=”`$foo + $bar`”}

構文解析を回避する

Smarty の構文解析の対象にしたくない場合があります。典型的な例としては、 テンプレートに Javascript や CSS コードが含まれるときです。それらの言語が Smarty のデフォルトの デリミタ である { と } を使用するときに問題が発生します。

リテラルコンテンツを含めるには {literal}..{/literal} ブロックを使用します。または、Smarty の $left_delimiter および $right_delimiter を変更することでデリミタを独自変更し回避する方法もあります。

デリミタを独自に設定する例は以下です。

 <?php$smarty->left_delimiter = ‘<!–{‘;
$smarty->right_delimiter = ‘}–>’;$smarty->assign(‘foo’, ‘bar’);
$smarty->assign(‘name’, ‘Albert’);
$smarty->display(‘example.tpl’);

テンプレートでは以下のように使用します。

Welcome <!–{$name}–> to Smarty
<script language=”javascript”>
var foo = <!–{$foo}–>;
function dosomething() {
alert(“foo is ” + foo);
}
dosomething();
</script>

Smartyの機能

先に記したように、Smartyは Smarty.class.php を読み込んでから使用します。
このファイルに必要な命令が書かれているので、読み込むことによって色々な命令が利用できるようになります。

$smarty = new Smarty();

Smartyを使用するには、まずは Smarty クラスを呼び出します。具体的には以下のようになります。

これで $smarty にSmartyのオブジェクトが代入されます。以降はこのオブジェクトを参照することで色々な操作ができるようになります。

テンプレートの格納場所

template_dir プロパティで、テンプレートを格納する場所を指定します。この指定を行わなかった場合、標準では「templates/」 を格納場所とみなしますがテンプレート位置を明示的に指定したほうが管理しやすいと思います。

compile_dir プロパティで、コンパイル済みテンプレートを格納する場所を指定します。Smartyは、一度テンプレートを読み込むとPHPプログラムに変換(コンパイル)したものを保存します。次回からは変換済みのPHPプログラムを読み込むため、高速に動作します。この指定を行わなかった場合、標準では「templates_c/」 を格納場所とみなします。

ただし「template_dir」 と同様、明示的にテンプレートの位置を指定したほうがいいです。

Smartyの構成

Smartyを利用したサンプルで説明します。以下は画面に文字を表示するだけのプログラムです。

 <?phprequire_once ‘smarty/Smarty.class.php’;

$smarty = new Smarty();

$smarty->template_dir = ‘templates/’;
$smarty->compile_dir  = ‘templates_c/’;

$smarty->assign(‘test1’, ‘1行目です。’);
$smarty->assign(‘test2’, ‘2行目です。’);
$smarty->assign(‘test3’, ‘3行目です。’);

$smarty->display(‘test.html’);

?>

今回はこのファイルの名前は sample.php とします。こちらはいわゆる「動作内容」であり、「表示内容」は含みません。html タグなどは、他に用意するテンプレートファイルに書くことになります。

次にテンプレートファイル「test.html」を作成します。テンプレートファイルはPHPファイルと同じフォルダにあるtemplatesフォルダ内に配置します。(テンプレートファイルの位置は変更できます。後述します)

 <html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
<ul>
<li>{$test1}</li>
<li>{$test2}</li>
<li>{$test3}</li>
</ul>
</body>
</html>

PHPプログラムにアクセスすると、{$test1} ~ {$test3} の部分がそれぞれ「1行目です。」「行目」「行目」 に置き換えられて表示されます。このように、プログラム部分と表示部分を分割して作成することができるようになります。

よく使う構文

テンプレートの表示

display メソッドで、テンプレートを読み込んで表示することができます。例えば

$smarty->display(‘test.html’);

と書くと、template_dir で指定した場所にある test.html をテンプレートとして読み込み、表示します。

配列と連想配列

assign で変数内容を出力可能ですが、配列を割り当てることもできます。

<?php

require_once ‘smarty/Smarty.class.php’;

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

$fruits = array(‘リンゴ’, ‘ミカン’, ‘ブドウ’);

$smarty->assign(‘fruits’, $fruits);

$smarty->display(‘test.html’);

?>

テンプレートでは、{$fruits[0]} や {$fruits[1]} で配列の内容を添字参照することができます。

 <html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
<ul>
<li>{$fruits[0]}</li>
<li>{$fruits[1]}</li>
<li>{$fruits[2]}</li>
</ul>
</body>
</html>

assign は連想配列を割り当てることもできます。

 <?phprequire_once ‘smarty/Smarty.class.php’;

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

$fruits = array(‘apple’ => ‘リンゴ’, ‘orange’ => ‘ミカン’, ‘grape’ => ‘ブドウ’);

$smarty->assign(‘fruits’, $fruits);

$smarty->display(‘test.html’);

?>

テンプレートでは、{$fruits.apple} や {$fruits.orange} で連想配列のキーを元に参照することができます。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
<ul>
<li>{$fruits.apple}</li>
<li>{$fruits.orange}</li>
<li>{$fruits.grape}</li>
</ul>
</body>
</html>

条件分岐

テンプレートには条件分岐や制御文を書くことができます。基本的には、Smartyを利用するのはロジックとデザインの分離が目的なので、テンプレートに複雑なロジックを書くのは本末転倒です。

しかし、条件に応じて表示内容を切り替える場合など、デザインに関する簡単なロジックはテンプレート側で制御したほうがいい場合があります。

 <?phprequire_once ‘smarty/Smarty.class.php’;

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

$smarty->assign(‘sample’, 10);

$smarty->display(‘test.html’);

?>

テンプレートで、sampleの値によって表示を切り替えます。

 <html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
{if $sample == 10}<p>変数sampleの内容は10です。</p>
{elseif $sample > 5}<p>変数sampleの内容は5より大きいです。</p>
{else}<p>変数sampleの内容は5より小さいです。</p>
{/if}
</body>
</html>

このように if、elseif、else を使用することができますので
比較の方法などはPHPと同じです。

繰り返し

繰り返しも制御も可能です。

 <?phprequire_once ‘smarty/Smarty.class.php’;

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

$fruits = array(‘リンゴ’, ‘ミカン’, ‘ブドウ’);

$smarty->assign(‘fruits’, $fruits);

$smarty->display(‘test.html’);

$fruits配列に割り当てられたものを繰り返しですべてリスト出力します。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
<ul>
{foreach $fruits as $fruit}
<li>{$fruit}</li>
{/foreach}
</ul>
</body>
</html>

これを実行すると、リンゴ、ミカン、ブドウ がそれぞれリストで表示されます。PHPの foreach と同様、配列 $fruits の内容が先頭から順に $fruit という変数に代入され繰り返し処理されていきます。

繰り返し(連想配列)

連想配列に対して繰り返し処理もできます。

 <?phprequire_once ‘smarty/Smarty.class.php’;

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

$fruits = array(‘apple’ => ‘リンゴ’, ‘orange’ => ‘ミカン’, ‘grape’ => ‘ブドウ’);

$smarty->assign(‘fruits’, $fruits);

$smarty->display(‘test.html’);

 <html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>
<body>
<ul>
{foreach $fruits as $key => $value}
<li>{$key} … {$value}</li>
{/foreach}
</ul>
</body>
</html>

PHPの foreach と同様、配列 $fruits のキーと値が先頭から順に $key と $value という変数に代入され繰り返し処理されていきます。

他のテンプレートを読み込む

include を使用すると、現在のテンプレートに他のテンプレートを読み込むことができます。
例えば header.html というテンプレートを作成し、以下の内容を述しておきます。

 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>サンプル</title>
</head>

このテンプレートを読み込むには、以下のようにします。

<html>
{include file=’header.html’}
<body>
<p>{$test}</p>
</body>
</html>

このようなテンプレートを作成すると、{include file=’header.html’} の部分が header.html の内容に置き換わります。

現在のテンプレートで利用可能なすべての変数は、読み込まれたテンプレートでも利用することができます。これを利用すれば、全ページで共通のヘッダ部分を1つのファイルにまとめたりすることができます。上手く利用すれば、テンプレートの修正を効率よく行うことができます。

https://web-camp.io/magazine/archives/8535

まとめ

いかがでしたでしょうか。いきなりテンプレートエンジンというと身構えてしまうかもしれませんが慣れてくると、WEBページの構築が飛躍的に速くなるのはもちろん、修正や追加などの管理時間も大幅に削減されます。

なにより、同じようなページを作るにしても、コピー新規で作ったりして手間がかかる時間が無くなるのは精神的にもとても良いことだと思います。

Smartyにはプラグイン機構もあり、まだまだご紹介できていない機能がたくさんあります。慣れてきたら、ご自分でプラグインを導入したりして、色々試してみてください。

【インタビュー】未経験でもたった1ヶ月で営業からエンジニアとして転職!

未経験でも1ヶ月のプログラミング学習と手厚いキャリアサポートでエンジニアとして転職したWebCamp受講生にお話を伺いました。

「本当に1ヶ月でプログラミングを学習できるの?」
「未経験でもゼロからエンジニアになれるの?」

と疑問に思っている方は、是非この記事を読んでみてくださいね!

“未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5