パララックスでレスポンシブでj query mobileなサイトのつくりかた
DESCRIPTION
HTML5 Conrerence 2012TRANSCRIPT
パララックスでレスポンシブでjQuery Mobile なサイトのつくりかた
2012/9/8
株式会社シーエー・モバイルWeb 先端技術フェロー
白石俊平
自己紹介• 白石 俊平（しらいし しゅんぺい）• html5j.org 管理人• HTML5 とか勉強会 主催• Web 先端技術味見部 部長• 読書するエンジニアの会 主催• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
今 Web は、変わろうとしている
レスポンシブ
アプリケーション化
一足お先にチャレンジしました。
死にかけました
ぼくらが直面した「課題」1. パララックススクロールをモバイルでも実現したい2. レスポンシブで動きまくるサイトを作らなくてはならない3. レスポンシブで画像満載のサイトを作らなくてはならない4. jQuery Mobile を使うべきだろうか？5. 定形タスクを自動化したい
1. パララックススクロールをモバイルでも実現したい
様々なライブラリが利用可能、だが・・
最終的なパ・・インスパイア元
Nike Air Jordan 2012
つかいかた// スクロール部分を作成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();
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% / @grid-hcount;// ミックスイン.gwidth(@count) { width: @grid-cell-width * @count;}#logo { .gwidth(2); // ミックスインの使用}
メディアクエリは控えめに• 全ブレークポイント内でスタイルの上書
きが発生するため、すぐに肥大化する– 「巨大な switch-case 」化
• 要件にもよるが、 Fluid Layout を補う形で使用する程度が望ましいように思える。
セマンティックなマークアップメディアクエリ＝ CSS の切り替え
単一のマークアップ＆異なる CSS という構造
「揺らがない」マークアップが必要だ！
セマンティックを深く考えぬかれたコンテンツは、変更に強い！
インタラクティブなコードでは、「 UI の状態」を意識しよう。
ぼくらが変更したいのは、「 CSS プロパティ」じゃなくて「状態」で
す。
#dialog の display をnone にする
#message のcolor を green 、
display を block にする
ダイアログを閉じる
ノーマルメッセージを表示する
「状態変化」を意識したコーディング
• CSS プロパティを直接 JavaScript で書き換えるのをやめる
• UI の状態はクラスで表すと良いjQuery でいうと、• css() やエフェクト系メソッドの使用を控える• addClass(),removeClass() を中心に
「状態変化」を意識したコーディング
$('#msg').hide();
$('#msg').addClass('hidden');
Before:
After:
#msg.hidden { display: none;}
状態変化にエフェクトを用いるよう変更する
#msg.hidden { display: none;}
#msg { opacity: 1; transition: opacity 1s ease-in;}#msg.hidden { opacity: 0;}
変更箇所が CSS に集中し、保守性が向上する
3. レスポンシブで画像満載のサイトを作らねばならない
レスポンシブイメージ• スクリーンサイズに応じて、異なるサイズ
の画像を読み込みたい。PC
Tablet
Smartphone
Riloadr
• レスポンシブイメージを実現するフレームワーク
• JS によるセットアップさえ済ませれば、あとはマークアップのみ。
<img class="responsive" data-src="img.png"><!-- 以下は省略可能 --><noscript> <img src="img-small.png"></noscript>
レスポンシブイメージをめぐる仕様も
<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>
折衷案。コミュニティグループによる仕様が存在
CSS スプライトアニメーション• 手の画像は、すべて CSS スプライトアニ
メーションで実現
CSS スプライトアニメーション• スプライト画像を background に指定し、
background-position をずらしていく– 「覗き穴」を横にずらしていくイメージ。
• Android 2.3標準ブラウザには、ひとコマ目が残り続けるというバグがあるので、ひとコマ目は透明画像を指定。
4. jQuery Mobile を使うべきだろうか？
Framework
Framework
作業を枠にはめ、生産性を向上させる
Creativity
死の妥協
「制約」から見たjQuery Mobile
1. 型に従ったマークアップ2. フレームワークに HTML を「いじられ
る」3. デザインにこだわるならカスタマイズが
必須4. カスタマイズが面倒5. パフォーマンス上のハンデを背負う
「利点」から見たjQuery Mobile
1. 慣れればとにかく簡単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
参加したセッションに関するアンケートに答えて受付に行くと、素敵な景品が！