Your SlideShare is downloading. ×
0
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
EC-CUBE on Bootstrap3 - Gunma.web#16
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

EC-CUBE on Bootstrap3 - Gunma.web#16

4,695

Published on

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

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,695
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • ----- 会議メモ (2014/04/12 09:09) -----
    アイコンのサイズを大きくした時でもキレイ
  • コンセプトを前面に押し出しています
  • ----- 会議メモ (2014/04/12 00:12) -----
    すごく重宝する!
  • ----- 会議メモ (2014/04/12 00:12) -----
    最後にテンプレートの機能をひとつ紹介
  • 使い込んでるモノ?
  • ----- 会議メモ (2014/04/12 00:12) -----
    動作はこんな感じ
  • Transcript

    • 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. 好みは人それぞれかも知れません!
    • 15. グラフィック アイコン
    • 16. グラフィックアイコンの違い 2 –系 png + CSS スプライト 3 –系 web フォント
    • 17. モバイル ファースト
    • 18. 進化したグリッドシステム  モバイルデバイスが切り分けられた。  スマホ・タブレットが別々に扱える  各デバイス別にレイアウトを指定しや すくなった  各デバイス別に表示・非表示ブロック を指定しやすくなった
    • 19. カラム指定系 class  col-xs-* … スマートフォン  col-sm-* … タブレット(縦)  col-md-* … タブレット(横)、 PC  col-lg-* … PC * は 1 〜 12 の数字
    • 20. カラムオフセット class  col-xs-offset-*, col-sm-offset-* … * は 0 〜 12 の数字 表示・非表示指定 class  visible-xs, visible-sm …  hidden-xs, hidden-sm …
    • 21. カラム指定 pull/push 系 class  col-md-pull-*  col-md-push-* * は 0 〜 12 の数字 3 カラムレイアウト作る時とか超便利!
    • 22. EC-CUBE on Bootstrap3 おまけ機能
    • 23. 今日いらしている方の大半がスキな フレーズを取り入れました!
    • 24. 今日はエンジニアの集まりなんだ から「 jk 」と言ったら答えは一つ に決まってるだろ? JK
    • 25. vi/vim キーバインド
    • 26. Twitter とか Facebook とか Google と か実装してて最近流行ってますよ ね!
    • 27. vi/vim キーバインド対応  j,k … 次の項目・前の項目(移動)  h,l … 戻る・進む ( ブラウザ動作 )  H or 0 or ^ … 最初の項目へ  L or $ … 最後の項目へ  g … ページトップへ移動  G … ページボトムへ移動  / or ? … 検索フォーム  - … ホームページヘ
    • 28. github で公開予定です https://github.com/clicktx/eccube-on-bootstrap3
    • 29. ご清澄ありがとう ございました

    ×