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

1. Thought and Practice of Offline First オフライン・ファーストの思想と実践株式会社オープンウェブ・テクノロジー白石俊平

2. 自己紹介 • 白石俊平と申します。 • HTML5開発者コミュニティhtml5j.org管理人（会員数5,000 名超） • HTML5とか勉強会主催（毎月一回、100名を動員） • Google API Expert (HTML5) • Microsoft Most Valuable Professional (IE9) • Twitter: @Shumpei • 著書：HTML5&API入門

3. Offline First – A better HTML5 User Experience

4. offlinefirst.com

5. Mobile First Web Second

6. Responsive Web Design

7. オフラインWeb時代の到来は・・・ 2014年？

8. 白石俊平: 著 2007年技術評論社刊

9. Why "Offline"? なぜオフラインWebか？

10. オフラインスピードでも使えるユーザビリティの向上

11. 「Offline is a feature」 Photo by methodship.com

12. 「読む」中心のWebサイトではメリットコスト

13. Google Slidesはオフライン対応している "オフライン時の変更は、オンラインに戻った時に同期されます"

14. 「編集」中心のWebアプリではコストメリット

15. オフラインの活路は「モバイルアプリ」にあり！ネイティブ（Web）アプリモバイルWebアプリハイブリッドアプリ

16. 企業向けモバイルアプリの大半はHTML5に Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid

17. Building Blocks オフラインWebを実現するAPI

18. オフラインWebアプリの基本 Resources Data

19. オフラインWebを実現するAPI • アプリケーションキャッシュ • Web Storage • Indexed Database API • File API

20. アプリケーションキャッシュ CACHE MANIFEST index.html index.css index.js ローカルサーバ

21. アプリケーションキャッシュ CACHE MANIFEST index.html オフラインで index.css index.js 利用可能ローカルサーバ

22. キャッシュマニフェストファイル先頭に「CACHE MANIFEST」 1行に1URL "#"以降はコメントオンラインのアクセス先は NETWORKセクションに記述キャッシュマニフェストが変更されていたら、キャッシュのリフレッシュが行われる

23. キャッシュマニフェストの例 CACHE MANIFEST # v: 201302061503 hello.html hello.css hello.js hello.jpg NETWORK: * <html manifest="site.appcache"> ... </html>

24. アプリケーションキャッシュの「落とし穴」通常のHTTPキャッシュも怠らないで！キャッシュ容量は実装依存キャッシュは時間がかかる開発フローを改善しよう

25. Web Storage • ブラウザ組み込みのキー・バリューストア • 文字列しか保存できないが、JSONと組み合わせれば不便はあまりない。 • グローバル変数localStorageに、キーと値を保存するだけなので、非常に使いやすい。

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. Web Storageの「落とし穴」文字列しか格納できないシンプルすぎる！同期APIしかない

28. Indexed Database API • ブラウザ組み込みのキー・バリューストア • WebStorageよりも複雑だが高機能 • RDBのテーブルにあたるものがオブジェクトストア • JavaScriptオブジェクトをオブジェクトストアに対してそのまま読み書きできる。

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. Indexed Database APIの「落とし穴」 APIがあんまりイケてない RDBほどの柔軟性はない！ SafariとOperaが未実装

31. File API • Webアプリからファイルを読み書きするためのAPI。 • 以下の3仕様からなる。 – File API・・・ファイルの読み取りや基本的なインターフェースの定義 – File API:Writer・・・ファイルの書き出し – File API:Systems and Directories・・・ファイルシステムとディレクトリ構造

32. File API • Chrome以外の実装が望めない状況。 • Google Docsのオフライン機能は、File APIを用いて実現されている。

33. Foundamental of Offline First オフライン・ファーストの勘所

34. 1. アプリケーションとサーバを切り離すまずオフラインありき。 Resources サーバは、データを JSON APIで公開するのみ Data

35. 2. ラッパーを通じて Web APIを呼び出す button.onclick = function() { $.get('/memo', function() {...}); }; Ajax呼び出しを直接行わない。 button.onclick = function() { WebAPI.loadMemo(function() { ... }); };

36. 3. 抽象化したオブジェクトを通じてデータを操作する button.onclick = function() { WebAPI.loadMemo(function() { ... }); }; データソースを抽象化する！ button.onclick = function() { Memo.get(function(memo) { ... }); };

37. User Data Web API Interface Controller Wrapper Name: E-mail: Submit データの永続化データの同期

38. Demo デモ

39. Synchronization データの同期について、ひとこと言いたい

40. 同期処理の実装は難しい。同期処理中にオフラインになったら？データ変更が衝突したら？同期量を「必要最小限」に留めるには？

41. 以前実現したアーキテクチャクライアントテーブルA UI 同期ジャーエンナルテーブジンルB

42. Thank you! ご清聴ありがとうございました！ Follow me! @Shumpei

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

Esté a ler uma amostra.

Confira estes a seguir

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

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a オフラインファーストの思想と実践 (20)

Mais de Shumpei Shiraishi (20)

Mais recentes (20)