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

みなさん、こんにちは。

実は今日、「デザインの仕方・考え方」という題で、デザイン分野の話をしようと思ってたのですが、今更ながら"とっても肝心なこと"に気付いてしまいました。

と言いますのも前回、「if文の解説」をしたわけでですが・・・

その後よくよく考えれば・・・

「if文を入れるためのテンプレはどこにあるのか」といったディレクトリ構造についての話に・・・

一切触れていないではありませんか・・・




いかんですねぇ・・・

・・・と、い・う・わ・け・で!
今日は「テンプレカスタマイズに必要な、ディレクトリ構造の把握」の話です。

ちなみにここで説明するEC-CUBEのディレクトリ構造は、最新バージョン(2.3.0)を参考にしています。
1系のEC-CUBEユーザーの方にとっては、あまり参考にならない記事かもしれません。(と、冒頭で言っちゃうのもどうかと思いつつ)

が、ファイル格納の概念的には、そう差の無い部分もありますので、今後2系に乗り換える際の参考とし見ていただけたら幸いです。
※となれば、1系も追って説明する必要がありそうですね。



では早速、解説します!

まずはザックリとした感じで、大雑把に把握する。
一言で「テンプレのディレクトリ構造」といっても、実際に格納されているディレクトリ・ファイルの個数はハンパないです。

まずは以下の図のように、なんとなーーーくの概念図を思い浮かべ、ザックリとした感じで適当に把握していきましょう。

なお、黒板に書かれているディレクトリの位置関係が、そのままFTPソフトで接続した際に見えている・・・といった感覚で見てみましょう。



・・・以上、本当にザックリと描き切ってしまいましたが、まずはこのディレクトリの意味合いと、位置関係の把握が大切です。

で、場合によっては上記のような位置関係でインストールできないサーバーもあるようで、皆さんの中には「こんな位置に『html』なんてフォルダないよー！」という方もいらっしゃるかもしれません。

というわけで、そういうサーバーによくある位置関係が以下の図です。

これも同じく、黒板に書かれているディレクトリの位置関係がFTPでそのまま見えているつもりでご覧ください。



・・・とまぁ、やっぱりザックリとした図なんですが、大雑把に雰囲気は伝わりましたか？

では、もうちょっとだけ言葉を添えて、具体的に説明しておきましょう。


まず、「data」ディレクトリ。

ここに格納されているファイル群の殆どが、EC-CUBEの機能面を支えるphpファイルたちです。
データベースへのデータ入出力は、このディレクトリに格納されているファイル群が支えている・・・といっても過言ではないでしょう。
つまりここは、EC-CUBEの一番大切な部分、骨格であり肉体的な部分になるのです。

次に、「html」ディレクトリ。

ここはEC-CUBEの顔、つまり表示に関わる部分が格納されているところです。
ちょっとサーバー技術的な言い方になりますが、この「html」ディレクトリはWebサイトとして表示・公開される場所でもあります。

なので、この中にはEC-CUBEのトップページにあたるファイルも格納されています。

ほか、EC-CUBE管理画面にてアップロードした画像なども、このディレクトリに収められているほか、CSS（スタイルシート）ファイル、JPGなども画像ファイルもこの中にいます。

「じゃあ、この中にテンプレファイルが収められているのね！」と、思いきや・・・・・

・・・・・おっと。

続きは次ページでｗ

「html」ディレクトリの中身とは?
では、テンプレの居場所を求めて、「html」ディレクトリの中を探索しましょう。
ちょっとFTPでEC-CUBEの中身に接続します。



とにかくまぁ・・・いっぱい入ってますね。
上の図を見つつ、主要な箇所を説明しますね。

(1)dataディレクトリ
さっき黒板に描いた説明もあったんで、説明どうか悩みましたが・・・載せちゃいました。
じつは、このFTPで見てる状態が、『EC-CUBEの仕様通りじゃないけど・・・』バージョンのディレクトリ構造なんです。

