Downloaded 142 times
Uploaded byShumpei Shiraishi
PPTX, PDF20,102 views
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
HTML5 Conrerence 2012
Recommended
More Related Content
What's hot
Similar to パララックスでレスポンシブでJ query mobileなサイトのつくりかた
More from Shumpei Shiraishi
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
- 1.パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた 2012/9/8 株式会社シーエー・モバイル Web先端技術フェロー 白石俊平
- 2.自己紹介•白石 俊平（しらいし しゅんぺい）• html5j.org 管理人• HTML5とか勉強会 主催• Web先端技術味見部 部長• 読書するエンジニアの会 主催• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
- 3.今Webは、変わろうとしている レスポンシブ アプリケーション化
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.ぼくらが直面した「課題」1.パララックススクロールをモバイルでも実現したい2. レスポンシブで動きまくるサイトを作らなくてはならない3. レスポンシブで画像満載のサイトを作らなくてはならない4. jQuery Mobileを使うべきだろうか？5. 定形タスクを自動化したい
- 12.1. パララックススクロールを モバイルでも実現したい
- 13.
- 14.最終的なパ・・インスパイア元 Nike Air Jordan 2012
- 15.ゼロから書き起こして公開しました。 ScrollTween.js
- 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.
- 18.レスポンシブWebデザインの基礎• Fluid Grid•Fluid Image• CSS Media Queries
- 19.レスポンシブWebデザインの基礎• Fluid Grid – 幅をパーセント指定するグリッドレイアウト• Fluid Image – 画像の幅をパーセント指定する• CSS Media Queries – デバイスの要件に応じてCSSを切り替え
- 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.メディアクエリは控えめに• 全ブレークポイント内でスタイルの上書きが発生するため、すぐに肥大化する – 「巨大なswitch-case」化• 要件にもよるが、Fluid Layoutを補う形で 使用する程度が望ましいように思える。
- 22.
- 23.
- 24.インタラクティブなコードでは、 「UIの状態」を意識しよう。#dialogのdisplayを ダイアログを閉じる noneにする #messageの ノーマルメッセージを colorをgreen、 表示するdisplayをblockにする ぼくらが変更したいのは、「CSSプロパティ」じゃなくて「状態」で す。
- 25.「状態変化」を意識した コーディング• CSSプロパティを直接JavaScriptで書き換 えるのをやめる• UIの状態はクラスで表すと良いjQueryでいうと、• css()やエフェクト系メソッドの使用を控える• addClass(),removeClass()を中心に
- 26.「状態変化」を意識した コーディングBefore: $('#msg').hide();After: $('#msg').addClass('hidden'); #msg.hidden { display: none; }
- 27.状態変化にエフェクトを 用いるよう変更する#msg.hidden { display: none;} 変更箇所がCSSに集中し、#msg { 保守性が向上する opacity: 1; transition: opacity 1s ease-in;}#msg.hidden { opacity: 0;}
- 28.
- 29.レスポンシブイメージ• スクリーンサイズに応じて、異なるサイズの画像を読み込みたい。 PC Tablet Smartphone
- 30.Riloadr• レスポンシブイメージを実現するフレームワーク• JSによるセットアップさえ済ませれば、 あとはマークアップのみ。 <img class="responsive" data-src="img.png"> <!-- 以下は省略可能 --> <noscript> <img src="img-small.png"> </noscript>
- 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.
- 33.CSSスプライトアニメーション• スプライト画像をbackgroundに指定し、background-positionをずらしていく – 「覗き穴」を横にずらしていくイメージ。• Android 2.3標準ブラウザには、ひとコマ目が残り続け るというバグがあるので、ひとコマ目は透明画像を指 定。
- 34.
- 35.
- 36.作業を枠にはめ、生産性を向上させる Framework Creativity
- 37.
- 38.「制約」から見た jQuery Mobile1. 型に従ったマークアップ2. フレームワークにHTMLを「いじられる」3. デザインにこだわるならカスタマイズが 必須4. カスタマイズが面倒5. パフォーマンス上のハンデを背負う
- 39.「利点」から見た jQuery Mobile1. 慣れればとにかく簡単2. マルチプラットフォーム 現在の想い：3. 全ページが一意なURLを持つ クリエイティブなページ以外4. ではバンバン使おう。 ページ分割・読み込みが容易
- 40.
- 41.なんだか定型タスクが増えた•JavaScriptのミニファイ• CSSのミニファイ• ファイルの結合とファイル名生成• LESSのコンパイル• 異なるサイズの画像生成
- 42.
- 43.grunt.jsで定型化した作業 LESSをCSSにコンパイル JavaScript/CSSをミニファイ JavaScript/CSSを結合 ファイル名をハッシュ値から生成結合したファイルは本番時にのみ使用 （サーバサイドで切り替え）
- 44.
- 45.
- 46.
- 47.
- 48.新しいWeb開発を楽しもう！ @Shumpei
- 49.