HTML5でオフラインWebアプリケーションを作ろう
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 22,114 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
22,114
On Slideshare
19,532
From Embeds
2,582
Number of Embeds
19

Actions

Shares
Downloads
165
Comments
0
Likes
51

Embeds 2,582

http://fumit.blogspot.jp 1,853
http://bikkuri.me 408
http://w3q.jp 215
http://fumit.blogspot.com 41
http://wiki.onakasuita.org 24
https://twitter.com 14
http://192.168.7.139 8
http://fumit.blogspot.fr 4
http://feeds.feedburner.com 3
http://fumit.blogspot.sg 2
http://webcache.googleusercontent.com 2
http://fumit.blogspot.co.uk 1
http://sc.dotbranch.com 1
http://pinterest.com 1
http://fumit.blogspot.kr 1
http://fumit.blogspot.co.nz 1
http://fumit.blogspot.it 1
http://fumit.blogspot.com.ar 1
http://fumit.blogspot.tw 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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)まとめ
  • 4. オフラインWebアプリケーションとは?
  • 5. オフラインWebアプリケーションの特徴 オフラインで動作させることができる 地下鉄などネットワークが使えない環境で も利用できる サーバーが落ちていてもサイトを表示する ことができる 必要なリソースをキャッシュするため、高速 に動作する
  • 6. Demo: Angry Birds http://chrome.angrybirds.com/
  • 7. Demo: Financial Times http://app.ft.com/
  • 8. オフラインWebアプリケーションの作り方1.必要なファイルをキャッシュする2.ユーザーデータ・設定をローカルに保存する3.アプリケーションデータをローカルに保存 する4.必要があれば適時、データの同期を行う5.ファイルをローカルに保存する
  • 9. 従来のWebアプリケーションのアーキテクチャ Webサーバー DBHTML/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 eventsHTML/CSS/ Network Information APIJavaScript Shared Worker ブラウザ アプリケーションデータ Web Storage IndexedDB/WebSQL File APIs
  • 14. サンプル: オフラインTODOアプリhttp://dl.dropbox.com/u/18090951/gg5_5_offlineapp_todo.zip
  • 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.appcacheCACHE MANIFEST#last update: 2012/05/28CACHE:menu.htmlcss/reset.cssjs/javascript.jsFALLBACK:#index.html index_offline.htmlNETWORK:*
  • 19. 2. <html>要素のmanifest属性でマニフェスト ファイルを記述して読み込むindex.html<!DOCTYPE html><html manifest="site.appcache">...</html>
  • 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. Application Cacheの注意点 マニフェストファイルを読み込むhtmlファイルは自動的にキャッ シュされる ひとつでもエラーがあると全体がキャッシュされない(構文エラー や404など) ファイルの更新と同時に、マニフェストファイルの更新を忘れずに XHRにはキャッシュが適用されない メディアファイル(動画や音声)はまだ非サポート(※キャッシュさ れるがオフラインで再生できない) 保存できる容量は20MB∼30MB程度(Chromeはディスクの10%)
  • 22. Application Cacheの参考情報 マニフェストファイルの生成ツール(manifestR) バリデーター(Cache Manifest Validator) A BEGINNERS GUIDE TO USING THE APPLICATION CACHE - HTML5 Rocks Application Cacheの削除(Chromeの場合) chrome://appcache-internals
  • 23. 2. ユーザーデータ・設定をローカルに保存する Web Storage
  • 24. Web Storage とは?文字列データをブラウザに保存することができる連想配列のようにキーと値をセットにして保存する(KVS型)ブラウザを閉じると消えるsessionStorageと、ブラウザを閉じても保存されるlocalStorageがある非常にシンプルなAPIIE8から使える!
  • 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 OriginPolicy)保存できる容量は、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 AlgorithmJavaScriptデータをコピーする際にオブジェクトから関数や循環参照を取り除いてコピーするアルゴリズム。Indexed Databaseのデータの保存やWebWorkersでのメッセージの交換に利用されている// コピー前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 ) { // データ同期処理}
  • 46. Shared Workerとは?バックグラウンドでJavaScriptを動作させることのできるWeb Workersの仕様のひとつ複数のウィンドウ(タブ)で共通のひとつのバックグラウンド処理を利用できるデータの同期をバックグラウンドで行う際に便利
  • 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 andSystems (File System API)の2つFile APIでは、ドラッグ&ドロップされたファイルを読み取るFileReaderなどが定義されている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 THEFILE APIS - HTML5 RocksEXPLORING THE FILESYSTEM APIS - HTML5Rocksファイルのクォータを管理するQuotaManagement APIも策定中
  • 53. まとめ
  • 54. まとめApplication CacheやWeb Storageなどは、簡単に利用できるので手軽に導入できる反面、Indexed Databaseはまだまだ利用できる環境も少なく、扱いづらいため普及と便利なライブラリが待ち望まれるデータの同期を行うWebアプリケーションの場合、フェールセーフやコリジョンなどを考えるので難易度が非常に高くなる。コストとの兼ね合いを
  • 55. Thank you!! ( @yoshikawa_t )
  • 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/ )