Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
34 likes4,476 views
QCon Tokyo 2012で使用した資料。2012年時点での、Webフロントエンド周りのトレンドを総括するような内容です。
![IndexedDBのコード例例
¨ IndexedDBの使い勝⼿手はよくない。。
¤ →jdb.jsというフレームワーク作りました！
var tx =!
db.transaction(['Feed'], IDBTransaction.READ_ONLY);!
var feedStore = tx.objectStore('Feed');!
var cursorReq = feedStore.openCursor();!
cursorReq.onsuccess = function() {!
var cursor = cursorReq.result;!
if (!cursor) {!
return;!
}!
var value = cursor.value;!
cursor.continue();!
};!
cursorReq.onerror = function() {!
…!
};!](https://image.slidesharecdn.com/qcon-pptx-120420003638-phpapp01/85/Web-HTML5-19-320.jpg)
![File APIのコード例例
¨ ファイルの読み取りは、ドラッグ＆ドロップ
かファイル選択ダイアログに限られている。
element.ondrag = function(event) {!
var files = event.dataTransfer.files;!
var reader = new FileReader();!
reader.onload = function() {!
var result = reader.result;!
…!
};!
reader.readAsText(files[0]);!
};!](https://image.slidesharecdn.com/qcon-pptx-120420003638-phpapp01/85/Web-HTML5-22-320.jpg)
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
- 1. WEBフロントエンド開発の 最新トレンド HTML5,モバイル,オフライン 2012/4/17 株式会社シーエー・モバイル Web先端技術フェロー ⽩白⽯石俊平
- 2. ⾃自⼰己紹介 ¨ ⽩白⽯石俊平と申します。 ¨ コミュニティhtml5j.org管理理⼈人（会員数4500名 超） ¨ HTML5とか勉強会主催（毎⽉月⼀一回、100名を動員） ¨ Google API Expert (HTML5) ¨ Microsoft Most Valuable Professional (IE9) ¨ Twitter: @Shumpei ¨ 著書：HTML5&API⼊入⾨門
- 4. Nike Air Jordan 2012 ¨ 最近はやりの、スクロールと連動した視差ス クロールをフル活⽤用したサイト
- 5. ChronoZoom ¨ 全宇宙史に関する様々なリソースを参照でき るWebアプリ
- 6. WebGL City ¨ 3Dで表現された都市空間を⾃自在に⾶飛び回れる デモ。
- 9. 2012年年中に、HTML5をモバイルアプリに統合し ようと考えている開発者の割合 Appcelerator/IDC Mobile Developer Report, Q1 2012
- 10. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 消極的な理理由 ¤ iOS上ではFlashが動かない ¤ 古いブラウザ（IE6-8）を考慮する必要がない
- 11. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なデバイスに対応できる ¤ 様々なスクリーンサイズに対応できる
- 12. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る n オフラインWebアプリケーション n デバイスの様々な機能にアクセス ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
- 13. オフラインWebアプリケーション ¨ HTML/CSS/JavaScript/画像などの、Webアプリが必 要とするリソースを全てローカルにキャッシュすること で実現 o 例例: Titanium Mobile API Document
- 14. アプリケーションキャッシュ ¨ キャッシュマニフェストを作成し、html要素の manifest属性に指定することでオフライン化可能 hello.appcache CACHE MANIFEST! ! hello.html! hello.js! hello.css hello.html <!DOCTYPE html>! <html manifest="hello.appcache">! …! </html>!
- 15. オフラインWebアプリケーション ¨ オフラインでも編集可能なWebアプリケー ションを作るには？ ¨ →ブラウザ内（ローカルで利利⽤用できる）デー タベースやファイルシステムを利利⽤用する。 ¤ Webアプリのデータの読み書きはローカルのデー タベースやファイルに対して⾏行行う ¤ オンライン時にサーバに送信する
- 16. オフラインWebアプリの典型的な アーキテクチャ クライアント UI 同期 エン ジン ローカルストレージ
- 17. Indexed Database API ¨ Indexed Database APIは、ブラウザに内蔵さ れたデータベース（デモ）。
- 18. Indexed Database APIとは？ • ブラウザ組み込みのキー・バリューストア • RDBのテーブルにあたるものがオブジェクトストア • JavaScriptオブジェクトをオブジェクトストアに対し てそのまま読み書きできる。
- 19. IndexedDBのコード例例 ¨ IndexedDBの使い勝⼿手はよくない。。 ¤ →jdb.jsというフレームワーク作りました！ var tx =! db.transaction(['Feed'], IDBTransaction.READ_ONLY);! var feedStore = tx.objectStore('Feed');! var cursorReq = feedStore.openCursor();! cursorReq.onsuccess = function() {! var cursor = cursorReq.result;! if (!cursor) {! return;! }! var value = cursor.value;! cursor.continue();! };! cursorReq.onerror = function() {! …! };!
- 20. File API ¨ Webアプリによるファイルの読み（書き）も 可能に（デモ）
- 21. File APIとは？ ¨ Webアプリからファイルを読み書きするため のAPI。 ¨ 以下の3仕様からなる。 ¤ File API・・・ファイルの読み取りや基本的なイ ンターフェースの定義 ¤ File API:Writer・・・ファイルの書き出し ¤ File API:Systems and Directories・・・ファイ ルシステムとディレクトリ構造
- 22. File APIのコード例例 ¨ ファイルの読み取りは、ドラッグ＆ドロップ かファイル選択ダイアログに限られている。 element.ondrag = function(event) {! var files = event.dataTransfer.files;! var reader = new FileReader();! reader.onload = function() {! var result = reader.result;! …! };! reader.readAsText(files[0]);! };!
- 23. デバイスの様々な機能にアクセス ¨ Geolocation APIによる位置情報へのアクセス （デモ）
- 24. Geolocation APIのコード例例 navigator.geolocation.getCurrentPosition(function(pos) {! var coords = pos.coords;! var latitude = coords.latitude;! var longitude = coords.longitude;! …! });!
- 25. デバイスの様々な機能にアクセス ¨ Device Orientation Eventにより、デバイ スの向きや傾きを検知する（デモ）
- 26. Device Orientation Eventのコード例例 window.ondeviceorientation = function(event) {! var alpha = event.alpha;! var beta = event.beta;! var gamma = event.gamma;! …! };!
- 27. デバイスの様々な機能にアクセス ¨ カメラやマイクからメディアデータを取り込 む（デモ）
- 28. getUserMedia()のコード例例 <video id="v" autoplay></video>! var video = document.getElementById("v");! navigator.getUserMedia("video", function(stream) {! var url = URL.createObjectURL(stream);! video.src = url;! });!
- 29. デバイスの様々な機能にアクセス ¨ 他にも、以下のようなことを⾏行行えるようにな る ¤ ⾳音声によるテキスト⼊入⼒力力 ¤ 温度度や光、近接センサーなど、各種センサーを扱 える ネイティブアプリとの機能差が どんどん縮⼩小していく！ ¤ バイブレーションを実⾏行行できる ¤ アドレス帳やギャラリーからデータを取得できる ¤ バッテリーの状態にアクセスできる ¤ ネットワークの状態にアクセスできる
- 30. とはいえ、 ¨ デバイス間の実装にはかなりのバラつきがあ る
- 31. Core Mobile Web Platform Community Group ¨ FacebookによるモバイルWebの断⽚片化を解決 するW3Cコミュニティグループ
- 32. ringmark ¨ http://rng.io
- 33. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
- 34. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
- 35. 様々なスクリーンサイズに対応で きる ¨ レスポンシブWebデザインにより、単⼀一の ソースコードで複数のスクリーンサイズに対 応できる
- 36. レスポンシブWebデザインの例例 GRAVITATE
- 37. レスポンシブWebデザインの例例 CREAN AIR WORKS
- 38. レスポンシブWebデザインで使わ れるテクニック ¨ Fluid Grid・・・ピクセルではなく、パーセン ト指定により幅を決定する ¨ Media Queries・・・デバイスの幅や⾼高さな ど、様々な条件に応じて、CSSを切切り替える 技術
- 39. レスポンシブWebデザインのサンプル ¨ コンテンツの幅に応じて、ピクセル指定と％ 指定を切切り替える事により、PCサイトも1 ソースで実現できる。
- 40. レスポンシブWebデザインのサンプル #wrapper { width: 100% }! #col-left { width: 100%; float: none; }! #col-right { width: 100%; float: none; }! ! @media screen and (min-width: 768px) {! #col-left { width: 30%; float: left; }! #col-right { width: 70%; float: left; }! }! ! @media screen and (min-width: 960px) {! #wrapper { width: 960px; }! }!
- 41. レスポンシブWebデザインは万能 ではない ¨ コンテンツや画像のファイルサイズがモバイ ルにとって⼤大きすぎ、パフォーマンスが劣劣化 することも。 ¨ 画像をレスポンシブにするための⼯工夫や、ス クリーンサイズに合わせてコンテンツをサー バ側で切切り詰めるなどの対処が必要
- 42. WebApp Field Guide ¨ オフライン対応、レスポンシブWebデザイン
- 43. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
- 44. なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか？ ¨ 積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
- 46. HTML5のマルチプラットフォーム 性が改めて注⽬目されている ¨ 例例：jQuery Mobileがサポートするプラット フォーム（Grade A） Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb), Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0, Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2, Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color 1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
- 47. jQuery Mobileとは ¨ スマートフォン向けのWebサイト開発フレー ムワーク ¨ 現在のバージョンは1.1.0
- 48. jQuery Mobileの特徴 ¨ ネイティブアプリに近い操作感 ¨ テーマの切切り替えが可能 ¨ JavaScriptの知識識がなくてもそこそこ使える ¨ jQueryに依存している ¨ マルチプラットフォーム
- 49. ネイティブアプリに近い操作感 ¨ CSS/JavaScriptを駆使して、「ネイティブア プリに近い」操作感を実現する ¤ UIコンポーネント・・・フォーム要素やリストな ど、⽤用意されているコンポーネントがすべてブラ ウザネイティブのUIに近づけてあり、操作しやす い ¤ ページ遷移がなめらかなアニメーションで実現さ れる（画⾯面のリフレッシュが発⽣生しない） ¨ jQuery Mobileのドキュメントがデモになって いる。
- 50. テーマの切切り替えが可能 ¨ jQuery Mobileは、CSSの切切り替えのみで⼤大幅 にUIを変更更することが可能。 ¤ ⾊色合いを変えるだけならば「スウォッチ」の変更更 だけで可能
- 51. JavaScriptの知識識がなくてもそこ そこ使える ¨ マークアップに特別な属性（data-*属性）を 加えていくだけで、簡単にスマートフォン対 応サイトを作成できる。
- 52. jQueryに依存している ¨ jQueryに強く依存している。 ¨ バージョン1.1でjQuery1.7系に対応。 ¨ 少し凝ったことをやるなら、jQueryの知識識が あったほうが良良い。
- 53. マルチプラットフォーム ¨ デスクトップを含め、22のプラットフォーム に対して同様のユーザ体験を提供できる ¤ Android 2.1-4.0 ¤ iOS 3.2-5.0 ¨ プログレッシブ・エンハンスメントのアプ ローチにより、古いブラウザに対しても最低 限の情報提供は⾏行行える。
- 55. ボイラープレートコードを貼りつけて みる。(1/7) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Mobile Live Coding!</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="top_page" data-role="page"> <div data-role="header"> <h1>jQuery Mobileをはじめよう！</h1> </div> <div data-role="content"> <p>ページの内容はここに書きます。</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>
- 56. サブページを作ってみる(2/7) <div id="sub_page" data-role="page"> <div data-role="header"> <h1>こどもたち</h1> </div> <div data-role="content"> さぶぺーじです </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> <a href="#sub_page">こどもたち</a>
- 59. 画⾯面遷移を変更更してみる(5/7) data-transition="slideup" slide slideup slidedown pop fade flip turn flow
- 60. リストを作ってみる(6/7) <ul data-role="listview" class="children_list"> <li><a href="http://goo.gl/vcQd3">こうたろう</a></li> <li><a href="http://goo.gl/p8ltb">ちほ</a></li> </ul>
- 62. jQuery Mobileを使⽤用したサイトは 増加中 ¨ DODA、マイナビバイト、マイナビ派遣、じゃ らんnetなど、続々と利利⽤用事例例は増加中 ¨ jQuery Mobileを使った国内スマホサイトまと め ¨ ⼤大⼿手によって採⽤用されていることからも、安 ⼼心して使えるフレームワーク。
- 64. アプリケーションをHTML5「のみ」で作ろうと する開発者はたった6% Appcelerator/IDC Mobile Developer Report, Q1 2012
- 65. まとめ ¨ 今年年モバイル上（のハイブリッドアプリ）で、 HTML5は爆発的に普及する！ ¤ その際、jQuery Mobile、オフラインWebアプリ、 レスポンシブWebデザインなどが活⽤用される ¨ 2020年年には、アプリよりもWebが主流流になっ ているかも知れない？（59%がWebを選択） http://japan.cnet.com/news/business/35015489/