オフラインファーストの思想と実践

68,328 views

Published on

Published in: Technology
0 Comments
83 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
68,328
On SlideShare
0
From Embeds
0
Number of Embeds
60,796
Actions
Shares
0
Downloads
0
Comments
0
Likes
83
Embeds 0
No embeds

No notes for slide

オフラインファーストの思想と実践

  1. 1. Thought and Practiceof Offline Firstオフライン・ファーストの思想と実践 株式会社オープンウェブ・テクノロジー 白石俊平
  2. 2. 自己紹介• 白石俊平と申します。• HTML5開発者コミュニティhtml5j.org管理人(会員数5,000 名超)• HTML5とか勉強会主催(毎月一回、100名を動員)• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei• 著書:HTML5&API入門
  3. 3. Offline First – A better HTML5 User Experience
  4. 4. offlinefirst.com
  5. 5. Mobile First Web Second
  6. 6. Responsive Web Design
  7. 7. オフラインWeb時代の到来は・・・ 2014年?
  8. 8. 白石俊平: 著2007年技術評論社刊
  9. 9. Why "Offline"?なぜオフラインWebか?
  10. 10. オフライン スピードでも使える ユーザビリティの向上
  11. 11. 「Offline is a feature」 Photo by methodship.com
  12. 12. 「読む」中心のWebサイトでは メリット コスト
  13. 13. Google Slidesはオフライン対応している "オフライン時の変更は、 オンラインに戻った時に同期されます"
  14. 14. 「編集」中心のWebアプリでは コスト メリット
  15. 15. オフラインの活路は「モバイルアプリ」にあり! ネイティブ(Web)アプリ モバイルWebアプリ ハイブリッドアプリ
  16. 16. 企業向けモバイルアプリの 大半はHTML5にGartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid
  17. 17. Building BlocksオフラインWebを実現するAPI
  18. 18. オフラインWebアプリの基本 Resources Data
  19. 19. オフラインWebを実現するAPI• アプリケーションキャッシュ• Web Storage• Indexed Database API• File API
  20. 20. アプリケーションキャッシュ CACHE MANIFEST index.html index.css index.js ローカル サーバ
  21. 21. アプリケーションキャッシュ CACHE MANIFEST index.html オフラインで index.css index.js 利用可能 ローカル サーバ
  22. 22. キャッシュマニフェスト ファイル先頭に「CACHE MANIFEST」 1行に1URL "#"以降はコメント オンラインのアクセス先は NETWORKセクションに記述キャッシュマニフェストが変更されていたら、 キャッシュのリフレッシュが行われる
  23. 23. キャッシュマニフェストの例 CACHE MANIFEST # v: 201302061503 hello.html hello.css hello.js hello.jpg NETWORK: * <html manifest="site.appcache"> ... </html>
  24. 24. アプリケーションキャッシュの 「落とし穴」 通常のHTTPキャッシュも怠らないで! キャッシュ容量は実装依存 キャッシュは時間がかかる 開発フローを改善しよう
  25. 25. Web Storage• ブラウザ組み込みのキー・バリュースト ア• 文字列しか保存できないが、JSONと組み 合わせれば不便はあまりない。• グローバル変数localStorageに、キーと 値を保存するだけなので、非常に使いや すい。
  26. 26. Web Storageのコード例// ストレージに値を保存localStorage.person = JSON.stringify({ name: "ご自分のお名前", age: ご自分の年齢});// 値を確認alert(localStorage.person);// オブジェクトに復元var person = JSON.parse(localStorage.person);alert(person.name);alert(person.age);
  27. 27. Web Storageの 「落とし穴」文字列しか格納できない シンプルすぎる! 同期APIしかない
  28. 28. Indexed Database API• ブラウザ組み込みのキー・バリューストア• WebStorageよりも複雑だが高機能• RDBのテーブルにあたるものがオブジェクトストア• JavaScriptオブジェクトをオブジェクトストアに対して そのまま読み書きできる。
  29. 29. Indexed Database API のコード例var req = indexedDB.open(DB_NAME, latestVersion);req.onsuccess = function(event) { db = req.result; var tx = db.transaction("FeedStore", "readonly"); var feedEntryStore = tx.objectStore("FeedStore"); var curReq = feedEntryStore.openCursor(); var results = []; curReq.onsuccess = function() { var cursor = curReq.result; if (!cursor) { return; } var entry = cursor.value; results.push(entry); cursor.continue(); // カーソルを次に進める };};
  30. 30. Indexed Database APIの 「落とし穴」 APIがあんまりイケてない RDBほどの柔軟性はない! SafariとOperaが未実装
  31. 31. File API• Webアプリからファイルを読み書きする ためのAPI。• 以下の3仕様からなる。 – File API・・・ファイルの読み取りや基本的な インターフェースの定義 – File API:Writer・・・ファイルの書き出し – File API:Systems and Directories・・・ファ イルシステムとディレクトリ構造
  32. 32. File API• Chrome以外の実装が望めない状況。• Google Docsのオフライン機能は、File APIを用いて実現されている。
  33. 33. Foundamental ofOffline Firstオフライン・ファーストの勘所
  34. 34. 1. アプリケーションとサーバを 切り離す まずオフラインありき。 Resources サーバは、データを JSON APIで公開するのみ Data
  35. 35. 2. ラッパーを通じて Web APIを呼び出すbutton.onclick = function() { $.get(/memo, function() {...});}; Ajax呼び出しを直接行わない。button.onclick = function() { WebAPI.loadMemo(function() { ... });};
  36. 36. 3. 抽象化したオブジェクトを 通じてデータを操作するbutton.onclick = function() { WebAPI.loadMemo(function() { ... });}; データソースを抽象化する!button.onclick = function() { Memo.get(function(memo) { ... });};
  37. 37. User Data Web API Interface Controller WrapperName:E-mail: Submit データの永続化 データの同期
  38. 38. Demo デモ
  39. 39. Synchronizationデータの同期について、 ひとこと言いたい
  40. 40. 同期処理の実装は 難しい。同期処理中にオフラインになったら? データ変更が衝突したら?同期量を「必要最小限」に留めるには?
  41. 41. 以前実現したアーキテクチャクライアント テーブ ルA UI 同期 ジャー エン ナル テーブ ジン ルB
  42. 42. Thank you!ご清聴ありがとうございました! Follow me! @Shumpei

×