パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた                  2012/9/8        株式会社シーエー・モバイル           Web先端技術フェロー                ...
自己紹介•   白石 俊平(しらいし しゅんぺい)•   html5j.org 管理人•   HTML5とか勉強会 主催•   Web先端技術味見部 部長•   読書するエンジニアの会 主催•   Google API Expert (HTML...
今Webは、変わろうとしている レスポンシブ          アプリケーション化
www.gravitatedesign.com
clearairchallenge.com
TRON LEGACY
Mercedes-Benz
一足お先にチャレンジしました。
www.camobile.com
死にかけました
ぼくらが直面した「課題」1.   パララックススクロールをモバイルでも実現したい2.   レスポンシブで動きまくるサイトを作らなくてはならない3.   レスポンシブで画像満載のサイトを作らなくてはならない4.   jQuery Mobileを使...
1. パララックススクロールを   モバイルでも実現したい
様々なライブラリが利用可能、だが・・
最終的なパ・・インスパイア元     Nike Air Jordan 2012
ゼロから書き起こして公開しました。      ScrollTween.js
つかいかた// スクロール部分を作成var container = ScrollTween.container(containerDiv);// アニメーションさせる部品を追加container.add(#index_scene_intro, ...
2. レスポンシブで動きまくる サイトを作らねばならない
レスポンシブWebデザインの基礎• Fluid Grid• Fluid Image• CSS Media Queries
レスポンシブWebデザインの基礎• Fluid Grid  – 幅をパーセント指定するグリッドレイアウト• Fluid Image  – 画像の幅をパーセント指定する• CSS Media Queries  – デバイスの要件に応じてCSSを切...
LESS/SASSは必須ツール• Fluid Gridの実装には、変数・計算・ミッ  クスインなどがとても便利。    // 変数    @grid-hcount: 16;    // 計算    @grid-cell-width: 100% ...
メディアクエリは控えめに• 全ブレークポイント内でスタイルの上書  きが発生するため、すぐに肥大化する – 「巨大なswitch-case」化• 要件にもよるが、Fluid Layoutを補う形で  使用する程度が望ましいように思える。
セマンティックなマークアップ メディアクエリ=CSSの切り替え単一のマークアップ&異なるCSSという構造「揺らがない」マークアップが必要だ!
セマンティックを深く考えぬかれたコンテンツは、変更に強い!
インタラクティブなコードでは、 「UIの状態」を意識しよう。#dialogのdisplayを                   ダイアログを閉じる   noneにする    #messageの                   ノーマルメッ...
「状態変化」を意識した      コーディング• CSSプロパティを直接JavaScriptで書き換  えるのをやめる• UIの状態はクラスで表すと良いjQueryでいうと、• css()やエフェクト系メソッドの使用を控える• addClass...
「状態変化」を意識した           コーディングBefore:   $(#msg).hide();After:   $(#msg).addClass(hidden);   #msg.hidden {     display: none;...
状態変化にエフェクトを    用いるよう変更する#msg.hidden {  display: none;}     変更箇所がCSSに集中し、#msg {            保守性が向上する  opacity: 1;  transitio...
3. レスポンシブで画像満載の サイトを作らねばならない
レスポンシブイメージ• スクリーンサイズに応じて、異なるサイ  ズの画像を読み込みたい。                        PC               Tablet  Smartphone
Riloadr• レスポンシブイメージを実現するフレー  ムワーク• JSによるセットアップさえ済ませれば、  あとはマークアップのみ。   <img class="responsive" data-src="img.png">   <!-- ...
レスポンシブイメージをめぐる仕様も<picture>                             OperaのBlues Lawsonさん <source media="…" src="">            が提案 <sour...
CSSスプライトアニメーション• 手の画像は、すべてCSSスプライトアニ  メーションで実現
CSSスプライトアニメーション• スプライト画像をbackgroundに指定し、  background-positionをずらしていく – 「覗き穴」を横にずらしていくイメージ。• Android 2.3標準ブラウザには、ひとコマ目が残り続け...
4. jQuery Mobileを使うべきだろうか?
Framework
作業を枠にはめ、生産性を向上させる  Framework  Creativity
死の妥協
「制約」から見た      jQuery Mobile1. 型に従ったマークアップ2. フレームワークにHTMLを「いじられる」3. デザインにこだわるならカスタマイズが   必須4. カスタマイズが面倒5. パフォーマンス上のハンデを背負う
「利点」から見た         jQuery Mobile1.   慣れればとにかく簡単2.   マルチプラットフォーム           現在の想い:3.   全ページが一意なURLを持つ       クリエイティブなページ以外4.   ...
5. 定型タスクを自動化したい
なんだか定型タスクが増えた•   JavaScriptのミニファイ•   CSSのミニファイ•   ファイルの結合とファイル名生成•   LESSのコンパイル•   異なるサイズの画像生成
grunt.js• Nodeで動作する、タスク自動化ツール
grunt.jsで定型化した作業    LESSをCSSにコンパイル   JavaScript/CSSをミニファイ    JavaScript/CSSを結合  ファイル名をハッシュ値から生成結合したファイルは本番時にのみ使用  (サーバサイドで...
まとめ
苦しかった・・・
けど
なんだろう、このワクワク感
新しいWeb開発を楽しもう!    @Shumpei
アンケートへのご協力をお願いします!URL: http://bit.ly/html5j2012q参加したセッションに関するアンケートに答えて受付に行くと、素敵な景品が!
Upcoming SlideShare
Loading in …5
×

パララックスでレスポンシブでJ query mobileなサイトのつくりかた

28,092 views

Published on

HTML5 Conrerence 2012

0 Comments
86 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
28,092
On SlideShare
0
From Embeds
0
Number of Embeds
970
Actions
Shares
0
Downloads
142
Comments
0
Likes
86
Embeds 0
No embeds

No notes for slide

パララックスでレスポンシブでJ query mobileなサイトのつくりかた

  1. 1. パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた 2012/9/8 株式会社シーエー・モバイル Web先端技術フェロー 白石俊平
  2. 2. 自己紹介• 白石 俊平(しらいし しゅんぺい)• html5j.org 管理人• HTML5とか勉強会 主催• Web先端技術味見部 部長• 読書するエンジニアの会 主催• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
  3. 3. 今Webは、変わろうとしている レスポンシブ アプリケーション化
  4. 4. www.gravitatedesign.com
  5. 5. clearairchallenge.com
  6. 6. TRON LEGACY
  7. 7. Mercedes-Benz
  8. 8. 一足お先にチャレンジしました。
  9. 9. www.camobile.com
  10. 10. 死にかけました
  11. 11. ぼくらが直面した「課題」1. パララックススクロールをモバイルでも実現したい2. レスポンシブで動きまくるサイトを作らなくてはならない3. レスポンシブで画像満載のサイトを作らなくてはならない4. jQuery Mobileを使うべきだろうか?5. 定形タスクを自動化したい
  12. 12. 1. パララックススクロールを モバイルでも実現したい
  13. 13. 様々なライブラリが利用可能、だが・・
  14. 14. 最終的なパ・・インスパイア元 Nike Air Jordan 2012
  15. 15. ゼロから書き起こして公開しました。 ScrollTween.js
  16. 16. つかいかた// スクロール部分を作成var container = ScrollTween.container(containerDiv);// アニメーションさせる部品を追加container.add(#index_scene_intro, function(tween) { // 0-200の間は中央に、その後右に消えていく tween .range(0, 200, tween.styles().middle()) .to(600, tween.styles().rightOut());});…container.play();
  17. 17. 2. レスポンシブで動きまくる サイトを作らねばならない
  18. 18. レスポンシブWebデザインの基礎• Fluid Grid• Fluid Image• CSS Media Queries
  19. 19. レスポンシブWebデザインの基礎• Fluid Grid – 幅をパーセント指定するグリッドレイアウト• Fluid Image – 画像の幅をパーセント指定する• CSS Media Queries – デバイスの要件に応じてCSSを切り替え
  20. 20. LESS/SASSは必須ツール• Fluid Gridの実装には、変数・計算・ミッ クスインなどがとても便利。 // 変数 @grid-hcount: 16; // 計算 @grid-cell-width: 100% / @grid-hcount; // ミックスイン .gwidth(@count) { width: @grid-cell-width * @count; } #logo { .gwidth(2); // ミックスインの使用 }
  21. 21. メディアクエリは控えめに• 全ブレークポイント内でスタイルの上書 きが発生するため、すぐに肥大化する – 「巨大なswitch-case」化• 要件にもよるが、Fluid Layoutを補う形で 使用する程度が望ましいように思える。
  22. 22. セマンティックなマークアップ メディアクエリ=CSSの切り替え単一のマークアップ&異なるCSSという構造「揺らがない」マークアップが必要だ!
  23. 23. セマンティックを深く考えぬかれたコンテンツは、変更に強い!
  24. 24. インタラクティブなコードでは、 「UIの状態」を意識しよう。#dialogのdisplayを ダイアログを閉じる noneにする #messageの ノーマルメッセージを colorをgreen、 表示するdisplayをblockにする ぼくらが変更したいのは、「CSSプロパティ」じゃなくて「状態」で す。
  25. 25. 「状態変化」を意識した コーディング• CSSプロパティを直接JavaScriptで書き換 えるのをやめる• UIの状態はクラスで表すと良いjQueryでいうと、• css()やエフェクト系メソッドの使用を控える• addClass(),removeClass()を中心に
  26. 26. 「状態変化」を意識した コーディングBefore: $(#msg).hide();After: $(#msg).addClass(hidden); #msg.hidden { display: none; }
  27. 27. 状態変化にエフェクトを 用いるよう変更する#msg.hidden { display: none;} 変更箇所がCSSに集中し、#msg { 保守性が向上する opacity: 1; transition: opacity 1s ease-in;}#msg.hidden { opacity: 0;}
  28. 28. 3. レスポンシブで画像満載の サイトを作らねばならない
  29. 29. レスポンシブイメージ• スクリーンサイズに応じて、異なるサイ ズの画像を読み込みたい。 PC Tablet Smartphone
  30. 30. Riloadr• レスポンシブイメージを実現するフレー ムワーク• JSによるセットアップさえ済ませれば、 あとはマークアップのみ。 <img class="responsive" data-src="img.png"> <!-- 以下は省略可能 --> <noscript> <img src="img-small.png"> </noscript>
  31. 31. レスポンシブイメージをめぐる仕様も<picture> OperaのBlues Lawsonさん <source media="…" src=""> が提案 <source src=""></picture><img srcset="a.png 1x a-hd.png 2x"> WHATWGが支持<picture> 折衷案。コミュニティグルー <source media="…" srcset=""> プによる仕様が存在 <source srcset=""></picture>
  32. 32. CSSスプライトアニメーション• 手の画像は、すべてCSSスプライトアニ メーションで実現
  33. 33. CSSスプライトアニメーション• スプライト画像をbackgroundに指定し、 background-positionをずらしていく – 「覗き穴」を横にずらしていくイメージ。• Android 2.3標準ブラウザには、ひとコマ目が残り続け るというバグがあるので、ひとコマ目は透明画像を指 定。
  34. 34. 4. jQuery Mobileを使うべきだろうか?
  35. 35. Framework
  36. 36. 作業を枠にはめ、生産性を向上させる Framework Creativity
  37. 37. 死の妥協
  38. 38. 「制約」から見た jQuery Mobile1. 型に従ったマークアップ2. フレームワークにHTMLを「いじられる」3. デザインにこだわるならカスタマイズが 必須4. カスタマイズが面倒5. パフォーマンス上のハンデを背負う
  39. 39. 「利点」から見た jQuery Mobile1. 慣れればとにかく簡単2. マルチプラットフォーム 現在の想い:3. 全ページが一意なURLを持つ クリエイティブなページ以外4. ではバンバン使おう。 ページ分割・読み込みが容易
  40. 40. 5. 定型タスクを自動化したい
  41. 41. なんだか定型タスクが増えた• JavaScriptのミニファイ• CSSのミニファイ• ファイルの結合とファイル名生成• LESSのコンパイル• 異なるサイズの画像生成
  42. 42. grunt.js• Nodeで動作する、タスク自動化ツール
  43. 43. grunt.jsで定型化した作業 LESSをCSSにコンパイル JavaScript/CSSをミニファイ JavaScript/CSSを結合 ファイル名をハッシュ値から生成結合したファイルは本番時にのみ使用 (サーバサイドで切り替え)
  44. 44. まとめ
  45. 45. 苦しかった・・・
  46. 46. けど
  47. 47. なんだろう、このワクワク感
  48. 48. 新しいWeb開発を楽しもう! @Shumpei
  49. 49. アンケートへのご協力をお願いします!URL: http://bit.ly/html5j2012q参加したセッションに関するアンケートに答えて受付に行くと、素敵な景品が!

×