カスタマイズ講座

ホーム > カスタマイズ講座 > 【初級】カスタマイズ > なにかとお世話になるSmarty関数について(その2)

なにかとお世話になるSmarty関数について(その2)

【初級】カスタマイズ5
2008.10.20 (更新日: 2009.06.05)

みなさんこんにちは。
キンタです。

今日は「EC-CUBE公式ガイドブック」に載ってる、「mod_rewriteによる静的URL生成」ってのを仕事でやってみました。

・・・ふふふ。
・・・こいつぁ・・・いいね。

実はこの学校も、静的URL化を何気にやってたりします。
SEO対策もさることながら、URLがスッキリ見えていい感じです。


さて、今日はSmartyの「if」の使い方を覚えましょう。

「if」といえば、EC-CUBE上の商品一覧や、新着情報、オススメ商品などなど・・・あちこちのテンプレで出てくる構文ですね。
もっと言えば、Smartyのみならず、PHPやJavascriptなどなど、大抵のプログラム構文の基本中の基本でもあります。

なので、これ一つマスターしておくだけで、Smartyをグンっと把握しやすくなり、また色々な工夫に挑戦しやすくなっちゃうわけです。

構文苦手で軽く眩暈(めまい)起こしそうな方、今日はこの基本のifをじーーーーーーーーーっくり覚えていきましょう。




・・・と、その前に、ちょっとだけ脱線w (おぉい!)

先生の開発環境は?
当校の「ご意見箱」の方に、「EC-CUBEカスタマイズで先生たちが使ってるツールは?」といった質問が来ておりましたので、お答えしますね。

