HTML5でオフラインWebアプリケーションを作ろう
•
72 gostaram•26,950 visualizações
第5.5回 GTUG Girls MeetUpで実施たチュートリアルの資料です。
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a HTML5でオフラインWebアプリケーションを作ろう
Semelhante a HTML5でオフラインWebアプリケーションを作ろう (20)
Mais de yoshikawa_t
Mais de yoshikawa_t (20)
HTML5でオフラインWebアプリケーションを作ろう
- 1. HTML 5 で作る オフラインWebアプリケーション 2012/05/28 第5.5回 GTUG Girls Meetup Toru Yoshikawa ( @yoshikawa_t )
- 2. Who? 吉川 徹/Toru Yoshikawa html5j.org/HTML5とか勉強会スタッフ Google API Expert ( Chrome )/Chrome API Developers JP Sublime Text 2 Japan Users Group allWebクリエイター塾/jQuery Mobile担当講師 Twitter: @yoshikawa_t Blog: http://d.hatena.ne.jp/pikotea/
- 3. Agenda オフラインWebアプリケーションとは？ オフラインWebアプリケーションの作り方 オフラインWebアプリケーションの関連する仕様 1. ファイルのキャッシュ（Application Cache） 2. データの保存（Web Storage） 3. データベース（Indexed Database/Web SQL Database) 4. データの同期、他（Online/Offline events, Network Information API, Shared Worker） 5. ファイルの保存（File APIs） まとめ
- 5. オフラインWebアプリケーションの特徴 オフラインで動作させることができる 地下鉄などネットワークが使えない環境で も利用できる サーバーが落ちていてもサイトを表示する ことができる 必要なリソースをキャッシュするため、高速 に動作する
- 6. Demo: Angry Birds http://chrome.angrybirds.com/
- 7. Demo: Financial Times http://app.ft.com/
- 9. 従来のWebアプリケーションのアーキテクチャ Webサーバー DB HTML/CSS/ アプリケーションデータ JavaScript ブラウザ
- 10. オフラインWebアプリケーションのアーキテクチャ （その1: シンプルな構成） Webサーバー キャッシュ HTML/CSS/ JavaScript ブラウザ アプリケーションデータ DB
- 11. オフラインWebアプリケーションのアーキテクチャ （その2: データの同期がある） Webサーバー DB キャッシュ HTML/CSS/ データの同期 JavaScript ブラウザ バックグラウンド アプリケーションデータ DB
- 12. オフラインWebアプリケーションに関連する仕様 必要なファイルをキャッシュする Application Cache ユーザーデータ・設定、アプリケーションデータをローカルに保存 Web Storage Indexed Database/Web SQL Database 必要があれば適時、データの同期を行う、他 Online/Offline events Network Information API Web Workers (Shared Worker) ファイルをローカルに保存 File APIs (File API, File API: Directories and System)
- 13. オフラインWebアプリケーションのアーキテクチャ Webサーバー DB XHR2 WebSockets AppCache Online/Offline events HTML/CSS/ Network Information API JavaScript Shared Worker ブラウザ アプリケーションデータ Web Storage IndexedDB/WebSQL File APIs
- 15. 1. 必要なファイルをキャッシュする Application Cache
- 16. Application Cache とは？ ファイルをキャッシュする（静的ファイル） html/css/javascript/画像などをそのまま キャッシュすることができる 既存のサイトにほとんど手を加えなくてもそのま ま適用できる 既に多くのモバイルデバイスでサポートしている
- 17. Application Cache の利用方法 1.マニフェストファイルを作成する 2.<html>要素のmanifest属性でマニフェスト ファイルを記述して読み込む 3.（サーバー設定でマニフェストファイルのMIME Typeをtext/cache-manifestに設定する）
- 18. 1. マニフェストファイルを作成する site.appcache CACHE MANIFEST #last update: 2012/05/28 CACHE: menu.html css/reset.css js/javascript.js FALLBACK: #index.html index_offline.html NETWORK: *
- 19. 2. <html>要素のmanifest属性でマニフェスト ファイルを記述して読み込む index.html <!DOCTYPE html> <html manifest="site.appcache"> ... </html>
- 20. 3. サーバー設定でマニフェストファイルのMIME Typeをtext/cache-manifestに設定する ※ 将来的には、不要になります Example: Apacheの.htaccessでの設定例 .htaccess AddType text/cache-manifest .appcache Example: JEEでの設定例 web.xml <mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
- 21. Application Cacheの注意点 マニフェストファイルを読み込むhtmlファイルは自動的にキャッ シュされる ひとつでもエラーがあると全体がキャッシュされない（構文エラー や404など） ファイルの更新と同時に、マニフェストファイルの更新を忘れずに XHRにはキャッシュが適用されない メディアファイル（動画や音声）はまだ非サポート（※キャッシュさ れるがオフラインで再生できない） 保存できる容量は20MB∼30MB程度（Chromeはディスクの10%）
- 22. Application Cacheの参考情報 マニフェストファイルの生成ツール（manifestR） バリデーター（Cache Manifest Validator） A BEGINNER'S GUIDE TO USING THE APPLICATION CACHE - HTML5 Rocks Application Cacheの削除（Chromeの場合） chrome://appcache-internals
- 23. 2. ユーザーデータ・設定をローカルに保存する Web Storage
- 25. Web Storage の利用方法 データの保存 // fooというキーでbarという値を保存する // 利用方法は3つの書き方があるが、いずれも同じ結果になる localStorage.setItem("foo", "bar"); localStorage.foo = "bar"; localStorage[foo] = "bar"; データの取得 // fooというキーで値を取得する localStorage.getItem("foo"); localStorage.foo; localStorage[foo];
- 26. Web Storage の利用方法 データの削除 // fooというキーのデータを削除する localStorage.removeItem("foo"); // すべて削除する localStorage.clear(); データの一覧 //保存されている値をすべて表示する for ( var i = 0, len = localStorage.length; i < len; i++ ) { console.log( localStorage.getItem(localStorage.key(i)) ); }
- 27. Web Storage の利用方法 JavaScriptオブジェクトを扱う // JavaScriptオブジェクトをJSON化して保存する var data = { foo: bar }; localStorage.setItem('data', JSON.stringify(data)); // JavaScriptオブジェクトに戻して取得する var data = JSON.parse( localStorage.getItem('data') );
- 28. Web Storageの注意点 オリジン（プロトコル、ドメイン、ポート）ごと にデータが保存される（ Same Origin Policy） 保存できる容量は、5MB程度 個人情報やパスワードのような機微なデータは保 存しない方が良い
- 29. Same Origin Policy 各APIのスコープをオリジンごとに制限する HTML5共通の仕様 • オリジンは次の3つで構成される • スキーマ • ドメイン • ポート http://example.com:80/
- 30. 3. アプリケーションデータをローカルに保存する Indexed Database/Web SQL Database
- 31. Indexed Database とは？ JavaScriptオブジェクトを保存できる インデックスによる検索が可能（非SQL） トランザクションによる複数のデータ操作が可能 APIが少し難解で扱いづらい Chrome、Firefoxが対応（IEは10から対応）
- 32. Web SQL Database とは？ RDBMS SQLでデータを操作することができる 仕様策定が停止されている Chrome、Safari、Operaが対応 モバイルはAndroid、Safariが対応
- 33. Indexed Database の利用方法 データベースの作成 // データベースの作成 var request = indexedDB.open("dbName", 1); // データベースのスキーマ作成 request.onupgradeneeded = function(event) { var db = event.target.result; // オブジェクトストアの作成 var objectStore = db.createObjectStore("objectStoreName", { keyPath: "id" }); // インデックスの作成 objectStore.createIndex("indexName", "name", { unique: false }); // イニシャルデータの保存 var data = [ { id: 1, name: "a", email: "a@example.com", tel: "0123" }, { id: 2, name: "b", email: "b@example.com", tel: "4567" } ]; for (i in data) { objectStore.add(data[i]); } };
- 34. Indexed Database の利用方法 データベースのオープンとデータの取得 // データベースのオープン var openRequest = indexedDB.open("dbName"); openRequest.onsuccess = function(event) { var db = event.target.result; var transaction = db.transaction(["objectStoreName"]); var objectStore = transaction.objectStore("objectStoreName"); var request = objectStore.get(1); request.onerror = function(evt) { // エラー }; request.onsuccess = function(evt) { // console.log( request.result.name ); }; };
- 35. Indexed Database の利用方法 カーソルを利用したデータの取得（イテレート） var objectStore = db.transaction("objectStoreName").objectStore("objectStoreName"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // console.log( cursor.value.name); cursor.continue(); } }; インデックスを検索 var index = objectStore.index("indexName"); index.get("a").onsuccess = function(event) { // console.log(event.target.result.id); };
- 36. Indexed Database の利用方法 データの追加 var transaction = db.transaction(["objectStoreName"], IDBTransaction.READ_WRITE); var objectStore = transaction.objectStore("objectStoreName"); var request = objectStore.add({ //... }); request.onsuccess = function(event) { // データ追加成功 }
- 37. Indexed Databaseの注意点 JavaScriptオブジェクト内のfunctionなどは保存できな い（Structure Clone Algorithm） オブジェクトストアやインデックスの作成は、データベース オープン時の特殊なトランザクション中にしか変更できない （Chromeでは、setVersionを使う） 必ずトランザクションを利用してデータの取得、更新を行う データをソートするには、ソート用のインデックスを作成す る
- 38. Structured Clone Algorithm JavaScriptデータをコピーする際にオブジェクトか ら関数や循環参照を取り除いてコピーするアルゴ リズム。Indexed Databaseのデータの保存やWeb Workersでのメッセージの交換に利用されている // コピー前 var data = { for: "bar", test : function(){ //... } } // コピー後 /* data = */ { for: "bar" }
- 39. Indexed Databaseの参考情報 A SIMPLE TODO LIST USING HTML5 INDEXEDDB -HTML5 Rocks Using IndexedDB - MDN jdb.js
- 40. 4. 必要があれば適時、データの同期を行う Online/Offline events Network Information API Shared Worker
- 41. Online/Offline eventsとは？ Demo ( http://html5- demos.appspot.com/static/ navigator.onLine.html ) オンライン/オフラインの状態を取得できる オンラインになったときに同期を開始するなどの 処理を行うことができる
- 42. Online/Offline events の利用方法 オンライン/オフライン状態の取得 if ( navigator.onLine ) { console.log('ONLINE'); } else { console.log('OFFLINE'); } オンラインイベント window.addEventListener('online', function(e) { // 同期の開始 }, false);
- 43. Online/Offline eventsの注意点 接続しているネットワークしか見ていないので、 オンラインになったからといってインターネット に繋がっているとは限らない
- 44. Network Information APIとは？ 接続しているネットワークの速度、課金の有無な どを取得できる ネットワークが遅い場合や従量課金で接続してい る場合などは、同期を自動で行わないなど処理を 分けることができる Android 2.2+、Firefoxのみで利用可能
- 45. Online/Offline events の利用方法 ネットワークの速度を取得する（MB/s） if ( navigator.connection.bandwidth < 2 ) { // 2MB/s以下の場合 } else { // ブロードバンド接続の場合 } 課金の有無を取得する if ( navigator.connection.metered == false ) { // データ同期処理 }
- 47. Shared Worker の利用方法 ワーカーの作成とメッセージの送受信 var worker = new SharedWorker('worker.js'); worker.addEventListener('message', function(e) { console.log('メッセージ受信: ', e.data); }, false); worker.postMessage('メッセージ送信'); worker.js // 受け取ったメッセージをそのまま返信 self.addEventListener('message', function(e) { self.postMessage(e.data); }, false);
- 48. Shared Worker の参考情報 THE BASICS OF WEB WORKERS - HTML5 Rocks
- 49. 5. ファイルの保存 File APIs
- 50. File APIs とは？ 大きな仕様は、File APIとFile API: Directories and Systems (File System API)の2つ File APIでは、ドラッグ＆ドロップされたファイルを読み取るFile Readerなどが定義されている File System APIでは、Webアプリケーションで利用可能なファイル システム領域を作成できる バイナリファイルをそのまま保存しておきたい場合などに利用する Demo ( http://www.htmlfivewow.com/demos/terminal/ terminal.html ) 現状は、Chromeのみでの実装
- 51. File System API の利用方法 選択したファイルをコピーして保存する <input type="file" id="myfile" multiple /> document.querySelector('#myfile').onchange = function(e) { var files = this.files; window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { for (var i = 0, file; file = files[i]; ++i) { (function(f) { fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(f); }, errorHandler); }, errorHandler); })(file); } }, errorHandler); };
- 52. File APIs の参考情報 READING FILES IN JAVASCRIPT USING THE FILE APIS - HTML5 Rocks EXPLORING THE FILESYSTEM APIS - HTML5 Rocks ファイルのクォータを管理するQuota Management APIも策定中
- 53. まとめ
- 54. まとめ Application CacheやWeb Storageなどは、簡単 に利用できるので手軽に導入できる 反面、Indexed Databaseはまだまだ利用できる環 境も少なく、扱いづらいため普及と便利なライブラ リが待ち望まれる データの同期を行うWebアプリケーションの場合、 フェールセーフやコリジョンなどを考えるので難易度 が非常に高くなる。コストとの兼ね合いを
- 55. Thank you!! ( @yoshikawa_t )
- 56. Resources HTML5のオフライン機能( http://gdd11-html5- offline.googlecode.com/git/japanese.html ) HTML5 Rocks ( http://www.html5rocks.com/ja/ ) Mozilla Developer Network ( https://developer.mozilla.org/ ja/ ) When can i use... ( http://caniuse.com ) Mobile HTML5 ( http://mobilehtml5.org/ )