2011年6月17日金曜日

授業でEC-Cubeをカスタマイズ。

授業で勉強…って、当たり前のようだけど、

専門学校の教員をやっていると、新しいことを試すことが少なくなって、どんどん世の中から置いてけぼりをくってしまうような気がしてあせります。HTMLも検定対策ということで4.01しかやらないし。

Webコースの2年生の授業は応用編ということで内容の自由度も高いので、今度は動的なサイトを作ってみることにしました。まず静的サイトと同様に学生にPhotoshopでショッピングサイトのデザインをしてもらい、そこから各画像をスライスしてHTMLとCSSで組み立ててもらって、

その間にレンタルサーバやECサイト構築環境の用意をします。

今回は安くてデータベースやPHPがデフォルトで使えるロリポップのサーバにEC-CubeというECサイトエンジンをインストールしてみました。これをカスタマイズして学生デザインのECサイトを作ろうというわけです。このインストールはロリポップのサイトにマニュアルもあり特に困る事はありません。

つぎにローカルの開発環境として、自分のmacにXAMPPを、次いでそこにEC-Cubeをインストールします。

参考にした記事

1) XAMPP for mac のインストール
http://www.apachefriends.org/jp/xampp-macosx.html
※ただしこの手順の中で ProFTPD はインストールされませんでした。問題ありませんが。

2) EC-CUBEをXAMPP環境にコピー
http://eccube55.blog43.fc2.com/blog-entry-2.html
※/Applications/XAMPP/htdocs にEC-Cubeをコピーする際、macの管理者パスワードを入力する必要があります。

3) データベース作成
http://eccube55.blog43.fc2.com/blog-entry-3.html

4) EC-CUBEインストール〜ECサイトの設定
http://eccube55.blog43.fc2.com/blog-entry-5.html
独自タグが埋め込まれたHTMLとCSSを編集するというCMSに共通のイメージだけ持っていて、EC-Cubeが何ベース(CGI、PHP、JSP…)なのかも知らずにインストールしてみたんですが、開けてみるとPHPでした。

PHPはもう10年くらい触っていなくてすっかり忘れていて、EC-Cubeの中の膨大なファイル群にしばらく呆然としていたのですが、落ち着いてマニュアルサイトその他のブログのカスタマイズに言及した記事などを見たりしながら操作してみて、EC-Cubeでのデザインのカスタマイズは基本的に

まずローカル環境のEC-Cubeの管理画面で、
  1. デフォルトテンプレートのパッケージをダウンロード
  2. そのパッケージを新たな名前でアップロード
  3. 使用テンプレートを新たにアップロードしたテンプレートに切り替える
  4. そのテンプレートのHTMLおよびCSSを管理画面の「デザイン」メニューから編集(新しいデザインに使用する背景画像やボタン画像等は別途該当フォルダにコピー)
  5. デザインができたらそのオリジナルのテンプレートパッケージをダウンロード
次にネット上のEC-Cubeの管理画面からオリジナルのテンプレートパッケージを本番環境にアップロードして使用テンプレートをこれに切り替える。

という手順をなんとか理解し、思い通りにレイアウトを変更するメドをつけることができました。MovableTypeのウィジェットやテンプレートの編集と似てますね。今日はちょっと勉強できた感じ。来週は学生が作ったHTMLと合体です。

0 件のコメント:

コメントを投稿