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

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

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

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

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


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

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

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

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




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

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

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

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

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文でちょっとした工夫を。

<!--{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文の深み「関係演算子」と「論理演算子」。
はい、いきなり深いですね。
ややこしい単語の時間でございますw

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

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

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

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