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