EC-CUBEの仕様通りにすんなりとインストールを行った場合、このような感じで「html」ディレクトリの中に「data」ディレクトリはまず居ません。

まぁ・・・そうですね。
参考になればと・・・載せちゃった次第w

ともあれ、こういう位置に「data」ディレクトリがある場合も、人によってはある!ということですね。
皆さんの手持ちのEC-CUBEが、どのようなディレクトリに構造になっているのか、ここで改めて確認しておくと良いでしょう。

(2)その他大勢のディレクトリ群
上から順に「entry」「forgot」「frontparts」「inquiry」などなど、いろんなディレクトリが並んでいますが・・・さて、このディレクトリ群が何なのか、何となく気付きませんか?

「mobile」なんかもありますね・・・。

「mypage」なんかもありますよ・・・。

「products」なんてのもあるじゃないですか・・・。

・・・そう、もう気付きましたね?
このディレクトリ群は、以下の図で見ると一目瞭然です。



つまり、これらのディレクトリ群は、EC-CUBEがWebサイトを表示するために必要なファイルが詰まっている場所なのです。

「じゃあ、テンプレはここに!?」

と、思われた方・・・

惜しい・・・

試しに「products」ディレクトリを見てみましょうか・・・



一応、「detail.php」というファイルを開いてみました。
見て解るように、Smarty構文がたっぷりと記載されている!・・・ような様子はゼンゼン無いですね。

ちなみに、このphpは、EC-CUBEの本体を支える「data」ディレクトリから、それぞれのコンテンツに該当するphpを呼び出し、動かしているファイルです。

なので、ここにはHTMLタグやSmartyなどの、表示に関する記載はありません。
テンプレはまた別の場所にある、というワケですね。残念・・・

(3)uploadディレクトリ

さて、気を取り直してサクサクいきましょう。

このディレクトリは、EC-CUBE管理画面で登録した商品写真などがアップロードされるディレクトリです。

その他、アップロードしたCSVや、売上統計などのグラフ図などもここに入ります。


(3)index.php

これはもう、言わずもがな。
Webサイトのトップページファイルですね。

ただし、これも先ほど見た「detail.php」と同じように、phpプログラム本体というわけではありません。

基本的に、「data」ディレクトリにあるphpが、処理を行うプログラム本体です。
なのでこの「html」ディレクトリ内にあるphpは、「本体のphpを呼び出す」ような機能に終始していると覚えておきましょう。

でもこれはこれで、必要なphpファイルなんですよ。
消しちゃったら“本体のphpを呼び出す”ことが出来なくなって、ページが表示されなくなってしまいますからね。

では、次ページではもう少し「html」ディレクトリの奥に入っていきましょう。

「user_data」ディレクトリを極めよう!


はい。
ちょっと深い場所に入ってみました。
ここは「html」ディレクトリの中にある、

/user_data/packages/default/

の、中です。
ちなみに語尾の「default」は、デザインパッケージの名称を指します。

独自でデザインパッケージを作られている方はもちろんですが、どこかでEC-CUBEのデザインパッケージを入手して利用している方は、ここがパッケージ名称になっているはずです。

でも大抵、この中身のディレクトリ構造はどれも同じハズなので、このまま「default」で説明を進めていきます。

この場所は、テンプレートファイルの次に大切な、CSSやデザイン画像(gif・jpgなど)が格納されている場所です。

では、このディレクトリの中について、それぞれの場所を開きつつ説明します。

「css」ディレクトリ
ここにはEC-CUBEの全てのデザインを管理しているスタイルシートファイルが格納されています。



主要なもの(デザイン変更時によく利用するもの)から順に解説を添えると・・・

(1)index.css
トップページにのみ利用されるCSS定義が記述されています。「おすすめ商品」ブロックの定義などがこれに該当します。

