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

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

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

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

Google Gearsって知ってますか？

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

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

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

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

オフラインWebアプリケーションをつくるためのAPIアプリケーションキャッシュWeb StorageWeb SQL DatabaseIndexed Database APIFile API

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

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

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

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

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

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

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

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

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

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

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

利用できるローカルストレージWeb StorageWeb SQL DatabaseIndexed Database APIFile API

Indexed Database APIとは？（サンプル）ブラウザ組み込みのキー・バリューストア

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

JavaScriptオブジェクトをオブジェクトストアに対してそのまま読み書きできる。File APIとは？（サンプル）Webアプリからファイルを読み書きするためのAPI。

以下の3仕様からなる。

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

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

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

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to オフラインWebアプリケーションのつくりかた (20)

More from Shumpei Shiraishi (20)

Recently uploaded (11)

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