Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

オフラインWebアプリケーションのつくりかた

15,810 views

Published on

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

Published in: Technology
  • Be the first to comment

オフラインWebアプリケーションのつくりかた

  1. 1. オフラインWebアプリケーションのつくりかた<br />2011/10/13 白石俊平<br />
  2. 2. 自己紹介<br />白石俊平(@Shumpei)<br />株式会社オープンウェブ・テクノロジー(http://www.openweb.co.jp)代表<br />Web開発案件募集中!<br />一緒にお仕事する仲間も募集中!<br />html5j.org(元HTML5 Developers JP)主催<br />HTML5とか勉強会主催<br />Google API Expert (HTML5)<br />Microsoft Most Valuable Professional (IE)<br />
  3. 3. 今日のアジェンダ<br />オフラインWebアプリケーションとは?<br />オフラインでも「読める」アプリのつくりかた<br />オフラインでも「書ける」アプリのつくりかた<br />
  4. 4. Google Gearsって知ってますか?<br />
  5. 5.
  6. 6.
  7. 7.
  8. 8. 結果オーライ♪<br />
  9. 9. オフラインWebアプリの開発経験<br />「Google Gearsスタートガイド」執筆<br />オフラインWebアプリケーションの研究開発を受託<br />「DaVinciPad」(自社サービス、現在は終了)開発<br />
  10. 10. 今日のアジェンダ<br />オフラインWebアプリケーションとは?<br />オフラインでも「読める」アプリのつくりかた<br />オフラインでも「書ける」アプリのつくりかた<br />
  11. 11. オフラインWebアプリケーションとは?<br />
  12. 12. オフラインWebアプリケーションとは?<br />オフラインでも利用できるWebアプリケーション<br />
  13. 13. オフラインでも「利用できる」、とは?<br />オフラインでも「読める」・・・こちらはそれほど実装は難しくない<br />オフラインでも「書ける」・・・割と面倒だったり、途方もなく難しかったりする。<br />
  14. 14. オフラインWebアプリケーションをつくるためのAPI<br />アプリケーションキャッシュ<br />Web Storage<br />Web SQL Database<br />Indexed Database API<br />File API<br />
  15. 15. 今日のアジェンダ<br />オフラインWebアプリケーションとは?<br />オフラインでも「読める」アプリのつくりかた<br />オフラインでも「書ける」アプリのつくりかた<br />
  16. 16. 「オフラインでも読める」Webアプリケーションのつくりかた<br />
  17. 17. オフラインでも読めるWebアプリケーションのつくりかた<br />アプリケーションキャッシュを利用すれば良い。<br />
  18. 18. アプリケーションキャッシュとは?<br />静的なリソースをキャッシュするのに最適な機能<br />Webアプリが必要とするリソースを全てローカルにキャッシュする、という仕様。<br />オフラインでも動くという利点以外にも、起動が速いという大きなメリットも。<br />IE以外のPCブラウザ、スマホブラウザに実装されている。<br />
  19. 19. JS<br />CSS<br />HTML<br />HTML<br />JS<br />CSS<br />HTML<br />HTML<br />アプリケーションキャッシュ<br />オフラインに対応したWebアプリ<br />② リソースを全てダウンロード<br />①Webページにアクセス<br />③ 以降は、ローカル<br />のキャッシュを参照<br />
  20. 20. キャッシュマニフェスト<br />「Webアプリが必要とするリソース」をブラウザが知るための定義ファイル。<br />キャッシュの更新チェックは、このファイルの更新チェックによって行われる。<br />基本は1行に1URL。<br />text/cache-manifestというMIMEタイプで配信<br />CACHE MANIFEST<br />hello.html<br />hello.css<br />hello.js<br />hello.jpg<br />
  21. 21. デモ(?)<br />
  22. 22. アプリケーションキャッシュのJavaScript API<br />対応ブラウザでは、applicationCacheというグローバル変数を通じてアプリケーションキャッシュの操作を行える。<br />キャッシュの進捗状況をチェックできる<br />キャッシュ更新を明示的に起動する<br />
  23. 23. アプリケーションキャッシュのJavaScript API<br />キャッシュの進捗状況をチェックするためのコードは以下のようになる。<br />他にも、error, noupdate, cached, updatereadyなどのイベントが存在する。<br />// キャッシュ動作が進行中<br />applicationCache.addEventListener(<br /> "progress", function(event) {<br /> …<br /> }, false);<br />
  24. 24. デモ<br />
  25. 25. アプリケーションキャッシュを利用する上での注意点<br />キャッシュマニフェストを更新しないと、リロードしてもアプリケーションが更新されない。<br />キャッシュマニフェストの管理が少しめんどう。<br />キャッシュ容量が限られている。<br />スマホ上では、1ドメインあたり10Mとも20Mとも言われている。<br />なんかブラウザの挙動が怪しくなる時がある。。<br />
  26. 26. 「オフラインでも書ける」Webアプリケーションのつくりかた<br />
  27. 27. 基本、そして理想<br />ブラウザが備えているローカルのストレージにデータを読み書き<br />その後、DBの内容をクラウドと同期<br />これって、よく考えるとクラウド以前の<br />デスクトップアプリとそんなに変わらない。<br />App<br />
  28. 28. オフラインWebアプリをつくるためのポイント(1)<br />基本は、リッチクライアント+同期機能であると言って良い。<br />「Webアプリ」の経験があればあるほど、昔の作り方に引きずられる(経験者談)<br />
  29. 29. 利用できるローカルストレージ<br />Web Storage<br />Web SQL Database<br />Indexed Database API<br />File API<br />
  30. 30. Indexed Database APIとは?(サンプル)<br /><ul><li>ブラウザ組み込みのキー・バリューストア
  31. 31. RDBのテーブルにあたるものがオブジェクトストア
  32. 32. JavaScriptオブジェクトをオブジェクトストアに対してそのまま読み書きできる。</li></li></ul><li>File APIとは?(サンプル)<br /><ul><li>Webアプリからファイルを読み書きするためのAPI。
  33. 33. 以下の3仕様からなる。
  34. 34. File API・・・ファイルの読み取りや基本的なインターフェースの定義
  35. 35. File API:Writer・・・ファイルの書き出し
  36. 36. File API:Systems and Directories・・・ファイルシステムとディレクトリ構造
  37. 37. オリジンごとに異なる</li></li></ul><li>基本、そして理想<br />ブラウザが備えているローカルのストレージにデータを読み書き<br />その後、DBの内容をクラウドと同期<br />「同期処理」の難易度が<br />開発コストに大きく響く。<br />App<br />
  38. 38. オフラインWebアプリをつくるためのポイント(2)<br />完全な双方向同期を実現するのは、かなり難しい。<br />フェールセーフ<br />更新の衝突<br />同期のタイミング<br />各データの状態管理<br />ネットワーク状態<br />ローカルDBのスキーマ管理<br />ローカルDBのクォータ<br />…<br />
  39. 39. 以前実現したアーキテクチャ<br />クライアント<br />同期するデータの範囲を指定できるようにすることで、検索にも対応<br />テーブルA<br />UI<br />同期エンジン<br />ジャーナル<br />テーブルB<br />
  40. 40. オフラインWebアプリをつくるためのポイント(2)<br />仕様面での割り切りが、開発コストに大きく影響する!<br />完全な双方向同期を実現するのは、かなり難しい。<br />フェールセーフ<br />更新の衝突<br />同期のタイミング<br />各データの状態管理<br />ネットワーク状態<br />ローカルDBのスキーマ管理<br />ローカルDBのクォータ<br />…<br />
  41. 41. ご清聴ありがとうございました。<br />@Shumpei<br />

×