投稿者: ShinUjin

Smartyは、PHPのテンプレートエンジンです。
公式日本語サイト：http://www.smarty.net/docsv2/ja/

PHPとHTMLが１つのファイルになっていると、エンジニアも、コーダーも大変です。
なぜかというと、コードも読みにくいし、一緒に作業も出来ません。
間違ってエンジニアがコードを触ってレイアウトが崩れたり、コーダーがphpの部分を触ってエラーに繋がったり、様々な問題が現れます。
これを防ぐための１つの方法が、テンプレートエンジンです。

Smartyは、基本的に TPL ファイルで保存します。
他にもコンパイルフォルダーが必要です。

tpl/

index.htmlをスマーティ化する場合は、基本的に以下のようになります。

index.php
tpl/index.tpl
tpl_c/

このまましてみたのに、動かない場合、tpl_cのパーミッションが757になっているか確認してみてください。
サーバーによって、777にしないといけない場合もありますが、基本的に757です。

Smartyの設置は SHIN の方で行いますので、気にしなくてもいいですが、
使い方はコーダーでも覚えて欲しいので、以下を中心に学んで下さい。

phpからのデーターを出力したい phpの方で、処理した結果をテンプレート（以下、tplで書きます）に渡します。
渡されていない値は表示出来ません。渡されたデータのみ出力が出来ます。
どうするのかですが、PHPの方は以下のようになっています。

PHP：

$my_name = "shin";
$smarty->assign('my_name', $my_name);

TPL：

<h1>My name is {{$my_name}}.</h1>

結果：

My name is shin.

次は、配列の場合です。 PHP:

$smarty->assign('Contacts',
    array('fax' => '555-222-9876',
          'email' => 'shin@accorder.co.jp',
          'phone' => array('home' => '555-444-3333',
                           'cell' => '555-111-1234')
                           )
         );

HTML:

FAX: {$Contacts.fax}<br>
EMAIL: {$Contacts.email}<br>
Phone(h): {$Contacts.phone.home}<br>
Phone(c): {$Contacts.phone.cell}<br>

結果：

FAX: 555-222-9876
EMAIL: shin@accorder.co.jp
Phone(h): 555-444-3333
Phone(c): 555-111-1234

次は、PHPから貰ったデータを可変してみましょう。
例えば、phpから、$my_date = “20170503 12:34:59”;というデータを貰った場合、日本風の日付に変えたい場合：

{{$my_date|date_format:"%Y年%m月%d日"}}

結果：

2017年５月3日

簡単に言うと、{{と}}に囲まれた変数の次に縦棒を入れ、コマンドを入れれば、わざわざPHPで処理しなくても Smarty の方で変えてくれます。

{{$変数|ここに変えたい処理を入れる}} 

日付だけではなく、文字制限、全て大文字にする、全て小文字にするなどは、よく使われています。

最後にincludeです。
例）/accorder/tpl/base_header.tplのヘッダーを別のテンプレートで作成され、利用する場合：

{{include file="$document_url/tpl/base_header.tpl"}}

$document_urlは、shinの方で作成しておくので、入れておけば適切な値が入ります。

例）/accorder/blog/tpl/blog_header.tplのヘッダーを別のテンプレートで作成され、利用する場合：

{{include file="$document_url/blog/tpl/blog_header.tpl"}}

このように、ヘッダーやフッターなどをテンプレート化しておくと、
修正も１回で済むので楽になります。 以下、公式サイトと、アコーダーのSmartyの違いです。
jQueryなどとの問題もあり、{$variable}を{{$variable}}に変えました。
入力の文字を減らすため、templates を tpl に変え、templates_c を tpl_c に変えました。
公式サイトで確認するときは、間違いないようにお願いします。

公式	アコーダー
{$variable}	{{$variable}}
templates	tpl
templates_c	tpl_c

1. Chrome DevToolsを開く（⌘ + ⌥ + I）
2. DevToolsの右側のメニューをクリックします
3. 「More tools」から「Rendering settings」を選択します
4. 「Emulate print media」にチェックを入れます DevToolsを開いたらescキーでConsoleを開いて、左端のメニューから「Rendering settings」を選ぶという方法もあります。