(2)main.css
サイト全体で利用されているCSS定義がここに記述されています。
背景やヘッダー・フッター、カラムレイアウトや左右のブロックなどなど・・・このファイルが本体的な役割を担っていると言えますね。

(3)mypage.css
読んで字のごとく、これはマイページ用のCSS定義が記述されているファイルですね。

(4)products.css
これには商品一覧・商品詳細など、商品紹介ページに関するCSS構文が記述されています。

(5)under.css
これは、上記にCSS定義に属さないものの中でも、2カラムページ(当サイトについて、特定商取引、会員登録、お問い合わせなどのページ)に属するもののCSS定義が記述されています。

(6)under02.css
これはさらに、1カラムページ(カゴの中、注文処理などのページ)に属するもののCSS定義が記述されています。

(7)window.css
これは、別画面表示用のCSS定義が記述されています。

・・・と、以上です。
ちなみにこうやって見てみると、EC-CUBEのCSSは、比較的綺麗に整理されているのを感じます。

整理しつつカスタマイズ、心がけたいものです。

「img」ディレクトリ
ここにはEC-CUBE上で利用されている全ての画像ファイルが納められています。



ここも、非常によく整理されていて、ヘッダーで利用されている画像の格納場所は「header」、商品紹介に関する画像の格納場所は「products」などなど、ディレクトリ名で直感的にわかるようになっています。

ちなみにWebサイトのロゴ画像は、「header」に格納されています。

ここはディレクトリ数もさることながら、格納されている画像数もけっこうな量です。
一度、自分のPCに丸ごとダウンロードして、どこにどの画像が入っているかをじっくり見てみることをオススメします。

・・・え?

・・・いやいや、別に説明放棄じゃないですよ?w


「js」ディレクトリ
ここにはEC-CUBE上で利用されているJavascriptファイルが収められています。



ちなみにここは、管理画面の「ファイル管理」上の動作を制御しているjsファイルがあったり、新規ウィンドウの表示を制御しているjsファイルがあったりと、サイト全体の管理・運営を支えるような重要なファイルが収められています。

ここは別途Javascriptに関する予備知識を持った上で、カスタマイズの手を入れる必要があります。

「sql」ディレクトリ
ここに収められているファイルはたった一つです。



これは、各種ブロックのレイアウト位置を管理しているファイルが収められています。
この辺り、実際には管理画面上でレイアウト管理を行いますので、このファイル内の文章を完璧に理解する必要は今のところありません。

まずは、「こういうディレクトリもあるんだね!」ぐらいの認識で押さえておきましょう。



さてさて、これでEC-CUBEの表示面が、どうのようにしてhtml内に収められているかわかってきましたでしょうか?

ここでの最大のポイントは、やっぱり、

/user_data/packages/default/

ですね。
このディレクトリはEC-CUBEの管理画面上から「ファイル管理」を利用して追加編集を行うことが可能です。

デザイン面の微細なCSS調整はテンプレカスタマイズ時によくあることですので、この場所は「目を閉じてでも行ける!」ぐらいにまで把握しておくことをオススメします。

管理画面でもFTPでも、迷わずスラ～～～～っと、ディレクトリ移動が出来るよう、しっかり把握しましょう。



では・・・次はいよいよ・・・テンプレファイルの場所です。

テンプレファイルは「Smarty」の中!
さて、今度はスコーーーン!と、htmlディレクトリから抜け出して、「data」ディレクトリの中を覗いてみましょう。



はい、もう言っちゃいます。

ヘッダー・フッター、商品一覧や商品詳細などなど、EC-CUBEのテンプレートファイルは・・・・「Smarty」ディレクトリの中にいます!

以下はまさしく「Smarty」ディレクトリの中の様子です。
皆さんもFTPで、以下を参考にしてディレクトリ移動してみましょう。

/data/Smarty/templates/default/



非常に、「HTML」ディレクトリと構造が似ていますね。
では、この中から適当なものを選んで開いてみます。