まぁ、最初に言っておくと・・・大して画期的なツールは使ってませんので悪しからず(汗

じゃ、早速ですが、僕がEC-CUBE上の作業で使っているツール類をざっと紹介しますと、こんな感じです。

キンタ先生のEC-CUBEで美術するツール
・ブラウザ(IE7、IE6、Firefoxなどなど)
・FFFTP
・TeraPad


とまぁ・・・ええ。






これだけです。(汗




まぁ見ての通り、僕の場合はすべてテキストエディタで編集を行います。

エディタで構築したら、FTPでアップしてブラウザで表示確認、ヘンな所があったら即修正、またアップ・・・・・・を、ひたすら繰り返す感じですね。

Dreamweaverなんかも使うときはありますが、基本的にHTML・CSSで表示側のデザイン等を細かに作り込む場合にのみ使用します。

Smartyもソース上で作業すれば対応できなくもないですが・・・やっぱりDreamweaverだとプログラムに特化したツールではないので、どうも慣れてくると使い辛さを感じてしまいますね。

あくまでも、HTML・CSSの構築だけに使用する、っていう具合です。


ほか、一応はphpを編集するのに特化している、PHPエディタ(forWin)などもありますが、EC-CUBEの場合、phpに加えてSmarty、CSSにHTML、Javascriptなどなど・・・とにかく複数の言語を編集しなくてはなりません。

もし、「開発環境として全部統合して管理できるツール」が今後出てきたとしたら、たぶんソッチの方が断然良いのですが、今のところ満足に統合管理できるツールはなかなかありません。

というわけで今のところは、各自特化したツール・エディタを用意して作業するより「なんでもかんでもファイルを開いて、それでもって編集・保存する」ような、クセが少なくて簡単に使えるオールマイティなエディタが手ごろです。

というわけで、以下のように僕の場合はTeraPadを使って、「ほぼ真っ黒い画面でテンプレカスタマイズ」しているわけです。



ちなみに僕の場合は、テンプレ作ってそのままキャッチコピーや文字原稿類の作成に入ることも多いので、「Word起動するぐらいならTeraPadで全部やっちゃうよ」みたいな事が非常に多いです。TeraPadに染まってますね、身も心も。

というか、ものぐさなだけですが。

ちなみにホマン先生も、オールTeraPadで作業しちゃうそうです。恐るべし。

・・・と、これだけ書いても「なんのこっちゃ」で参考にならないので、僕がテンプレ編集初心者だった頃にちょっとだけ世話になったエディタを紹介します。

Smartyに慣れるまでは「サクラエディタ」でした
僕の場合、Smartyに慣れるまでの間という、ほんのちょっとの期間しか使ってませんでしたが、サクラエディタというツールを使っていた時期がありました。



色分けの設定次第で、Smarty部分が読みやすくなりますね。

上手い設定の仕方は他にもあると思いますが、僕の場合は以下のように、コメントタグの開始・終了カッコを「<!--{ }-->」で設定しておいて、強調して表示されるようにしていました。

EC-CUBEの仕様上、TeraPadだとSmarty部分まで「コメントタグ」として認識されてしまうので、サクラエディタの開始・終了カッコを指定して強調設定できる点は当時嬉しいものでした。



あとはTPLファイルがHTMLベースなので、以下のようにモードを「HTML」にしたりして利用。



と、EC-CUBEのSmartyにちょっと慣れていなかった頃は、これでSmartyがどこらへんに記述されているのかを把握して作業していました。

最終的には色分けやコマンドが必要ない程度に慣れてしまって、機能的にシンプルなTeraPadに鞍替えしてしまいましたが、それまでのサポートツールとしてはとても感謝してるツールです。

ありがとう!サクラエディタ!


・・・ではでは、次ページから本題の「if」についてお話します。

どんなif文であれ、読み方はシンプル
ではでは、超カンタンなif文からいきましょう。


<!--{assign var=index value="`$smarty.const.URL_DIR`index.php"}-->
<!--{if $smarty.server.PHP_SELF==$index}-->

ここはトップページ

<!--{else}-->

ここはその他サブページ

<!--{/if}-->


はい。
もうお気づきの方もいるかもしれませんね。

このif文は、トップページか、そうじゃないかを判断して、表示する内容を振り分けているSmarty関数です。

ではでは早速、読み方からじーーーーっくり解説しましょう。

まずif文自体の読み方ですが、どのようなモノであれ、基本的に以下のような読み方をします。

<!--{もし、○○が、△△と□□ならば、}-->

A.これを実行。

<!--{それ以外ならば、}-->

B.これを実行。

<!--{/おわり}-->


みたいな。

上記の読み方でいう「○○が、△△と□□ならば」の部分は、「条件式」と呼びます。
ここの書き方によってさまざまな処理・振り分けを行っているんですね。

では押しの一手!
上記の読み方「○○が、△△と□□ならば」の部分に、試しにプログラムっぽい条件をつけて読んでみましょう。
これでif文の読み方・使い方がしっくり把握できるはずです。

<!--{もし、「zaisanの値」が、「100,000,000」と「一緒」ならば、}-->

億万長者め!

<!--{それ以外ならば、}-->

億万長者じゃないんでしょ?

<!--{/おわり}-->


どうでしょう?

上記の例では、「zaisan」というなにかしらの変数があって、そこがもし一億(100,000,000)の値なら、「億万長者め!」になり、そうじゃなければ「億万長者じゃないんでしょ?」になる・・・というわけです。
※書いた後で気付きましたが、これだと「zaisanの値」が「100,000,000」以上だとしても「億万長者じゃないんでしょ?」になっちゃいますね。なんて失礼なif文だこと!(恐

では、この基本的な読み方と、条件式の存在を意識しつつ・・・冒頭で記述したSmarty文を頭から読み解きましょう。

<!--{assign var=index value="`$smarty.const.URL_DIR`index.php"}-->


この冒頭にある「assign」とは、テンプレートが読み込まれた際に、テンプレート内の任意の変数(テンプレート変数)に値を割り当てる・・・という仕事をやってくれる関数です。
この後のif文の条件式で、値を比較させるための下準備みたいなところですね。

なお、この「assign」は以下のような仕事をしています。

var・・・「index」という名のテンプレート変数に、
value・・・「`$smarty.const.URL_DIR`index.php」つまり「http://www.uhouho.jp/index.php」という値を割り当てる


つまり、この「assign」が行った仕事によって、テンプレ内で「index = http://www.uhouho.jp/index.php」という扱いで処理が可能になるわけです。


では引き続き、以下のif文の条件式を解説しましょう。

<!--{if $smarty.server.PHP_SELF==$index}-->

ここはトップページ

<!--{else}-->

ここはその他サブページ

<!--{/if}-->


ここは「==」のところがポイントです。

これは、「~~と~~が同一ならば、」という読み方をします。
つまりここでは、「$smarty.server.PHP_SELF」と「$index」が同一ならば・・・という条件式を書いていることになりますね。

つまり!

「$smarty.server.PHP_SELF」=「今見てるページのURL」
「$index」=「assignで当てた値『http://www.uhouho.jp/index.php』」


であり、さらにつーまーり!
「トップページのURL」と、「今見てるページのURL」を比較しているってわけです!

で、もしこれらが同一(==)だったら、

「ここはトップページ」

という結果になり、それ以外(else)だったら、

「ここはその他サブページ」

という結果になるわけです。


・・・・うむ、説明がなんだかややこしくなってきた気がします。
っていうかゼンゼン美術してない気がする!!!!(汗

・・・じゃあ、次ページは「百聞は一見にしかず!」ということで、テンプレデザインに生かせそうな、カンタンにすぐ使えるif文を紹介しましょう。

カンタンなif文でちょっとした工夫を。

<!--{assign var=index  value="`$smarty.const.URL_DIR`index.php"}-->
<!--{assign var=list value="`$smarty.const.URL_DIR`products/list.php"}-->
<!--{assign var=detail value="`$smarty.const.URL_DIR`products/detail.php"}-->

<!--{if $smarty.server.PHP_SELF==$index}-->
<img src="img/main/image-top.gif" alt="トップページイメージ画像" />

<!--{elseif $smarty.server.PHP_SELF==$list}-->
<img src="img/main/image-list.gif" alt="商品一覧ページイメージ画像" />

<!--{elseif $smarty.server.PHP_SELF==$detail}-->
<img src="img/main/image-list.gif" alt="商品詳細ページイメージ画像" />

<!--{/if}-->


はい、いきなりソースを張ってみましたが、ここまでで説明した読み書きの基本を応用して、ちょっと長めのif文を書いてみました。

結論から言いますと、これは、

トップページ、商品一覧ページ、商品詳細ページそれぞれで、3種のメイン画像を切り替えて表示するif文

です。

読み方はじっくり読んでみれば解ると思いますので、ここではこのif文の処理のポイントをお話しましょう。

このif文の処理ポイント
・「assign」を3度使って「トップ」「商品一覧」「商品詳細」の3つを使いやすい値(index、list、detail)にしている。
・ifを3度繰り返して「トップ」「商品一覧」「商品詳細」の3つを値と比較して判別している。
・if文を繰り返す時、2回目からは「elseif」を使う。日本語で読むと「また、もしも」。
・「elseif」はあるけど「else」が無い、つまり「トップ」「商品一覧」「商品詳細」以外の“それ以外のページ”では何も結果を出さない(表示しない)。


このように、カンタンではありますが、Smarty、テンプレデザインの入門としてはいろいろと応用のできるif文です。

使い方次第では、当校の「ロッカールーム」のログインブロックのように、トップとサブでデザインをガラッ!!と変えたりするのにも使えます。



もしif文をほとんど触ったことが無い人がいたら、試しにヘッダーのテンプレート(header.tpl)にコピペして使ったり、新規ブロックを作成して、任意の場所にレイアウトして使ったりしてみましょう。

では、次ページに移ります。
ちょっとだけ深い話をば・・・

if文の深み「関係演算子」と「論理演算子」。
はい、いきなり深いですね。
ややこしい単語の時間でございますw

前述したとおり、if関数自体はさほど難易度の高いものではありません。
でも、使いこなすにはマスターしておかなければならないモノがあります。

それはスバリ、条件式。
さらに言えば、「関係演算子」と「論理演算子」です。

じゃあ、それぞれでカンタンな説明をしてみます。

関係演算子ってなにさ?
カンタンに言ってしまえば、「2つの値の関係を比較して結果を出す」記述のことです。
例えば以下、EC-CUBEの商品詳細のテンプレ「detail.tpl」から引用して説明しましょう。

<!--{if $arrProduct.main_large_image != ""}-->
↓意味↓
<!--{もしも、商品の拡大画像が空っぽじゃないならば、}-->


とまぁ、こんな感じです。

「$arrProduct.main_large_image」という、商品の拡大画像を指す変数と、
「 ""」という、空っぽを指す値を、
「!=」という、“~と~が等しくない”という意味の関係演算子で比較しているわけです。

関係演算子はほかにも、以下のような種類があります。

「>」・・・「~が~より大きい」
「<」・・・「~が~より小さい」
「>=」・・・「~が~より大きいか、等しい」
「<=」・・・「~が~より小さいか、等しい」
「==」・・・「~が~と等しい」
「!=」・・・「~が~と等しくない」


じゃあ論理演算子ってなにさ?
こちらは「複数の条件を組み合わせるための記述」のことです。
さきほど説明した関係演算子を、複数組み合わせる時によく使います。

では、EC-CUBEの商品一覧のテンプレ「list.tpl」から引用して説明しましょう。

<!--{if $arrProducts[cnt].stock_max == 0 && $arrProducts[cnt].stock_unlimited_max != 1}-->
↓意味↓
<!--{もしも、商品の残り在庫数が0で、かつ、在庫数が無制限(1)じゃなかったら、}-->


と、このように、複数の条件を組み合わせて結果を出す際に用います。
ちょっと厳密な判断を行う場合などに利用できますね。

そしてこちらも、以下のような種類があります。

「&&」・・・「かつ (例:a > 0 && b > 0)」
「||」・・・「または (例:a > 0 || b > 0)」
「!」・・・「じゃない (例:!$tpl_disable_logout)」


最後の3つめはちょっと、どう読んでよいのかわからないかもしれませんね。
ともあれ、今後のカスタマイズできっと必要になると思いますので、

「『!』をつけると否定形になるのねぇ・・・ふーん。」

ぐらいの認識で今のところは大丈夫ですw




・・・・・っと、今回はif文の基本をガッツリやってみました。
今一度、お手持ちのEC-CUBE(やっぱ教科書みたいな言い方でヘンですね)のTPLファイルをじっくり見てみましょう。






どうですか?






前よりも、なんだかちょっと読みやすくなった気がしてきませんか?

if文を落ち着いて眺められるようになると、テンプレートファイルの“処理の流れ”のようなものが何となく見えてくるはずです。

この調子で、これからもどんどんSmartyをマスターしていきましょう。

では、今日はこれにて。

【今日のひとこと】

『if文はSmartyの輪郭、これが読めると描きたいデザインが見えてくる!』




追記

蛍光ペンとかのCSSをいろいろ足しました。
少しは読みやすくなったかなぁ・・・

このページを見ている人は、以下のページも参照しているようです・・・!

>> EC-CUBEの学校のページ参照は、レコメンドエンジン「楽レコ」でレコメンデーションしています!

レビュー

レビューによるご意見・ご質問は会員登録された方のみとなっております。
  • ★★★★★ 2回目も楽しく勉強しました。 2008/10/25
    レビュアー:居残り組

    これで表示ページごとで簡単な画像の切り替えや背景色の変更ができるってことですよね!

    ifと、assign の説明もばっちりっす!!

    最初自分の適応したいページ全部に
    貼り付けるのかなと思ってしまったんですが、
    たとえばheader.tpl に
    条件分岐で、logo画像を振り分けた場合
    自動的に全てのページで有効になるんですよね?
    どのテンプレがどこで使われて
    いるかってのが、まだ
    いまいち理解できないんです、、、

    今後の希望で、
    あるページをプラウザで表示しているとき
    どのテンプレとテンプレが呼び出されている
    みたいな講義があればありがたいですー!!
    どういじるかの前にどこをいじるかで
    いつも悩むんで、、、

  • ★★★★★ とても分かりやすかったです。 2010/02/16
    レビュアー:いろいろ初心者

    初めて拝見させていただきました。
    これからEC-CUBEを勉強しようとしていたところ、寄らせていただいた次第です。
    解説がとても分かりやすく、まだ何もやっていませんが、自分でもできそうな感じになりワクワクしています。
    脱線ネタも楽しみにしていまっす!

  • ★★★★★ 最高です。 2010/03/08
    レビュアー:taotao

    非常に役に立ちました。
    これからも バリバリ勉強させて頂きます。

この記事に対するトラックバック

この記事のトラックバック先URL

ECの「勝ち組」だけが知っている 売り上げUPの秘密はこちら