0
HTML 5 で作るオフラインWebアプリケーション                      2012/05/28         第5.5回 GTUG Girls Meetup   Toru Yoshikawa ( @yoshikawa_t )
Who?吉川 徹/Toru Yoshikawa  html5j.org/HTML5とか勉強会スタッフ  Google API Expert ( Chrome )/Chrome API Developers  JP  Sublime Text 2...
AgendaオフラインWebアプリケーションとは?オフラインWebアプリケーションの作り方オフラインWebアプリケーションの関連する仕様  1. ファイルのキャッシュ(Application Cache)  2. データの保存(Web Stor...
オフラインWebアプリケーションとは?
オフラインWebアプリケーションの特徴 オフラインで動作させることができる  地下鉄などネットワークが使えない環境で  も利用できる  サーバーが落ちていてもサイトを表示する  ことができる 必要なリソースをキャッシュするため、高速 に動作する
Demo: Angry Birds    http://chrome.angrybirds.com/
Demo: Financial Times        http://app.ft.com/
オフラインWebアプリケーションの作り方1.必要なファイルをキャッシュする2.ユーザーデータ・設定をローカルに保存する3.アプリケーションデータをローカルに保存 する4.必要があれば適時、データの同期を行う5.ファイルをローカルに保存する
従来のWebアプリケーションのアーキテクチャ             Webサーバー   DBHTML/CSS/                   アプリケーションデータJavaScript             ブラウザ
オフラインWebアプリケーションのアーキテクチャ              (その1: シンプルな構成)              Webサーバー             キャッシュHTML/CSS/JavaScript            ...
オフラインWebアプリケーションのアーキテクチャ             (その2: データの同期がある)              Webサーバー        DB             キャッシュHTML/CSS/           ...
オフラインWebアプリケーションに関連する仕様 必要なファイルをキャッシュする   Application Cache ユーザーデータ・設定、アプリケーションデータをローカルに保存   Web Storage   Indexed Databas...
オフラインWebアプリケーションのアーキテクチャ              Webサーバー               DB                                               XHR2         ...
サンプル: オフラインTODOアプリhttp://dl.dropbox.com/u/18090951/gg5_5_offlineapp_todo.zip
1. 必要なファイルをキャッシュする   Application Cache
Application Cache とは? ファイルをキャッシュする(静的ファイル) html/css/javascript/画像などをそのまま キャッシュすることができる 既存のサイトにほとんど手を加えなくてもそのま ま適用できる 既に多くの...
Application Cache の利用方法1.マニフェストファイルを作成する2.<html>要素のmanifest属性でマニフェスト ファイルを記述して読み込む3.(サーバー設定でマニフェストファイルのMIME Typeをtext/cach...
1. マニフェストファイルを作成するsite.appcacheCACHE MANIFEST#last update: 2012/05/28CACHE:menu.htmlcss/reset.cssjs/javascript.jsFALLBACK:...
2. <html>要素のmanifest属性でマニフェスト              ファイルを記述して読み込むindex.html<!DOCTYPE html><html manifest="site.appcache">...</html>
3. サーバー設定でマニフェストファイルのMIME     Typeをtext/cache-manifestに設定する ※ 将来的には、不要になりますExample: Apacheの.htaccessでの設定例.htaccessAddType ...
Application Cacheの注意点 マニフェストファイルを読み込むhtmlファイルは自動的にキャッ シュされる ひとつでもエラーがあると全体がキャッシュされない(構文エラー や404など) ファイルの更新と同時に、マニフェストファイルの...
Application Cacheの参考情報 マニフェストファイルの生成ツール(manifestR) バリデーター(Cache Manifest Validator) A BEGINNERS GUIDE TO USING THE APPLICA...
2. ユーザーデータ・設定をローカルに保存する        Web Storage
Web Storage とは?文字列データをブラウザに保存することができる連想配列のようにキーと値をセットにして保存する(KVS型)ブラウザを閉じると消えるsessionStorageと、ブラウザを閉じても保存されるlocalStorageがあ...
Web Storage の利用方法データの保存// fooというキーでbarという値を保存する// 利用方法は3つの書き方があるが、いずれも同じ結果になるlocalStorage.setItem("foo", "bar");localStora...
Web Storage の利用方法データの削除// fooというキーのデータを削除するlocalStorage.removeItem("foo");// すべて削除するlocalStorage.clear();データの一覧//保存されている値を...
Web Storage の利用方法JavaScriptオブジェクトを扱う// JavaScriptオブジェクトをJSON化して保存するvar data = {	 foo: bar};localStorage.setItem(data, JSON...
Web Storageの注意点オリジン(プロトコル、ドメイン、ポート)ごとにデータが保存される( Same OriginPolicy)保存できる容量は、5MB程度個人情報やパスワードのような機微なデータは保存しない方が良い
Same Origin Policy各APIのスコープをオリジンごとに制限するHTML5共通の仕様•   オリジンは次の3つで構成される    •   スキーマ    •   ドメイン    •   ポートhttp://example.com:...
3. アプリケーションデータをローカルに保存する Indexed Database/Web SQL Database
Indexed Database とは? JavaScriptオブジェクトを保存できる インデックスによる検索が可能(非SQL) トランザクションによる複数のデータ操作が可能 APIが少し難解で扱いづらい Chrome、Firefoxが対応(I...
Web SQL Database とは? RDBMS SQLでデータを操作することができる 仕様策定が停止されている Chrome、Safari、Operaが対応 モバイルはAndroid、Safariが対応
Indexed Database の利用方法データベースの作成// データベースの作成var request = indexedDB.open("dbName", 1);// データベースのスキーマ作成request.onupgradeneed...
Indexed Database の利用方法データベースのオープンとデータの取得// データベースのオープンvar openRequest = indexedDB.open("dbName");openRequest.onsuccess = f...
Indexed Database の利用方法カーソルを利用したデータの取得(イテレート)var objectStore =db.transaction("objectStoreName").objectStore("objectStoreNam...
Indexed Database の利用方法データの追加var transaction = db.transaction(["objectStoreName"], IDBTransaction.READ_WRITE);var objectSto...
Indexed Databaseの注意点 JavaScriptオブジェクト内のfunctionなどは保存できな い(Structure Clone Algorithm) オブジェクトストアやインデックスの作成は、データベース オープン時の特殊な...
Structured Clone AlgorithmJavaScriptデータをコピーする際にオブジェクトから関数や循環参照を取り除いてコピーするアルゴリズム。Indexed Databaseのデータの保存やWebWorkersでのメッセージの...
Indexed Databaseの参考情報 A SIMPLE TODO LIST USING HTML5 INDEXEDDB -HTML5 Rocks Using IndexedDB - MDN jdb.js
4. 必要があれば適時、データの同期を行う    Online/Offline events   Network Information API        Shared Worker
Online/Offline eventsとは? Demo ( http://html5- demos.appspot.com/static/ navigator.onLine.html ) オンライン/オフラインの状態を取得できる オンライン...
Online/Offline events の利用方法オンライン/オフライン状態の取得if ( navigator.onLine ) {  console.log(ONLINE);} else {  console.log(OFFLINE);}...
Online/Offline eventsの注意点  接続しているネットワークしか見ていないので、  オンラインになったからといってインターネット  に繋がっているとは限らない
Network Information APIとは?  接続しているネットワークの速度、課金の有無な  どを取得できる  ネットワークが遅い場合や従量課金で接続してい  る場合などは、同期を自動で行わないなど処理を  分けることができる  An...
Online/Offline events の利用方法ネットワークの速度を取得する(MB/s)if ( navigator.connection.bandwidth < 2 ) {	 // 2MB/s以下の場合} else {	 // ブロード...
Shared Workerとは?バックグラウンドでJavaScriptを動作させることのできるWeb Workersの仕様のひとつ複数のウィンドウ(タブ)で共通のひとつのバックグラウンド処理を利用できるデータの同期をバックグラウンドで行う際に便利
Shared Worker の利用方法ワーカーの作成とメッセージの送受信var worker = new SharedWorker(worker.js);worker.addEventListener(message, function(e) ...
Shared Worker の参考情報 THE BASICS OF WEB WORKERS - HTML5 Rocks
5. ファイルの保存 File APIs
File APIs とは?大きな仕様は、File APIとFile API: Directories andSystems (File System API)の2つFile APIでは、ドラッグ&ドロップされたファイルを読み取るFileRead...
File System API の利用方法選択したファイルをコピーして保存する<input type="file" id="myfile" multiple />document.querySelector(#myfile).onchange ...
File APIs の参考情報READING FILES IN JAVASCRIPT USING THEFILE APIS - HTML5 RocksEXPLORING THE FILESYSTEM APIS - HTML5Rocksファイルの...
まとめ
まとめApplication CacheやWeb Storageなどは、簡単に利用できるので手軽に導入できる反面、Indexed Databaseはまだまだ利用できる環境も少なく、扱いづらいため普及と便利なライブラリが待ち望まれるデータの同期を...
Thank you!! ( @yoshikawa_t )
ResourcesHTML5のオフライン機能( http://gdd11-html5-offline.googlecode.com/git/japanese.html )HTML5 Rocks ( http://www.html5rocks.c...
Upcoming SlideShare
Loading in...5
×

HTML5でオフラインWebアプリケーションを作ろう

23,557

Published on

第5.5回 GTUG Girls MeetUpで実施たチュートリアルの資料です。

Published in: Technology

Transcript of "HTML5でオフラインWebアプリケーションを作ろう"

  1. 1. HTML 5 で作るオフラインWebアプリケーション 2012/05/28 第5.5回 GTUG Girls Meetup Toru Yoshikawa ( @yoshikawa_t )
  2. 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. 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)まとめ
  4. 4. オフラインWebアプリケーションとは?
  5. 5. オフラインWebアプリケーションの特徴 オフラインで動作させることができる 地下鉄などネットワークが使えない環境で も利用できる サーバーが落ちていてもサイトを表示する ことができる 必要なリソースをキャッシュするため、高速 に動作する
  6. 6. Demo: Angry Birds http://chrome.angrybirds.com/
  7. 7. Demo: Financial Times http://app.ft.com/
  8. 8. オフラインWebアプリケーションの作り方1.必要なファイルをキャッシュする2.ユーザーデータ・設定をローカルに保存する3.アプリケーションデータをローカルに保存 する4.必要があれば適時、データの同期を行う5.ファイルをローカルに保存する
  9. 9. 従来のWebアプリケーションのアーキテクチャ Webサーバー DBHTML/CSS/ アプリケーションデータJavaScript ブラウザ
  10. 10. オフラインWebアプリケーションのアーキテクチャ (その1: シンプルな構成) Webサーバー キャッシュHTML/CSS/JavaScript ブラウザ アプリケーションデータ DB
  11. 11. オフラインWebアプリケーションのアーキテクチャ (その2: データの同期がある) Webサーバー DB キャッシュHTML/CSS/ データの同期JavaScript ブラウザ バックグラウンド アプリケーションデータ DB
  12. 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. 13. オフラインWebアプリケーションのアーキテクチャ Webサーバー DB XHR2 WebSockets AppCache Online/Offline eventsHTML/CSS/ Network Information APIJavaScript Shared Worker ブラウザ アプリケーションデータ Web Storage IndexedDB/WebSQL File APIs
  14. 14. サンプル: オフラインTODOアプリhttp://dl.dropbox.com/u/18090951/gg5_5_offlineapp_todo.zip
  15. 15. 1. 必要なファイルをキャッシュする Application Cache
  16. 16. Application Cache とは? ファイルをキャッシュする(静的ファイル) html/css/javascript/画像などをそのまま キャッシュすることができる 既存のサイトにほとんど手を加えなくてもそのま ま適用できる 既に多くのモバイルデバイスでサポートしている
  17. 17. Application Cache の利用方法1.マニフェストファイルを作成する2.<html>要素のmanifest属性でマニフェスト ファイルを記述して読み込む3.(サーバー設定でマニフェストファイルのMIME Typeをtext/cache-manifestに設定する)
  18. 18. 1. マニフェストファイルを作成するsite.appcacheCACHE MANIFEST#last update: 2012/05/28CACHE:menu.htmlcss/reset.cssjs/javascript.jsFALLBACK:#index.html index_offline.htmlNETWORK:*
  19. 19. 2. <html>要素のmanifest属性でマニフェスト ファイルを記述して読み込むindex.html<!DOCTYPE html><html manifest="site.appcache">...</html>
  20. 20. 3. サーバー設定でマニフェストファイルのMIME Typeをtext/cache-manifestに設定する ※ 将来的には、不要になりますExample: Apacheの.htaccessでの設定例.htaccessAddType text/cache-manifest .appcacheExample: JEEでの設定例web.xml<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>
  21. 21. Application Cacheの注意点 マニフェストファイルを読み込むhtmlファイルは自動的にキャッ シュされる ひとつでもエラーがあると全体がキャッシュされない(構文エラー や404など) ファイルの更新と同時に、マニフェストファイルの更新を忘れずに XHRにはキャッシュが適用されない メディアファイル(動画や音声)はまだ非サポート(※キャッシュさ れるがオフラインで再生できない) 保存できる容量は20MB∼30MB程度(Chromeはディスクの10%)
  22. 22. Application Cacheの参考情報 マニフェストファイルの生成ツール(manifestR) バリデーター(Cache Manifest Validator) A BEGINNERS GUIDE TO USING THE APPLICATION CACHE - HTML5 Rocks Application Cacheの削除(Chromeの場合) chrome://appcache-internals
  23. 23. 2. ユーザーデータ・設定をローカルに保存する Web Storage
  24. 24. Web Storage とは?文字列データをブラウザに保存することができる連想配列のようにキーと値をセットにして保存する(KVS型)ブラウザを閉じると消えるsessionStorageと、ブラウザを閉じても保存されるlocalStorageがある非常にシンプルなAPIIE8から使える!
  25. 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. 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. 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. 28. Web Storageの注意点オリジン(プロトコル、ドメイン、ポート)ごとにデータが保存される( Same OriginPolicy)保存できる容量は、5MB程度個人情報やパスワードのような機微なデータは保存しない方が良い
  29. 29. Same Origin Policy各APIのスコープをオリジンごとに制限するHTML5共通の仕様• オリジンは次の3つで構成される • スキーマ • ドメイン • ポートhttp://example.com:80/
  30. 30. 3. アプリケーションデータをローカルに保存する Indexed Database/Web SQL Database
  31. 31. Indexed Database とは? JavaScriptオブジェクトを保存できる インデックスによる検索が可能(非SQL) トランザクションによる複数のデータ操作が可能 APIが少し難解で扱いづらい Chrome、Firefoxが対応(IEは10から対応)
  32. 32. Web SQL Database とは? RDBMS SQLでデータを操作することができる 仕様策定が停止されている Chrome、Safari、Operaが対応 モバイルはAndroid、Safariが対応
  33. 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. 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. 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. 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. 37. Indexed Databaseの注意点 JavaScriptオブジェクト内のfunctionなどは保存できな い(Structure Clone Algorithm) オブジェクトストアやインデックスの作成は、データベース オープン時の特殊なトランザクション中にしか変更できない (Chromeでは、setVersionを使う) 必ずトランザクションを利用してデータの取得、更新を行う データをソートするには、ソート用のインデックスを作成す る
  38. 38. Structured Clone AlgorithmJavaScriptデータをコピーする際にオブジェクトから関数や循環参照を取り除いてコピーするアルゴリズム。Indexed Databaseのデータの保存やWebWorkersでのメッセージの交換に利用されている// コピー前var data = { for: "bar", test : function(){ //... }}// コピー後/* data = */ { for: "bar"}
  39. 39. Indexed Databaseの参考情報 A SIMPLE TODO LIST USING HTML5 INDEXEDDB -HTML5 Rocks Using IndexedDB - MDN jdb.js
  40. 40. 4. 必要があれば適時、データの同期を行う Online/Offline events Network Information API Shared Worker
  41. 41. Online/Offline eventsとは? Demo ( http://html5- demos.appspot.com/static/ navigator.onLine.html ) オンライン/オフラインの状態を取得できる オンラインになったときに同期を開始するなどの 処理を行うことができる
  42. 42. Online/Offline events の利用方法オンライン/オフライン状態の取得if ( navigator.onLine ) { console.log(ONLINE);} else { console.log(OFFLINE);}オンラインイベントwindow.addEventListener(online, function(e) { // 同期の開始}, false);
  43. 43. Online/Offline eventsの注意点 接続しているネットワークしか見ていないので、 オンラインになったからといってインターネット に繋がっているとは限らない
  44. 44. Network Information APIとは? 接続しているネットワークの速度、課金の有無な どを取得できる ネットワークが遅い場合や従量課金で接続してい る場合などは、同期を自動で行わないなど処理を 分けることができる Android 2.2+、Firefoxのみで利用可能
  45. 45. Online/Offline events の利用方法ネットワークの速度を取得する(MB/s)if ( navigator.connection.bandwidth < 2 ) { // 2MB/s以下の場合} else { // ブロードバンド接続の場合}課金の有無を取得するif ( navigator.connection.metered == false ) { // データ同期処理}
  46. 46. Shared Workerとは?バックグラウンドでJavaScriptを動作させることのできるWeb Workersの仕様のひとつ複数のウィンドウ(タブ)で共通のひとつのバックグラウンド処理を利用できるデータの同期をバックグラウンドで行う際に便利
  47. 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. 48. Shared Worker の参考情報 THE BASICS OF WEB WORKERS - HTML5 Rocks
  49. 49. 5. ファイルの保存 File APIs
  50. 50. File APIs とは?大きな仕様は、File APIとFile API: Directories andSystems (File System API)の2つFile APIでは、ドラッグ&ドロップされたファイルを読み取るFileReaderなどが定義されているFile System APIでは、Webアプリケーションで利用可能なファイルシステム領域を作成できるバイナリファイルをそのまま保存しておきたい場合などに利用するDemo ( http://www.htmlfivewow.com/demos/terminal/terminal.html )現状は、Chromeのみでの実装
  51. 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. 52. File APIs の参考情報READING FILES IN JAVASCRIPT USING THEFILE APIS - HTML5 RocksEXPLORING THE FILESYSTEM APIS - HTML5Rocksファイルのクォータを管理するQuotaManagement APIも策定中
  53. 53. まとめ
  54. 54. まとめApplication CacheやWeb Storageなどは、簡単に利用できるので手軽に導入できる反面、Indexed Databaseはまだまだ利用できる環境も少なく、扱いづらいため普及と便利なライブラリが待ち望まれるデータの同期を行うWebアプリケーションの場合、フェールセーフやコリジョンなどを考えるので難易度が非常に高くなる。コストとの兼ね合いを
  55. 55. Thank you!! ( @yoshikawa_t )
  56. 56. ResourcesHTML5のオフライン機能( 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/ )
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×