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