Smartyを利用したもっともシンプルなWeb制作の環境づくり

Smarty

発端 -Smartyはデザイナーにもありがたい-

中・大規模の開発案件で、ビュー（UI・デザイン）を担当することもあって、僕にとって、Smartyを利用したコーディングは馴染み深いものになりました。
Smartyに慣れてしまうと機能系・開発系の案件だけでなく、静的なWebサイト制作にも利用したくなってしまうような便利な機能が満載です。

そこで、デザイナーさん視点からSmartyを利用したもっともシンプルでスマート（スマーティ？）な制作環境を用意できれば、共感してくれる方も中には居るんじゃないかな。
などと思い立ち、はてなダイアリーデビューをしてしまった次第です。

サンプルファイル一式のダウンロード

下記にサンプルファイル一式をＵＰいたしました。
ディレクトリやファイル構造などの説明ばかりなので、予めＤＬいただいたほうが分かりやすいかもしれません。

Smarty Dev ver0.1(zip形式　約98KB)

http://www.ideamans.com/_dat/SmartyDev010.zip
※Smartyのライセンス上、Smarty一式を２次配布してしまってよいものかどうか、こちらも取り急ぎ確認しています。でも、EC-CUBEもSmarty込みで一式ＤＬできちゃうよね．．．

ファイル構造の説明

/Smarty/　　……　Smarty一式（特に変更なしにザクっとUPしてください）
/_cache/　　……　Smartyのキャッシュ格納用ディレクトリ（特に変更なしにザクっとUPしてください。パーミッションは777（とか707とか）書込権限が必要です）
/_common/　 ……　デザイナーさんがご自由に設置するimage,js,css,swfなどのファイル格納用ディレクトリ（_commonていうのは僕（弊社）の癖）
/test/　　　……　デザイナーさんがご自由に設置するディレクトリ（何個でも、何階層でもご自由にどうぞ）
　index.html……　デザイナーさんがご自由に作成する静的ページ（なんだけども、実はSmartyテンプレート）
index.html　……　同上
.htaccess　 ……　Smartyテンプレートファイルを静的ファイルであるかの様に扱う為の設定（基本は変更なしです。サーバー環境によっては変更が必要かも）

上記をみると、
「Smarty,_cacheディレクトリ」と「.htaccess」以外は、普段のWeb制作の構造と全く同じになっています。たぶん。
index.htmlやhogehoge.htmlは自由に何処にでも設置可能で、URLもその通りに表示されます。つまり．．．

/FOO/HOGE/test.htmlに設置したファイルは、

http://hogehoge.com/FOO/HOGE/test.html

として表示されます。
がしかし、test.htmlにはSmarty構文を記述することができるんです。

Smartyってすばらしい -でも開発者さんの反応はいたって普通の件（※註）-

いままで、requre_once(php)やSSI、JavaScript果てはFlashにしちまうか。といった苦心も、

{include file="外部のテンプレート" foo="変数渡せる"}

が使えますし、

何度も何度も繰り返し記述しなきゃいけない（でもシステム開発するほどではない）場合、

{assign var="FOO" value="HOGEHOGE"}
で変数をセットして、
{$FOO}何度でも
{$FOO}何度でも

使えますし、コーディング補助機能として有用のように感じます。

※註）
開発者さん「そりゃオメーがSmartyに慣れてるからだろ。新しい記述を学ぶ手間考えたら、PHPでいいんじゃん？」
僕（デザイナー）「そうじゃないって。DreamWeaverの奇怪なテンプレート機能つかって苦心してる人だっているんだぞ〜？それにくりゃべりゃアンタ、Smartyなんて、シンプルなほうだよ！」

CSSもSmarty使えるようにしました

本当は、これがやりたかったんです。
サイトの統一感を出すために、サイトを構築していくとカラー設定は次第に絞られていきます。
シーズン毎のリニューアルなどに対応するため、外部CSSで一括設定する。なんて構成で設計される方もおられるかと。

colorやbockground-color,marginやブラウザハックの記述など、繰り返し記述することが多い場合は
{assign}で最初に一括設定してしまいましょう。

/_common/css/common.cssの記述例
{assign var="clr_green" value="#006600"}
{assign var="clr_black" value="#000000"}

{if $smarty.get.flg=='A'}
 body {{
  background-color:{$clr_green};
 }}
{/if}

{if $smarty.get.flg=='B'}
 body {{
  background-color:{$clr_black};
 color:#FFFFFF;
 }}
{/if}

ここで、CSSの記述に用いる”{}”に独自のルールを適用しました。（Smartyの{}とバッティングしてしまうため）
CSSでの"{"は"{{"に。
"}"は"}}"と記述しなければなりませんのでご了承ください。

あるいは、下記のように記述しても同じ結果となります。

{assign var="clr_green" value="#006600"}
{assign var="clr_black" value="#000000"}

{if $smarty.get.flg=='A'}
 body {rdelim}
  background-color:{$clr_green};
 {ldelim}
{/if}

{if $smarty.get.flg=='B'}
 body {rdelim}
  background-color:{$clr_black};
 color:#FFFFFF;
 {ldelim}
{/if}

※上記のように記述するのがめんどうなので{{〜}}という略式表示にしてみました。

構造の説明（は特に無く）

そもそも、Smartyの構造（しくみ）を理解される開発者さん達にとっては、このような環境設定は「とるに足らぬ事」と思います。むしろ劣化版と思われるかもしれない。
おそらく開発者さんは配布ファイル一式を斜め読みしただけで、「ふふぅん、mod_rewriteとここの●●に××を集約してるだけかい」ということがご理解いただけるかと思います。

まぁでも、今回の目標はそこじゃなくって、デザイナーさんが如何にPHPとかMVCとかいう領域を意識せずに、
自然にSmartyを利用するかにフォーカスしてますんで、細かい説明は特に必要ないかなと思ってます。


動作環境

ロリポップやCORESERVERなど、低価格な共有レンタルサーバーでは「配布ファイル一式をごっそりＵＰして即稼動」ＯＫなところが多かったです。
現在テスト確認中ですが．．．

（そのままＵＰで利用可能だったサーバー）

（.htaccessの変更が必要そうなサーバー）

  • heteml

（未確認）

  • ラピッドサイト（共有系）
  • アイル（共有系）
  • @YMC（共有系）
  • 等など

サーバー環境は、

PHPがインストールされていて、
mod_rewriteが利用可能であれば大丈夫かと思います。
phpのバージョンは4系、5系どちらでもＯＫでしょう。


締め

一通り思いつくことは書いたつもりですが、果たしてどれだけ伝わるんだろう．．．
僕の説明下手、調査と知識の不足は日々アップデートしていきます。

一人でもいいんです。共感してくれる方がいたら、僕は泣きます。

ではまた。