Gunma.web#16で発表したスライド。EC-CUBE用のデザインテンプレートを作った話。

1. EC-CUBE
on
Bootstrap3
2014/4/12 Gunma.web #16
@clicktx

2. about me
• Nome ：すぎむら むねのり
• Twitter: @clicktx
• Lingua: Perl
• Blog: http://perl.no-tubo.net/
• Professione: アマグラマー

3. EC-CUBE
on
Bootstrap3

4. EC-CUBE
on
Bootstrap3
= EC-CUBE 用のデザインテンプレート

5. デモサイト
http://eccube-on-bootstrap3.no-tubo.net
#gunmaweb でツイートします

6. 特徴
 レスポンシブ web デザイン
 モバイル（特にスマートフォン）で使
いやすい

7. なぜつくったか？
 Bootstrap で作られているものがあった
(*1) ので触発されて
 EC-CUBE 本体が 2.12 系
 Bootstrap が 2 系
 Bootstrap3 系を学ぶチャンス！
*1 eccube-bootstrap という EC CUBE 用のテーマを作りました。 - ALLAURMONO
http://blog.nagaki.me/practice/released-eccube-bootstrap.html

8. 作業
 2/7 〜 4/5 （ 60 〜 70 時間程）
 メモ忘れあるかも
 修正したファイル（ .tpl のみ）で 48
ファイル
 …実は全部終わっていない
 テンプレートは全 69 ファイル
 My ページとか、ショッピングプロセ
スとか

9. 使用上の注意点
 スマホ用テンプレートを手動で無効に
する必要がある
 EC-CUBE 本家で販売されているレスポン
シブテンプレートはプラグインとして作
られている
 今回はデザインテンプレートとして製作
しているので PHP 等のカスタマイズは出
来ない
 EC-CUBE でスマホ用と携帯用テンプレートを無
効にする方法 | SPOT[ スポット ]
http://p.tl/i2Qr

10. Bootstrap3
2 系と 3 系の違い

11. デザイン

12. デザインの違い
2 系 - リッチデザイン 3 系 - フラットデザイン

13. デザイン
2 系 - リッチデザイン 3 系 - フラットデザイン

14. 好みは人それぞれかも知れません！

16. グラフィック
アイコン

17. グラフィックアイコンの違い
2 –系 png + CSS スプライト 3 –系 web フォント

18. モバイル
ファースト

19. 進化したグリッドシステム
 モバイルデバイスが切り分けられた。
 スマホ・タブレットが別々に扱える
 各デバイス別にレイアウトを指定しや
すくなった
 各デバイス別に表示・非表示ブロック
を指定しやすくなった

20. カラム指定系 class
 col-xs-* … スマートフォン
 col-sm-* … タブレット（縦）
 col-md-* … タブレット（横）、 PC
 col-lg-* … PC
* は 1 〜 12 の数字

21. カラムオフセット class
 col-xs-offset-*, col-sm-offset-* …
* は 0 〜 12 の数字
表示・非表示指定 class
 visible-xs, visible-sm …
 hidden-xs, hidden-sm …

22. カラム指定 pull/push 系 class
 col-md-pull-*
 col-md-push-*
* は 0 〜 12 の数字
3 カラムレイアウト作る時とか超便利！

23. EC-CUBE on Bootstrap3
おまけ機能

24. 今日いらしている方の大半がスキな
フレーズを取り入れました！

27. 今日はエンジニアの集まりなんだ
から「 jk 」と言ったら答えは一つ
に決まってるだろ？ JK

29. vi/vim
キーバインド

30. Twitter とか Facebook とか Google と
か実装してて最近流行ってますよ
ね！

31. vi/vim キーバインド対応
 j,k … 次の項目・前の項目（移動）
 h,l … 戻る・進む ( ブラウザ動作 )
 H or 0 or ^ … 最初の項目へ
 L or $ … 最後の項目へ
 g … ページトップへ移動
 G … ページボトムへ移動
 / or ? … 検索フォーム
 - … ホームページヘ

32. github で公開予定です
https://github.com/clicktx/eccube-on-bootstrap3

33. ご清澄ありがとう
ございました