HTML5でiPhone用Webアプリをオフライン対応に：iPhoneで動かす業務用Webアプリ開発入門（5）（2/2 ページ）

業務用アプリのiPhone対応経験を基に、iPhoneで動かすための、業務で使えるWebアプリケーションを作成するときのコツを紹介します

[石田健亮，株式会社ドリーム・アーツ]

HTMLファイルをキャッシュマニフェストに含めるには

　キャッシュマニフェストファイルに、すべてのJavaScriptファイル、画像ファイル、CSSファイルを記述すると、ページのロード時間を劇的に短縮できます。

　キャッシュマニフェストには、これらのファイルだけでなくHTML自体を含めることができます。HTML自体をキャッシュに格納すると、そのURLのときは一切サーバにリクエストを出さずに画面を表示可能になります。

　先ほどの例では「CACHE:」の1行目の「/h/MobileView.do」がHTMLです。

　すべてのデータをAjaxで取得するアプリは、HTMLは毎回同じファイルになるはずなので、このようにHTML自体をキャッシュできます。

　こうしておくと、電波がまったく届いていないオフライン状態でも、Safariのブックマークなどから起動すると、普通にアプリが動作します。iPhoneの設定画面で機内モードにして試してみました（図）。

図　左上の緑の線で囲んだところが機内モード

　ドリーム・アーツで開発している「店舗matic」「Shopらん」の場合、前回説明したlocalStorage機能を使って、データについてもオフラインでの利用に対応しているので、完全にオフライン状態でもアプリを利用できます。

対応必須！ キャッシュの更新スクリプト

　このようにiPhoneのSafariでは、キャッシュマニフェストによるアプリケーションキャッシュは、かなり強力ですが、設定画面から［キャッシュを消去］を選択しても、キャッシュは消去されません。

　前述したとおり、キャッシュマニフェストファイルを変更してもマニフェストファイル自体がキャッシュされてしまいリクエストが来ないので、キャッシュを更新できないのです。

キャッシュデータの削除はiTunesで“復元”のみ？

　いろいろ試してみましたが、一度キャッシュされてしまったデータを削除するには、iTunesからiPhoneを“復元”するほかなさそうです。

　さすがにこれでは、アプリの不具合修正やバージョンアップがあっても更新できず実用的ではないので、アプリケーションキャッシュを使う場合は、JavaScriptで更新をチェックする処理をセットで作っておき、スクリプトから明示的にキャッシュを更新する必要があります。

　これをやらずに、いきなりアプリケーションキャッシュを試すと、もうそのURLでは二度とロードしなくなるので、要注意です。

キャッシュのチェックスクリプト

　JavaScriptでキャッシュを更新するのは簡単です。スクリプトの中で「window.applicationCache.update()」を呼び出せばOKです。この関数を呼び出すと、キャッシュマニフェストファイルをサーバからダウンロードしてキャッシュが更新されていないかどうかをチェックします。

　ここで初めて、マニフェストファイルに入れておいたコメントの中のバージョン番号が役に立ちます。もし、キャッシュが更新されていた場合は、applicationCacheオブジェクトでupdatereadyイベントが発生するので、「applicationCache.swapCache()」を呼び出して新しいキャッシュに切り替えます。

　これを実行するスクリプトは、以下のようになります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このスクリプトをHTMLのロードイベントで動作する関数の中に記述すると、ページのロード時にキャッシュの更新をチェックして、更新する必要がある場合は確認画面を表示してキャッシュを更新するようになります。

iPhone用の業務アプリはWebで遜色なし！

　いかがでしたでしょうか。これまで、「iUI」でUIとデータを分離することから初めて、JSONでサーバからデータを取得するAjaxへの対応、localStorageでのキャッシュとプリフェッチ、そして今回のオフライン対応と説明してきました。

　これらのテクニックを組み合わせることでネイティブアプリと遜色ないアプリケーションが開発できることが分かっていただけたかと思います。

　iPhoneのSafariの表現力はかなりハイレベルで、業務アプリを使う人の生産性を抜群に向上できます。ぜひ対応を検討してみてはいかがでしょうか。

「iPhoneで動かす業務用Webアプリ開発入門」バックナンバー

• HTML5でiPhone用Webアプリをオフライン対応に
• HTML5のlocalStorageでiPhone用Webアプリを高速化
• JavaサーブレットとJSON-libでできるiPhone向けAjax
• iUIで始めるiPhone用Webアプリ開発の基礎知識
• WebアプリをiPhoneっぽくするための5つのポイント