Download as PDF, PPTX
![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() {! …!};!](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fqcon-pptx-120420003638-phpapp01%2f75%2fWeb-HTML5-19-2048.jpg&f=jpg&w=240)
![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]);!};!](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fqcon-pptx-120420003638-phpapp01%2f75%2fWeb-HTML5-22-2048.jpg&f=jpg&w=240)
Uploaded byShumpei Shiraishi
PDF, PPTX4,481 views
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
QCon Tokyo 2012で使用した資料。2012年時点での、Webフロントエンド周りのトレンドを総括するような内容です。
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⼊入⾨門
- 3.
- 4.Nike Air Jordan2012¨ 最近はやりの、スクロールと連動した視差ス クロールをフル活⽤用したサイト
- 5.ChronoZoom¨ 全宇宙史に関する様々なリソースを参照でき るWebアプリ
- 6.WebGL City¨ 3Dで表現された都市空間を⾃自在に⾶飛び回れる デモ。
- 7.
- 9.2012年年中に、HTML5をモバイルアプリに統合しようと考えている開発者の割合 Appcelerator/IDCMobile 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>!varvideo = document.getElementById("v");!navigator.getUserMedia("video", function(stream) {! var url = URL.createObjectURL(stream);! video.src = url;!});!
- 29.デバイスの様々な機能にアクセス¨ 他にも、以下のようなことを⾏行行えるようにな る ¤ ⾳音声によるテキスト⼊入⼒力力 ¤ 温度度や光、近接センサーなど、各種センサーを扱 える ネイティブアプリとの機能差が どんどん縮⼩小していく！ ¤ バイブレーションを実⾏行行できる ¤ アドレス帳やギャラリーからデータを取得できる ¤ バッテリーの状態にアクセスできる ¤ ネットワークの状態にアクセスできる
- 30.とはいえ、¨ デバイス間の実装にはかなりのバラつきがあ る
- 31.Core Mobile WebPlatformCommunity 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¨ プログレッシブ・エンハンスメントのアプ ローチにより、古いブラウザに対しても最低 限の情報提供は⾏行行える。
- 54.
- 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>
- 57.
- 58.
- 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>
- 61.
- 62.jQuery Mobileを使⽤用したサイトは増加中¨ DODA、マイナビバイト、マイナビ派遣、じゃ らんnetなど、続々と利利⽤用事例例は増加中¨ jQuery Mobileを使った国内スマホサイトまと め¨ ⼤大⼿手によって採⽤用されていることからも、安 ⼼心して使えるフレームワーク。
- 63.
- 64.アプリケーションをHTML5「のみ」で作ろうとする開発者はたった6% Appcelerator/IDCMobile Developer Report, Q1 2012
- 65.まとめ¨ 今年年モバイル上（のハイブリッドアプリ）で、 HTML5は爆発的に普及する！ ¤ その際、jQuery Mobile、オフラインWebアプリ、 レスポンシブWebデザインなどが活⽤用される¨ 2020年年には、アプリよりもWebが主流流になっ ているかも知れない？（59%がWebを選択） http://japan.cnet.com/news/business/35015489/