オープンソースソフトウェア osCommerceにおけるデザイン変更 電子商取引研究室 福田 園巳
デザインとロジック - 混在 開発や保守の効率が低下 開発者がデザインとプログラムのどちらも理解する必要がある
デザインとロジック – 分離 デザインだけの変更、ロジックだけの変更が容易 プログラマーとデザイナーの分業が可能
デザインとロジック - 現状 様々なフレームワークが登場 - MVCの分離 様々なテンプレートエンジンが登場 - PHPではSmarty,Flexyなど - JavaではVelocity,Tapestry,S2JSFなど
ECサイトにおけるデザイン 商品を魅力的に見せる必要がある →デザインはバックオフィス機能と同等に重要 デザインを容易に行える必要がある
osCommerce
osCommerceのデザインとロジック デザインとロジックは分離されていない (PHPのコードの中にHTMLが埋め込まれている) →デザイン変更には多量の修正が必要
デザイン編集の方法 テンプレート化 テーブルタグの整理 CSSの記述
テンプレート化 PHPのテンプレートエンジン「Smarty」を使用 osCommerce(MS1j-alter)を参考にヘッダー・左右カラム・フッターをテンプレート化
テーブルタグの整理 osCommerceは複雑なテーブルで構成 →読み辛く、編集が困難
テーブルタグの整理 テーブルの入れ子をシンプルにしてソースの可読性を向上させる
CSSの記述 osCommerceのCSSは適切な記述がなされていない → 簡潔に記述しなおす カラムの幅などをCSSで設定できるようにする
編集例
変更後の特徴 CSSで細部のデザイン変更が容易になった デザイン変更時のCSS変更箇所が減少
フォントサイズの変更 body table{ font-family: 'ＭＳ Ｐゴシック'; font-size: 10px; → font-size: 14px; line-height: 150%; }
左カラムの幅変更 #leftcolumn{ width: 194px; → width: 294px; padding: 3px; border-right: #333333 1px solid; }
今後の予定 モジュールの吐き出すHTMLタグの整理 複数のテンプレート・CSSの作成 →デザイン変更が容易であるかどうか確認 時期 10月下旬 11月 12月 内容 HTMLタグ整理 テンプレート作成 CSS作成
参考サイト osCommerce : http://www.oscommerce.com/ osCommerce(MS1j-alter) : http://www.ebisuweb.jp/~osc_cvs/ osCommerce サポート・ドキュメント : http://www.bitscope.co.jp/tep/ Tep-j-general : http://lists.sourceforge.jp/mailman/listinfo/tep-j-general