オフラインWebアプリケーションを作る上での基本的なAPIとアーキテクチャについて解説しました。 2011/10/17のJJUG CCCで使用したスライドです。

1. オフラインWebアプリケーションのつくりかた 2011/10/13 白石俊平

2. 自己紹介 白石俊平（@Shumpei） 株式会社オープンウェブ・テクノロジー（http://www.openweb.co.jp）代表 Web開発案件募集中！ 一緒にお仕事する仲間も募集中！ html5j.org（元HTML5 Developers JP）主催 HTML5とか勉強会主催 Google API Expert (HTML5) Microsoft Most Valuable Professional (IE)

3. 今日のアジェンダ オフラインWebアプリケーションとは？ オフラインでも「読める」アプリのつくりかた オフラインでも「書ける」アプリのつくりかた

4. Google Gearsって知ってますか？

8. 結果オーライ♪

9. オフラインWebアプリの開発経験 「Google Gearsスタートガイド」執筆 オフラインWebアプリケーションの研究開発を受託 「DaVinciPad」（自社サービス、現在は終了）開発

10. 今日のアジェンダ オフラインWebアプリケーションとは？ オフラインでも「読める」アプリのつくりかた オフラインでも「書ける」アプリのつくりかた

11. オフラインWebアプリケーションとは？

12. オフラインWebアプリケーションとは？ オフラインでも利用できるWebアプリケーション

13. オフラインでも「利用できる」、とは？ オフラインでも「読める」・・・こちらはそれほど実装は難しくない オフラインでも「書ける」・・・割と面倒だったり、途方もなく難しかったりする。

14. オフラインWebアプリケーションをつくるためのAPI アプリケーションキャッシュ Web Storage Web SQL Database Indexed Database API File API

15. 今日のアジェンダ オフラインWebアプリケーションとは？ オフラインでも「読める」アプリのつくりかた オフラインでも「書ける」アプリのつくりかた

16. 「オフラインでも読める」Webアプリケーションのつくりかた

17. オフラインでも読めるWebアプリケーションのつくりかた アプリケーションキャッシュを利用すれば良い。

18. アプリケーションキャッシュとは？ 静的なリソースをキャッシュするのに最適な機能 Webアプリが必要とするリソースを全てローカルにキャッシュする、という仕様。 オフラインでも動くという利点以外にも、起動が速いという大きなメリットも。 IE以外のPCブラウザ、スマホブラウザに実装されている。

19. JS CSS HTML HTML JS CSS HTML HTML アプリケーションキャッシュ オフラインに対応したWebアプリ ② リソースを全てダウンロード ①Webページにアクセス ③ 以降は、ローカル のキャッシュを参照

20. キャッシュマニフェスト 「Webアプリが必要とするリソース」をブラウザが知るための定義ファイル。 キャッシュの更新チェックは、このファイルの更新チェックによって行われる。 基本は1行に1URL。 text/cache-manifestというMIMEタイプで配信 CACHE MANIFEST hello.html hello.css hello.js hello.jpg

21. デモ（？）

22. アプリケーションキャッシュのJavaScript API 対応ブラウザでは、applicationCacheというグローバル変数を通じてアプリケーションキャッシュの操作を行える。 キャッシュの進捗状況をチェックできる キャッシュ更新を明示的に起動する

23. アプリケーションキャッシュのJavaScript API キャッシュの進捗状況をチェックするためのコードは以下のようになる。 他にも、error, noupdate, cached, updatereadyなどのイベントが存在する。 // キャッシュ動作が進行中 applicationCache.addEventListener( "progress", function(event) { … }, false);

24. デモ

25. アプリケーションキャッシュを利用する上での注意点 キャッシュマニフェストを更新しないと、リロードしてもアプリケーションが更新されない。 キャッシュマニフェストの管理が少しめんどう。 キャッシュ容量が限られている。 スマホ上では、1ドメインあたり10Mとも20Mとも言われている。 なんかブラウザの挙動が怪しくなる時がある。。

26. 「オフラインでも書ける」Webアプリケーションのつくりかた

27. 基本、そして理想 ブラウザが備えているローカルのストレージにデータを読み書き その後、DBの内容をクラウドと同期 これって、よく考えるとクラウド以前の デスクトップアプリとそんなに変わらない。 App

28. オフラインWebアプリをつくるためのポイント(1) 基本は、リッチクライアント+同期機能であると言って良い。 「Webアプリ」の経験があればあるほど、昔の作り方に引きずられる（経験者談）

29. 利用できるローカルストレージ Web Storage Web SQL Database Indexed Database API File API

31. RDBのテーブルにあたるものがオブジェクトストア

33. 以下の3仕様からなる。

34. File API・・・ファイルの読み取りや基本的なインターフェースの定義

35. File API:Writer・・・ファイルの書き出し

36. File API:Systems and Directories・・・ファイルシステムとディレクトリ構造

38. オフラインWebアプリをつくるためのポイント(2) 完全な双方向同期を実現するのは、かなり難しい。 フェールセーフ 更新の衝突 同期のタイミング 各データの状態管理 ネットワーク状態 ローカルDBのスキーマ管理 ローカルDBのクォータ …

39. 以前実現したアーキテクチャ クライアント 同期するデータの範囲を指定できるようにすることで、検索にも対応 テーブルA UI 同期エンジン ジャーナル テーブルB

40. オフラインWebアプリをつくるためのポイント(2) 仕様面での割り切りが、開発コストに大きく影響する！ 完全な双方向同期を実現するのは、かなり難しい。 フェールセーフ 更新の衝突 同期のタイミング 各データの状態管理 ネットワーク状態 ローカルDBのスキーマ管理 ローカルDBのクォータ …

41. ご清聴ありがとうございました。 @Shumpei