じゃ、「detail.tpl」というファイルを試しに開いてみましょう。



ん～～～～～!

いますね!Smarty構文が!
HTMLタグもバッチリ見えます!

あとはこの「Smarty」ディレクトリ内をいろいろと見てみてください。

「products」ディレクトリには商品紹介に関わる一連のテンプレファイルが、
「bloc」ディレクトリには各種ブロックのテンプレファイルが、
「shopping」ディレクトリにはショッピングカートに関するテンプレートファイルが、

それぞれのディレクトリ名に由来するテンプレファイル群が、それぞれのディレクトリに格納されていることが理解できるかと思います。

僕らの求めていたテンプレートファイルは・・・・・そう!ここにいる!(すごい大げさ)

これで以前「なにかとお世話になるSmarty関数について(その2)」で紹介したif文を、テンプレートファイルに反映させることができるかと思います。

反映するテンプレートはどこでも構いませんが、出来る限りトップページ・商品一覧・商品詳細のページで共通して利用されているテンプレファイルに反映するのが望ましいでしょう。

となると・・・オススメとしてはヘッダーのテンプレファイル「header.tpl」かな・・・

では、次ページで最後になりますが、ちょっとだけテンプレの七不思議を・・・

「html」ディレクトリに移動するテンプレ・・・
まぁ・・・七不思議と言っておきながら、たったの1つなんですけど・・・

テンプレファイルの中には、“ある作業”を行うと、いつの間にか「data」ディレクトリから「html」ディレクトリに移動してしまうものが存在します。

それはどのテンプレかと言うと・・・

・「bloc」ディレクトリに収められている各種ブロックテンプレファイル
・detail.tpl、list.tpl、header.tpl、footer.tpl、top.tpl…の5つのテンプレファイル

の、テンプレ達。
で、どの作業を行えば移動するのかというと・・・

「EC-CUBE管理画面『ページ詳細設定』で、SmartyやHTMLタグを編集して『登録』ボタンを押す」

と、この作業を行うと、なぜだかhtmlディレクトリ内の、以下の場所に移動してしまうのです。

/user_data/packages/default/



・・・まぁ、別にこれで何かが壊れるわけではないです。

むしろ「data」ディレクトリから「html」ディレクトリに移動してくれたおかげで、FTPでの作業がしやすくなります。

画像やCSSをカチャカチャとカスタマイズしつつ、header.tplをほぼ同じディレクトリで扱えるので、便利になりますね。

まぁ、ちょっとしたマメ知識ということで覚えておくと良いかもしれません。

また、似たような原理ですが、「ページ詳細設定」で新規ページを作成すると、これもまた「data」ディレクトリの方にテンプレが生成されるかと思いきや・・・同じく/user_data/packages/default/に生成されます。

EC-CUBEって、ふ・し・ぎ。



今日のまとめ
今日はとにかく、あちこちのディレクトリを見て回りました。
どのディレクトリがどんな役割なのか・・・初めてじっくり見たという方は、あまりの多さにちょっと混乱気味かもしれません。

というわけで、そういう方はまず、今日の授業の中でも以下のポイントを真っ先に押さえておくようにしましょう。

【1】画像やCSSなど、“デザインの部品”が納められている、
「/html/user_data/packages/default/」

【2】テンプレファイルが一括して収められている、
「/data/Smarty/templates/default/」

【3】管理画面で作業すると移動する、
detail.tpl、list.tpl、header.tpl、footer.tpl、top.tplと、各種ブロックテンプレファイル


以上です。

あとはとにかく、一つでも多くのディレクトリやファイルの機能や意味を理解することが、今後のカスタマイズ作業を行う上で大切になってきます。

こう言ってしまうと元も子も無いんですが・・・カスタマイズの作業を通して少しずつディレクトリに・・・慣れるしかない!

これ、大切ですw