こんばんわ、中の人ですぉ。
今回は宣言どおりスマーティーをやっちゃう系。
,-'"ヽ
/ i､ /ﾆＹﾆヽ ＿/＼／＼/＼／|＿
{ ﾉ "' ゝ /（ ﾟ )( ﾟ ）ヽ ＼ ／
／ "' ゝ ／::::⌒｀´⌒::::＼ ＜ ピカチュー！！＞
/ i ,-）＿＿＿（-，| ／ ＼
i ､ |-┬-| / ￣|／＼/＼/＼/￣
/ `ー'´ /.
i' /､ ,i..
い _／ `-､.,, ､_ i
/' / _/ ＼`i " /ﾞ ./
(,,／ , ' _,,-'" i ヾi__,,,...--t'" ,|
,/ ／ ＼ ヽ､ i |
(､,,/ 〉､ ､,} | .i
`` ` ! ､､＼
!､_n_,〉>
…はおいといて。まぁスマーティは結構有名（そうでもない？）なのかデザイナの人とかだと聞いた覚えがあるのであ？
とりあえずＭＶＣで言うならＶＣのみ。単純にHTMLとPHP分けるってだけだしね（ざっくばらんに言うと。）
じつはこいつはフレームワークというよりテンプレートエンジンてやつなのさー。
ぶっちゃけ見た目の部分を作ってそれをＣで使いまわす…というイメージだから･･･なのか？（ぇ
テンプレートを使ったビューの作成の起源はスマーティにあるらしい。本当かいな。
さて当然使うとなるとまたインスコが必要になるわけですが今回も例によってXAMPP環境へのインスコ。
面倒な設定無しでLAMP環境が整うしね。つかAMPだな。正確に言うとWAMP環境？
〃´⌒ヽ
. , -―― ﾒ／_´⌒ヽ
／ ／￣ ´ヽ ヽ
. / , /// ﾄ. ! ､ 丶ヽ
l / /（(（リ从 ﾘﾉ）） '
| i l ． ヽﾉ ．V l
l ,=! l /// ///l l ねんがんのフレームワークをてにいれたぞ！
l ヾ! ', l ヽ_フ l l
| ヽヽヽ //
l ヾ≧ , ＿_ , イ〃
li （´｀)l {ﾆ0ﾆ}､ |＿"＿＿__
li /l, l└ ﾀl」／l´ `l
ﾘヽ/ l l__ .／ |___＿＿＿___|
,/ L__[]っ ／ ／
::::::::/ ヽ、 :: ::: ::: :::::::::::::::::::::::::::::::::
:::::/ lﾊ ::: : :: :::::::::: :::::::::::::::::::::::::::::
::::l l /ﾉﾘ ::: : :: ::::::::::: :::::::::::::::::::::::::::::
:::| /） / ::: : :: ::::::::: :::::::::::::::::::::::::::::
::l /ｲ/| . :. :. .:: : :: :: :::::::: : ::::::::::::::::::
/ / ||/ /￣￣￣￣￣７l::::::::::::::::::::
i /_,／i!/ / l::::::::::::::::
l 人 / すまーてー / /::::::::::::::::
l / /⌒ヽ / /::::::::::::::::
l /iｌ | ） / /::::::::::::::::
ll l i! ｀ｰ、＼＿＿＿ / ｎ/::::::::::::::::
lヽ l |＼. ＼ /⌒〉::::::::::::::::
まずはすまーてーを入手しよう！
http://www.smarty.net/download.php
のサイトへレッツアクセスヽ( ^ω^)ﾉ ｻｸｾｽ!
Latest Stable Releaseとあるのが最新版のすまーてーになります。現段階(2009/6段階)で2.6.26。
linux環境ならtar.gz、windows環境ならzipでくれ!!を入手。
迷うことなくzipをＤＬ。リンク押下しる。
圧縮されたフォルダを解凍するとSmarty-2.6.26のフォルダ内にSmarty-2.6.26フォルダが展開される。
とりあえず中のほうのSmarty-2.6.26をCドライブ直下へ移動させませう。
三|三
イ `＜ ,.．-──- ､ _|＿
￣ ／. : : : : : : : : : ＼ |＿ ヽ
∧ /.: : : : : : : : : : : : : : ヽ （j ）
/ ＼ ,!::: : : :,-…-…-ミ: : : : :',
{:: : : : :i '⌒' '⌒' i: : : : :} _ヽ＿∠
└┼┘ {:: : : : | ｪｪ ｪｪ |: : : : :} ｌニl ｌ ｜
. |＿|＿| , ､ { : : : :| ,.、 |:: : : :;! l─| l 亅
_＿ ヽ ヽ. _ .ヾ: :: :i r‐-ﾆ-┐ | : : :ﾉ _
／ } >'´.-!、 ゞイ! ヽ 二ﾞノ ｲゞ‐′ l ｀ヽ
´⌒) | －! ＼` ｰ一'´丿 ＼ l/⌒ヽ
-' ﾉ ,二!＼ ＼___／ /｀丶､ _ノ
/＼ ／ ＼ /~ﾄ､ ／ l ＼
/ 、 ｀ソ! ＼/l::::|ハ／ l-7 _ヽ
/＼ ,へi ⊂ﾆ''ー-ゝ_`ヽ、 |_厂 _ﾞ:、
∧ ￣ ,ﾄ｜ >‐-￣｀ ＼. | .r'´ ヽ、
,ﾍ ＼_,. ' | | 丁二＿ 7＼､|ｲ _／￣ ＼
i ＼ ハ∟ |::::|`''ｰ-､,_/ /＼＿ _／⌒ヽ
これでC:\smarty-2.6.26というパスにすまーてーが配置されたわけです。
では使用する前にＰＨＰ側で設定を修正します。
この修正しないとドナルド☆マジックで消されます。気をつけてね☆ミ
XAMPP環境の場合C:\xampp\apache\binにあるphp.iniを修正します。
include_path = ".;C:\xampp\php\pear\"の一行を見つけ出し、次のように修正しましょう。
include_path = ".;C:\xampp\php\pear\;C:Smarty-2.6.26\libs"
すでに他の値がインクルードされている場合には、;で区切ってパスを追記しましょう。デフォでpearパスがついてた･･･。
修正後に鯖を再起動すればすまーてーが使えるようになります。
でぁまずはすまーてーを使う為のフォルダを用意しましょう。
ＷＥＢ鯖の公開ディレクトリに『smartyapp』というフォルダを作成しませう。XAMPPなら『htdocs』フォルダね。
次にスマーティで必要になるフォルダ『templates』『templates_c』という２つのフォルダを用意しましょう。
もち『smartyapp』フォルダの中にね。
これらは前者がテンプレートファイルを配置する場所、後者がすまーてーがコンパイルしたファイルを置く場所になります。
すまーてーは用意されたテンプレ（html）とphp（コントローラー）部分をコンパイルして出力。コンパイル後のファイルが作成された後は出力スピードがうｐします。まぁコンパイル後のファイルをキャッシュ代わりにするわけだしね。
でまぁその点について注意。
上記のようにコンパイル後のファイルをキャッシュ代わりに使うので、もし一度すまーてーで出力させたビューなりコントローラーなりを修正する場合にはコンパイルファイルを削除しておくことをオヌヌメします。
中の人が始めてすまーてーを使った際にハマった。
「修正したのに、反映されない…だと…。」なんてことになるのを回避するために「修正」→「コンパイルファイル抹殺!!!killyou」を習慣づければおｋ
_,ィ､ ,r､__
,.ﾍｰ'´ i ｀´/ ｀i_
/ヾ、 ヽ、 i / ／ヽ
_ｨ､〉 > ´￣ ￣ ｀ く ,ゝ、
}、 ,>'´ ､ ヽ.／｀ヽ
┌! / / ｉ 「｀i ヽヽ ヽ }
Ｙ ! | | l i i l i ',__,.ゝ
,' | | | !ｌ l | l l !
i ! | | | | j＿__j | |i i!
|ｉ! l ,.|‐Ｔ丁i! ﾊlj, --!｀ﾄlノ、||
| ! ! ﾚ'ｉ´｀j "i´ ｀iヽ, i || _
| l |i iバ__ｿ Ｌ__ｿ /.ノ |! _ヽ)
| | |ｌ |､//// ' ///// |! |i ヽ)
!ハ |! |,ゝ' ´￣￣ ｀ く ﾚy'|!
__,ノ ﾚ'ヽiﾊ ／ ＼｝'´￣ ｀ヽ､
ィ´￣／ ,べY 知っているが Ｙ｀i__ ＼
〉／ / , ､ヽ お前の態度が ／_｀ヽ＼ ＼
,ｨ'ん、 ／ ! '´__ ヽ 気に入らない /´__,.｀ ', ＼ ｧ'｀
｀ヽ､/ｰ' /! __｀ヾ! ﾚ'´ _,. ! ＼ i
/ｰ-ｨ､ ｨ__! ___｀フ / ヽ二 /7 _ｉ弋
/ 辷j ! ヽ ／ / / / } j´ 〉
ヽ、 冫 ヽ__ｭ_y＼ ／ / ／ヽﾍ／え´ /
＼'´｀ ｀}ｰ-､_,ゝくi ヽ､ _＿＿_ ,. イｨ_,､ __う'´＿_／
, ｀＞ｬ,｀Yｰ-‐'^ |ﾆ＝ｰ- ｰ-/ ｀＾7 ,ゝ､ヽ
／／/ l ! | / } / | iﾊ_j
く／//f´￣l/ | i y /-､| |
// | ┌ヽ. / ｀ー-＝'´ _| ／｀ | |＼
ｉ l | ,ゝ,ハ ／ ´,ﾊ ／〉 ﾚ' ヽ
（ﾟдﾟ）･･･。
さて、それであ実際に触っていってみましょうか。
上でも言ったようにすまーてーはVCからなっているので当然ＶＣそれぞれのファイルが必要です。説明するまでもないか
｢￣ ｀ヽ､ ＿_＿_＿_
Ｌ -‐ '´ ￣ ｀ヽ- ､ 〉
／ ヽ＼ /
／/ / / ヽヽ ヽ〈
ヽ､レ! { ﾑ-t ﾊ li ､ i i }ﾄ､
ﾊＮ | lヽ八l ヽｊﾊVヽ､ｉ j/ l !
/ﾊ. ｌ ヽｋ=＝ , r= ､ﾉﾙｌ lＬ」
ヽN､ﾊ ｌ ┌‐┐ ﾞl ﾉl l
ヽﾄjヽ､ ヽ_ノ ノ//ﾚ′
r７７７７７７７７７tﾉ｀ ｰ r ´ﾌ/′
ｊ´ﾆゝ ｌ|ヽ _/｀＼
〈 ‐ 知ってるが ｌﾄ、 / 〃ゝ、
〈､ﾈ.. .ｌＦ Ｖ=＝"／ ｲl.
ト |お前の態度が とニヽ二／ ｌ
ヽ.|l 〈ｰ- ! ｀ヽ. ｌ
|l気に入らない ｌﾄﾆ､_ﾉ ヾ、!
|l_＿_＿_＿_＿__ｌ| ＼ ソ
まずテンプレート部分の作成から。
『template』フォルダの中に「index.tpl」というファイルを作成しませう。これがビュー部分になります。
index.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$title}</title>
</head>
<body>
<h1>{$headline}</h1>
<p>{$message}</p>
</body>
</html>
ちなみに文字コードはUTF-8。
さて上記テンプレートには３つの変数が埋め込まれています。{$title}{$headline}{$message}の３つです。
これらはテンプレートタグと呼ばれるもので、コントローラーで変数を定義すれば該当箇所に変数の値が埋め込まれることになるのです。
ではコントローラー部分の作成に取り掛かりませう。コントローラーファイルは、『smartyapp』内に「index.php」という名前で作成します。
index.php
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('title','welcome to Smarty');
$smarty->assign('headline','Smarty Page');
$smarty->assign('message','これはsmartyのテンプレートで表示した画面です');
$smarty->display('index.tpl');
?>
それぞれ作成が終わったら、http://localhost/smartyapp
へアクセスしてみませう。ヽ( ^ω^)ﾉ ｻｸｾｽ!
表示成功すればおｋ。
ではindex.phpでしている処理の説明をしませう。
まず一行目ですまーてーのクラスファイルをロードします。
すまーてーのクラスファイルは、Smartyがインストールされているフォルダの『lib』内にあります。
それをrequire_onceで読み込んでいるわけです。
続いて$smarty = new Smarty();でインスタンスを生成。
そして変数に値をセットしていく作業。
$smarty->assign('title','welcome to Smarty');
$smarty->assign('headline','Smarty Page');
$smarty->assign('message','これはsmartyのテンプレートで表示した画面です');
$smarty->assign（'変数名','ないよう');でビューで埋め込んだ{$変数名}に'ないよう'を代入。
以下messageまで同上。
最後に$smarty->display('テンプレ名')で画面出力。終了。そんだけ。
_,,:-ｰ''"￣￣￣ `ヽ､
,r'" `ヽ.
__,,::r'7" ::. ヽ＿
ﾞl | :: ﾞ） 7
| ヽ`l :: ／ノ ）
.| ヾミ,l _;;-＝=ｪ;､ ,,,,,,,,,,,,,,,＿ ﾋ-彡|
〉"l,_l "-ー:ｪｪヮ;::) f';;_-ｪｪ-ニ ﾞﾚr-{ ／￣￣￣￣￣￣￣￣
| ヽ"::::'' ￣´.::;i, i `''￣ r';' } | 久々にﾜﾛﾀ
. ﾞN l ::. ....:;イ;:' l ､ ,l,ﾌ ﾉ | Codeigniterの後だと
. |_i"ヽ;:...:::／ ﾞ'''=-='''´｀ヽ. ／i l" ＜ スマーティで説明すること
.| ::ﾞl ::´~＝==' '==＝''` ,il" .|'". | が少ないないから困る
.{ ::| ､ :: `::=====::" , il | ＼＿＿＿＿＿＿＿＿
/ﾄ､ :|. ﾞl;: ,i' ,l' ノﾄ､
／ .| ＼ゝ､ﾞl;: ,,/;;,ノ;r'" :| ＼
'" | `''-､`'ー--─'";;-'''" ,| ＼_
困ります。
そもそもassignの説明。（英単語としての説明ね。）
assign
動詞
１）割り当てる，あてがう
２）任務・仕事などを付与する
３）財産・権利などを与える，【法律】譲渡する
４）人を指名する，任命する。物を充当する，使用する
５）時や場所などを，指定する，定める，設ける
６）～の帰属を定める
７）～に帰す，～のせいにする
８）理由や原因などを挙げる，指摘する，掲げる
そのまんまやないですか。
'title'に'すまーてーへようこそ'をあてがう。
'headline'に'すまーてーぺーじ'を付与する。
'message'へ'これは以下略'を与える
(以下略
$smarty->display('index.tpl');
部分はテンプレファイル(index.tpl)をロードしてレンダリングしてブラウザに表示。
以上のように、テンプレートエンジンを使うと、ビューであるテンプレートから処理を切り離すことができます。
ですが、切りはなされたプログラム部分には、実はまだ問題が残されています。それは、表示される細かな値がプログラムに混在しているという点です。
そもそもテンプレート自体、ビューとコントローラーにきれいに分け、わかりやすくメンテナンスしやすい構造にすることが目的のはずです。
ですが先ほどテンプレートに変数を埋め込んで表示したタイトルやメッセージなどはプログラムの中に直接埋め込まれています。
後から表示される内容を変更したり、コードを書き直すことになったりした場合に、それでは困るわけです。
つまるところこうした画面に表示する値については設定ファイルとしてまとめておくことも可能です。
設定ファイルに変数名と値を記述しておき、それをロードしてテンプレートに表示させる。
後でもし修正が必要になっても、プログラムには触らずに表示される内容だけを書き換えることが可能です。
_,,:-ｰ''"￣￣￣ `ヽ､
,r'" `ヽ.
__,,::r'7" ::. ヽ＿
ﾞl | :: ﾞ） 7
| ヽ`l :: ／ノ ）
.| ヾミ,l _;;-＝=ｪ;､ ,,,,,,,,,,,,,,,＿ ﾋ-彡|
〉"l,_l "-ー:ｪｪヮ;::) f';;_-ｪｪ-ニ ﾞﾚr-{ ／￣￣￣￣￣￣￣￣
| ヽ"::::'' ￣´.::;i, i `''￣ r';' } | いちいち修正するものアリだが
. ﾞN l ::. ....:;イ;:' l ､ ,l,ﾌ ﾉ | それではテンプレートを使う意味
. |_i"ヽ;:...:::／ ﾞ'''=-='''´｀ヽ. ／i l" ＜ がなくなるから困る
.| ::ﾞl ::´~＝==' '==＝''` ,il" .|'". |
.{ ::| ､ :: `::=====::" , il | ＼＿＿＿＿＿＿＿＿
/ﾄ､ :|. ﾞl;: ,i' ,l' ノﾄ､
／ .| ＼ゝ､ﾞl;: ,,/;;,ノ;r'" :| ＼
'" | `''-､`'ー--─'";;-'''" ,| ＼_
困る。
それでは設定ファイルを作ってみよう。
『smartyapp』フォルダに新たに『configs』というフォルダを作成しよう。
これが設定ファイル置き場になる。
この中に、「index.conf」という名前で下記の内容のファイルを作成しよう。
index.conf
[index]
title = "Welcome to Smarty"
headline = "Smarty Page."
message = "これは、Smarty設定ファイルから情報を読み込んで表示したものです。"
ここでは[index]という項目の後にいくつかの変数に値を代入する文が続きますが、この[index]というのは「セクション」と呼ばれるものです。
これは設定ファイル内をいくつかの領域に分ける区切りの様なものです。
設定ファイルでは、このようにセクションごとに変数へ値を代入し、必要に応じてセクションごとに変数が呼ばれることになります。
また、セクションをつけずに作成された変数は、"グローバル変数"と呼ばれる変数になり、セクションを指定せずとも呼ばれるようになります。
それぞれの値は、 変数 ＝ 値 という形式で記述されます。
値はイコールの後にそのまま書くか、ＰＨＰの様に""でくくって書くかします。
ではテンプレートでコンフィグから変数を読み込むように修正しましょう。
index.tplの中身を次のように修正。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$title}</title>
</head>
<body>
<h1>{$headline}</h1>
<p>{$message}</p>
</body>
</html>
↑修正前↓修正後
{config_load file='index.conf' section='index'}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{#title#}</title>
</head>
<body>
<h1>{#headline#}</h1>
<p>{#message#}</p>
</body>
</html>
注意すべきはHTMLタグ(DOCTYPE宣言)前にコンフィグファイルを読みに行っている事と、テンプレートの変数の記述が{$変数名}から{#変数名#}になっている点でしょうか。
設定ファイルから読み込んだ変数は通常の変数とは使い方がやや違います。
見ればわかるとおり、変数は#でくくってあります。通所の変数とは書き方が異なるので注意してください。
一行目ではconfig_loadという関数を使い、index.confで指定した変数を読み込んでいます。
|┃三 ,ｨ, (fー--─‐- ､、
|┃. ,ｲ/〃 ヾ= 、
|┃ N ｛ ＼
|┃ ﾄ.l ヽ l
ｶﾞﾗｯ.|┃ ､ゝ丶 ,..ｨ从 |
|┃ ＼`.、_ _,. _彡'ﾉﾘ__,.ゝ、 | ／￣￣￣￣￣￣￣￣￣￣￣￣￣
|┃三 ｀ゞf‐＞ｎ;ﾊ二r^ｧｎj＜ y=ﾚヽ ＜ 話は聞かせてもらったぞ！
|┃. |fjl、 ｀￣ﾘj＾ヾ) ￣´ ﾉ ﾚ ﾘ | 人類は滅亡する！
|┃三 ヾl.`ｰ- べｌ,- ｀ ｰ-‐' ,ン ＼＿＿＿＿＿＿＿＿＿＿＿＿
|┃ l r─‐-､ /:|
|┃三 ﾄ､ ｀二¨´ ,.ｲ |
|┃ _亅::ヽ、 .／ i :ﾄ､
|┃ -‐''｢ F′:: `:ー '´ ,.' ﾌ ＞ｰ､
|┃ ﾄ､ヾ;､..__ , '_,.／ ／l
滅亡されても困ります。
最後に、下記のようにindex.phpを修正します。
index.php
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('title','welcome to Smarty');
$smarty->assign('headline','Smarty Page');
$smarty->assign('message','これはsmartyのテンプレートで表示した画面です');
$smarty->display('index.tpl');
?>
↑修正前↓修正後
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->display('index.tpl');
?>
注意!ちなみにフォルダ名を『configs』ではなく『config』としてしまった場合すまーてーエラーが発生する。
そんなミスするの自分くらいか||orz
うまくいくと表示される。
さて、では次の段階として読み込んだ設定を編集してみよう。
ヽ|/
／￣￣￣｀ヽ、
/ ヽ
/ ＼,, ,,／ |
| （●） （●）||| |
| /￣⌒￣ヽ U.| ・・・・・･･･ｺﾞｸﾘ。
| | .ｌ~￣~ヽ | |
|U ヽ ￣~￣ ﾉ |
| ￣￣￣ |
設定ファイルは以上のようにビューで読み込むだけで直接使えてしまう便利なものである。
「用意しておいた値をシンプルに表示する」だけなら、それこそ完璧だろう。
問題として、読み込んだ値に処理をかけ、その処理した後の値を表示したい、となった場合が問題である。
なんせ、処理をかけようにも直接ビューが読みに行ってしまうため、処理の掛け様がない。これは困る。
_,,:-ｰ''"￣￣￣ `ヽ､
,r'" `ヽ.
__,,::r'7" ::. ヽ＿
ﾞl | :: ﾞ） 7
| ヽ`l :: ／ノ ）
.| ヾミ,l _;;-＝=ｪ;､ ,,,,,,,,,,,,,,,＿ ﾋ-彡|
〉"l,_l "-ー:ｪｪヮ;::) f';;_-ｪｪ-ニ ﾞﾚr-{ ／￣￣￣￣￣￣￣￣
| ヽ"::::'' ￣´.::;i, i `''￣ r';' } | 久々にﾜﾛﾀ
. ﾞN l ::. ....:;イ;:' l ､ ,l,ﾌ ﾉ | 読み込む代わりに処理の余地がない
. |_i"ヽ;:...:::／ ﾞ'''=-='''´｀ヽ. ／i l" ＜ のが設定ファイルなんだよな
.| ::ﾞl ::´~＝==' '==＝''` ,il" .|'". | 処理がかからないから困る
.{ ::| ､ :: `::=====::" , il | ＼＿＿＿＿＿＿＿＿
/ﾄ､ :|. ﾞl;: ,i' ,l' ノﾄ､
／ .| ＼ゝ､ﾞl;: ,,/;;,ノ;r'" :| ＼
'" | `''-､`'ー--─'";;-'''" ,| ＼_
困る。ということで。
それをなんとかしませう。
実は、プログラム側で設定ファイルをロードし、それを処理した上でビューに渡すという芸当ができるのですＹＯ。
ならはじめからそうしろと小一時間ｒｙ
それではindex.phpを修正していきませう。
設定ファイルをロードし、各変数の前後に<div>タグをつけて表示するようにしましょう。
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->display('index.tpl');
?>
↑修正前↓修正後
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->config_load('index.conf','index');
$smarty->assign('title',$smarty->get_config_vars('title'));
$smarty->assign('headline',"<div style=\"background-color:#CCCCFF; font-size: 12pt;\">".$smarty->get_config_vars('headline')."</div>");
$smarty->assign('message',"<div style=\"color:#FF0000\">".$smarty->get_config_vars('message')."</div>");
$smarty->display('index.tpl');
?>
テンプレート側は設定ファイル変数ではなく、プログラムから渡される変数を表示するように変えましょう。
設定ファイルではなく、プログラムから渡されてくるので、変数の形式を変更します。
{config_load file='index.conf' section='index'}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{#title#}</title>
</head>
<body>
<h1>{#headline#}</h1>
<p>{#message#}</p>
</body>
</html>
↑を↓へ修正。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$title}</title>
</head>
<body>
<h1>{$headline}</h1>
<p>{$message}</p>
</body>
</html>
うまくいくと↑のように表示される。
index.phpでは、$smarty->config_load(設定ファイル名,セクション名);という形式でコンフィグを読み込んでいます。
つまりテンプレート側でやっていた{config_load...}という部分をプログラム側でやると上記の様な書式になる、ということですYO
つぎに、"リテラル"というものについて。
自分が最初にすまーてーを使用した際にこの理解がなかった為、「すまーてーじゃ<style>を直で指定できないのかＹＯ!」なんておもったりしたものですが。
すまーてーを使用する際に注意しなければならないのが｛｝を使用した表現です。
例えばJavaScriptやCSS等がこれにあたるわけですが。
もし{}が含まれたものがテンプレートに混在した場合に正しくレンダリングが行われずにエラーとなってしまいます。
＿＿＿_
／:::::::::: u＼
／:::::::::⌒ 三. ⌒＼
／:::::::::: （ ○）三（○）＼
|::::::::::::::::⌒（__人__）⌒ | ＿＿＿＿＿＿＿_
＼:::::::::: ｀ ⌒´ ,／ .| | | ＜エラー!!エラー!!エラー!!エラー!!エラー!!
ノ::::::::::u ＼ | | |
／::::::::::::::::: u | | |
|::::::::::::: ｌ u | | |
ヽ:::::::::::: -一ー_~､⌒)^),-､ | |_＿＿＿＿＿＿__|
ヽ::::::::＿＿＿,ノγ⌒ヽ)ニニ-￣ | | |
それを避ける為にあるのがリテラルというものです。
{literal}リテラルとされる部分{/literal}
という指定の仕方をします。
{literal}と{/literal}に囲まれた部分はリテラルと判断され、そこに{}が含まれていてもそのまま表示されるようになります。
であ実際にリテラルってみましょう。
テンプレートを、設定ファイルとCSSを組み合わせて表示スタイルを変更します。
まずは設定ファイルに必要な値を用意しておきませう。「index.conf」を次のように修正。
[index]
title = "Welcome to Smarty"
headline = "Smarty Page."
message = "これは、Smarty設定ファイルから情報を読み込んで表示したものです。"
↑を↓へ変更。
[index]
title = "Welcome to Smarty"
headline = "Smarty Page."
table_style = background-color:#EEEEEE; padding: 3px;
th_style = color: #FFFFFF; background-color:#006633; padding:0px 10px;
msg_style = color: #CC0000;
テンプレートのテーブルとメッセージのスタイルを変更できるようになったわけです。
次。
テンプレのindex.tplを修正しませう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$title}</title>
</head>
<body>
<h1>{$headline}</h1>
<p>{$message}</p>
</body>
</html>
↑修正前↓修正後
{config_load file='index.conf' section='index'}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{#title#}</title>
<style>
{literal}
table{{/literal}{#table_style#}{literal}}
th{{/literal}{#th_style#}{literal}}
.msg{{/literal}{#msg_style#}{literal}}
{/literal}
</style>
</head>
<body>
<h1>{#headline#}</h1>
<pre><p class="msg">{$message|escape}</p></pre>
<table>
<form method="post" action="index.php">
<tr><th>名前</th>
<td><input type="text" name="name" size="40"></td></tr>
<tr><th>アドレス</th>
<td><input type="text" name="mail" size="40"></td></tr>
<tr><th>電話番号</th>
<td><input type="text" name="tel" size="40"></td></tr>
<tr><td></td>
<td><input type="submit" value="送信"></td></tr>
</form>
</table>
</body>
</html>
残るindex.phpを次のように修正してください。
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->config_load('index.conf','index');
$smarty->assign('title',$smarty->get_config_vars('title'));
$smarty->assign('headline',"<div style=\"background-color:#CCCCFF; font-size: 12pt;\">".$smarty->get_config_vars('headline')."</div>");
$smarty->assign('message',"<div style=\"color:#FF0000\">".$smarty->get_config_vars('message')."</div>");
$smarty->display('index.tpl');
?>
↑修正前↓修正後
<?php
require_once('Smarty.class.php');
$smarty = new Smarty();
if($_POST != null){
$smarty->assign('message',implode("\n",$_POST));
}else{
$smarty->assign('message','入力してください。');
}
$smarty->display('index.tpl');
?>
であindex.tplで使われている機能について説明しますぉ。
{literal}
table{{/literal}{#table_style#}{literal}}
th{{/literal}{#th_style#}{literal}}
.msg{{/literal}{#msg_style#}{literal}}
{/literal}
の部分ですＹＯ!
どう見てもリテラルです。大変ありがとうございました。
ちょいと入り組んでますが、全体を{literal}{literal}で囲み、それぞれの{}内の部分をリテラルからはずすように記述されています。
つまりtable{{#table_style#}}とあった場合table{と}部分のみリテラル指定、{#table_style#部分はそのままレンダリングされるようになっているわけです。
このように面倒ですがリテラル指定を細かくかけてやることでCSSもJavaScriptも使用することができるようになるわけですYO!
最後に一つ、謎の$message部分についての説明。
<p class="msg">{$message|escape}</p>
で{$message|escape}となっているわけですが、この|escapeって何じゃ!_とかなったと思われる。
この|escapeは、変数修飾子と呼ばれるもので、変数に何らかの設定を行って表示されるのに使います。
このescapeは「|」の前にある変数をエスケープ処理して表示する役割を持っています。
／￣￣＼
／ _ノ ＼
| （ ●）（●）
| （__人__）
| ｀ ⌒´ﾉ 学生時代に打ち込んだものは？
| }
ヽ }
ヽ､.,＿＿ __ノ
_, ､ -― ''"::l:::::::＼ｰ-..,ノ,､.ﾞ,i ､
/;;;;;;::ﾞ:':､::::::::::::|＿:::;､>､_ l|||||ﾞ!:ﾞ､-､_
丿;;;;;;;;;;;:::::i::::::::::::::／:::::::＼ﾞ'' ﾞ||i l＼>::::ﾞ'ｰ､
. i;;;;;;;;;;;;;;;;;;;;;;|::::::::::::::＼::::::::::＼ .||||i|::::ヽ::::::|:::!
＿＿＿_
／ ＼
／ ─ ─＼
／ （●） （●） ＼ キーボードです
| （__人__） |
＼ ｀ ⌒´ ／
,,.....イ.ヽヽ、___ ーーノﾞ-､.
: | '; ＼_____ ノ.| ヽ i
| ＼/ﾞ（__)＼,| i |
＞ ヽ. ハ | |｜
とりあえずすまーてー前編は以上で終了。
(´Д｀;)予想以上に長くなってびっくり。とりあえず後編ですまーてーは完結予定す。
（ ﾟωﾟ）ﾉｼ TO BE CONTINUED!!
