• WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCamp_インタビュー
    「自信の持てるスキルを得たい!」内定辞退した女子大生がプログラミングを学習したワケ。
    2018.04.28
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26
  • WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15
  • WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCampPro_インタビュー
    未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
    2018.03.10
  • WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

Web Camp【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でWebサービス等作りたい方
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WebCampPro転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアを3ヶ月で目指すプログラミングスクールです。
9月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

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の特徴

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

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

コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】
2018-03-22 23:28
今回の記事では、独学でPHPを1年半学習し、その後WebCampを受講して未経験からエンジニアへと転職された佐々木さんにお話を伺いました。 <プロフィール> 佐々木 祐樹 さん(2...

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つのファイルにまとめたりすることができます。上手く利用すれば、テンプレートの修正を効率よく行うことができます。

【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
2018-01-15 13:23
今回の記事では、WebCampで1ヶ月間Rubyを学習し、Webエンジニアとして転職した卒業生の田中さんにお話を伺いました。 <プロフィール> 田中 デニス 昭彦さん(...

まとめ

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

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

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

WebCamp・Webスクについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。Webスクは半年間で未経験から即戦力エンジニアを育成する転職保証付きのプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

8月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

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

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

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

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

“未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
2017-10-04 10:26
今回の記事では、未経験からWebCampを1ヶ月受講し、その後エンジニアとして転職をした喜田さんにお話を伺いました。 <プロフィール> 喜田 大介 さん (28歳) 大学時代はプ...
関連キーワード
学習の関連記事
  • プログラミング効率を上げるエディタの選び方とオススメ
  • プログラミングコンテストの応募内容と対策方法を徹底解説
  • 【中学生・高校生向け】プログラミング初心者にオススメの言語と教室
  • 【初心者向け】プログラミングを勉強するサークル7選!
  • プログラミング習得時間はどのくらい必要なのか?
  • プログラミングは単なるブームではない。学ぶ意味を理解しよう

当サイトで人気のオススメ転職サービスTOP3

1位 マイナビエージェント×IT

おすすめポイント

・平日忙しい人も、土曜日開催の個別キャリア相談会に参加できる

・職種や仕事内容(要件定義、上流工程から携わる仕事など)の要望が細かくできる
・マイナビの規模を活かした豊富で幅広い求人数

マイナビエージェント×ITの登録はこちら

2位 レバテックキャリア

おすすめポイント

・求人登録数4,000件以上

・エンジニア未経験、経験者両方に対応

・有名企業の採用担当者インタビューがみれる

・一次面接NGからの内定実績もあるほど、内定率が高い

レバテックキャリアの登録はこちら

 3位 type転職エージェント

おすすめポイント

転職者の71%が年収アップ

・IT系企業、特にエンジニアに限らず営業職の求人も充実している

各職種専門の転職アドバイザーが援助

type転職エージェントの登録はこちら

おすすめの記事
Infratop
こんにちは。インフラトップの大島です。 17日(土)にわたしの母校である茨城県立日立第一高等学校で約80名の高校一年生に向けて「スタートアッ...