Transcript 中間発表スライド - ECL:電子商取引研究室

オープンソースソフトウェア
osCommerceにおけるデザイン変更
電子商取引研究室
福田 園巳
デザインとロジック - 混在
• 開発や保守の効率が低下
• 開発者がデザインとプログラムのどちらも理解
する必要がある
デザインとロジック – 分離
• デザインだけの変更、ロジックだけの変更が
容易
• プログラマーとデザイナーの分業が可能
デザインとロジック - 現状
• 様々なフレームワークが登場
- MVCの分離
• 様々なテンプレートエンジンが登場
- PHPではSmarty,Flexyなど
- JavaではVelocity,Tapestry,S2JSFなど
ECサイトにおけるデザイン
• 商品を魅力的に見せる必要がある
→デザインはバックオフィス機能と同等に重要
• デザインを容易に行える必要がある
osCommerce
osCommerceのデザインとロジック
• デザインとロジックは分離されていない (PHP
のコードの中にHTMLが埋め込まれている)
→デザイン変更には多量の修正が必要
デザイン編集の方法
1. テンプレート化
2. テーブルタグの整理
3. 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/te
p-j-general