制作会社アラタナが公開するEC-CUBEのデザイン基礎からカスタマイズノウハウ

みなさんこんにちは。

キンタ先生、今朝「華麗パン」とかいうナイスネームなカレーパンを食べました。



で、胃がね、ちょっとだけ、やられてます。
微妙に、ほんとに微妙に!・・・・・年齢を感じますね。



さて、今日はEC-CUBEのデザイン面をカスタマイズする上で、よく利用することになるテクニックの一つ、「Smarty(スマーティ)」についてお話します。

と、その前に、「Smartyって何やねん?」って、思ってらっしゃる方もいるかもしれませんので、ちょっとだけ、その辺りから入っていきましょう。

Smartyはテンプレです。
語弊を覚悟で言ってしまえば、Smary自体、デザインテンプレのためにあるようなものだ・・・ってことです。

そもそもEC-CUBEが、システム面とテンプレ面で振り分けて構築されています。

この構築の方法は、システム面はエンジニアが、テンプレ面はデザイナーが・・・というように、それぞれの得意分野でWebサイトを管理できるというメリットをもっていて、文字やレイアウトの調整ぐらいなら、気負わずデザイナーで行えるという利点があります。

でも、デザインテンプレートはデザイナーでも理解できるレベルのHTMLが殆どだったとしても、「商品名」や「詳細コメント」、「商品数」や「カテゴリID」などは、何らかの関数を用いてシステム側からひっぱり出さないといけません。

でないと、ただのHTMLですもんね(w

で、そこで登場するのが、Smarty!というわけです。

このSmartyを理解していけば、PHPで組まれたシステムを丸ごと把握することなく、デザインテンプレートをベースにして、比較的簡単な関数でデザイナーがデザイン構築作業を行えるようになります。

テンプレとは切っても切れない存在・・・。
Smartyがあるからテンプレは成り立っている・・・。

まさに、Smartyとテンプレは、「=(イコール)」のように切っても切れない関係ですね。

では、早速、EC-CUBEテンプレを見てるとけっこうな割合で出現する、そんな超基本的なSmartyを見ていきましょう。

はい、よくお目にかかるSmartyですね。
関数と呼べるほどご立派な記述には見えませんけども、これが無ければCE-CUBEは成り立たちません。(というのは誇張しすぎ?)

ちなみにEC-CUBEでは、Smartyを記述する際に「<!--{　}-->」といった括弧を用います。
Smarty自体の文法では「{　}」が一般的なので、これはEC-CUBEでSmartyを用いる際の記述法だということになりますね。

ここは、誰かにSmartyの自慢話をする際に恥をかかないよう、しっかり認識しておきましょう。

・・・・・・はい。ちょっと話が逸れましたが、先ほどのSmartyについて説明します。
ではまず、4つのうち、上から3つのSmartyについて・・・



これを日本語に置き換えると・・・



・・・という意味になります。(3つ目はちょっと意味不明でしょうか?(汗))
というわけで、もう少し現実的な例で話をしましょう。

例えば「http://www.uhouho.jp」というWebサイトをEC-CUBEで管理していたとしましょう。

で、さらに「/user_data/img/sample.jpg」にある画像を、ヘッダーなどのテンプレ上に表示させようとした場合、今説明しているSmartyを使うと以下のようになるわけです。



どうでしょう?
ちょっと見えてきましたか?

ちなみに、この<!--{$smarty.const.???}-->という記述、これは「予約変数」と言います。
こういった単語を知っておくと、参考本などを買って読む際になにかと便利です。

せっかくですので、覚えておきましょう。

で、この予約変数では、ある値を呼び出しているわけですが・・・
みなさん、EC-CUBEをインストール・設置した経験がある方なら覚えがあると思いますが、運営するWebサイトのURLなどを設定画面で入力したり、または見たりした記憶がありませんか?

あれ、「SITE_URL」という定数に、「http://www.uhouho.jp/」といった自身のWebサイトURLを定数として当てているんですね。
※定数とは、一度定義しておけば、再び書き換えない限り書き換わることのない値のことです。「変数」の逆みたいなものでしょうか。

なお、<!--{$smarty.const.???}-->という記述は、このようにPHP側で定義された定数を呼び出す際に用いられるもので、PHPと共通で使っている定数をテンプレ側で利用する際に用います。

<!--{$smarty.const.SITE_URL}-->は、

イコール、

http://www.uhouho.jp/。

ということですね。


・・・では最後に、<!--{$TPL_DIR}-->を説明しましょう。

<!--{$TPL_DIR}-->とはまた、さっきの記述とはちょっと違いますよね。
まぁ見ての通り、「smarty.const.」っていう部分が・・・ない。

これについては、実はEC-CUBEの管理画面の、とある箇所を見ると非常によく理解できたりします。

お手元にEC-CUBEがある方は(なんかヘンな言い方ですが・・・)、以下の画面を見てみてください。

「管理画面 → 基本情報管理 → パラメータ設定」

まぁ・・・なんと言いますか・・・頭の痛くなるような英数字がズラーーーっと書いてますね。
ちなみにこの画面は、EC-CUBE上で使われている定数を管理している画面です。
もちろん、ここで変更してしまうとWebサイトを転覆させかねないような定数もありますので、ここで変更できるのはそれを除いた“比較的転覆させにくい定数”になります。

とはいえ、あまり定数の知識に自信がない状態でここを触れると、当たり前のようにエラー・トラブルのもとになりますので、今のところはバキバキに変更を加えないようにしましょう。

で、<!--{$TPL_DIR}-->ですが・・・

この「パラメータ設定」の画面のどこかに、「TPL_DIR」という文字があります・・・

探してみてください。










ありました?

ああ・・・まだ見つからない?












ありましたか?
うぁ・・・見つかりませんか・・・(汗

見つからない場合は、次ページに画像を掲載していますので、それを参考にして探してみましょう。

はい、みなさん「TPL_DIR」を見つけたということで、お話を続けましょう。

ズバリ言ってしまえば、<!--{$TPL_DIR}-->とは、ここで指定されている定数を呼び出すSmartyです。

TPL_DIRという定数名に、以下のような複数の定数を足して当てているんですね。

以下に単刀直入に解説すると・・・

と、なります。

以下にもっと細かく書きましょう。



と、なります。
ちなみに最後の「"/"」は、この定数の最後に「/」を足しているだけですね。
※解説する間でもないですねw



というわけで、少しだけSmartyのことが見えてきましたか?

本当にSmartyを使いこなすならば、まだまだ「if」とか「section」とか「assign」とか、知っておくべき関数の要素が沢山あります。

少しずつ解説していきますので、辛抱強く学んでいきましょう!

では、キンタ先生、なんだか英数字ばかり見てて頭痛くなってきたので、そろそろお開きにしましょう。




以上、これにて!また次回!




追記
なんだか記事が読みづらいですねぇ。
CSSで“チョーク定義”とか、「蛍光ペン定義」とか、作ろうかな・・・