iPhoneで動かす業務用Webアプリ開発入門
 iPhoneで動かす業務用Webアプリ開発入門（終）

HTML5でiPhone用Webアプリをオフライン対応に


株式会社ドリーム・アーツ
新規事業推進室 グループマネージャー 石田健亮
2011/4/18
業務用アプリのiPhone対応経験を基に、iPhoneで動かすための、業務で使えるWebアプリケーションを作成するときのコツを紹介します

モバイルWebアプリはオフライン対応が必須！

- PR -

　いよいよ最終回の今回は、「Application Cache（アプリケーションキャッシュ）」を使います。

　HTML5で導入されたアプリケーションキャッシュを使うと、WebアプリをWebブラウザのキャッシュに載せてオフラインで利用できるようになります。特に、前回の「HTML5のlocalStorageでiPhone用Webアプリを高速化」で紹介したHTML5の「localStorage」と組み合わせると、一度ダウンロードしたデータについては完全にオフラインでアプリが動作するようになります。

　オフラインでの利用に対応して、3G回線など接続が安定しない環境でも業務用Webアプリが快適に使えるようにしてみましょう。

「キャッシュマニフェスト」ファイルを作るには

　アプリケーションキャッシュを使うには、Webブラウザにキャッシュしてほしいファイルを知らせる「キャッシュマニフェスト」ファイルを作るところから始めます。

　Webアプリで使っている、JavaScriptのソースコードファイルや画像ファイル、CSSファイルなどのパスを書いておけば、一度ロードされるとアプリケーションキャッシュに格納されて、次回以降はリクエストされなくなります。

　キャッシュマニフェストファイルの中身を見てみましょう。

CACHE MANIFEST
# Version: 7022
 
CACHE:
/h/MobileView.do?v=1.2.11&lang=ja
/h/images/apple-touch-icon.png?v=1.2.11
/h/iui-0.40/iui.css
/h/iui-0.40/t/default/default-theme.css
/h/iui-0.40/t/default/backButton.png
/h/iui-0.40/t/default/backButtonBack.png
/h/iui-0.40/t/default/backButtonBrdr.png
/h/iui-0.40/t/default/blueButton.png
/h/css/my-iui.css?v=1.2.11
/h/js/prototype.js?v=1.2.11
/h/js/json2.js?v=1.2.11
/h/iui-0.40/iui.js
  ：
  ：
【省略】
  ：
  ：
NETWORK:
/h/STRMobileViewAPI.do

　キャッシュマニフェストファイルの1行目は、常に「CACHE MANIFEST」です。

□ 「#」はコメント

　「#」から始まる行はコメントです。キャッシュの更新はマニフェストファイルが変更されたことで検出されます。キャッシュの更新をWebブラウザに通知するためにバージョン番号や日付を入れておきます。

□ iPhoneのSafariは更新のチェックのリクエスト自体が来ない

　ここで注意ですが、一般にキャッシュマニフェストファイルの説明では、「1byteでも変更があると、キャッシュが更新される」とありますが、iPhoneのSafariの場合、更新のチェックのリクエスト自体が来ないので、いくらコメント部分を変更しても、それだけではキャッシュは更新されません。

　後述しますが、JavaScriptで明示的にキャッシュを更新する必要があります。

□ 「CACHE:」はキャッシュしたいURL

　「CACHE:」の行以降にキャッシュしたいURLを列挙します。ワイルドカードは使えないので、キャッシュしたいJavaScript、画像、CSSを1行に1つずつ記述します。

□ 「NETWORK:」はキャッシュしたくないURL

　「NETWORK:」の行の後にはキャッシュしたくないURLを列挙します。Ajaxで取得するXMLやJSONを返すURLは、こちらに記述します。

HTMLでキャッシュマニフェストを有効にするには

　HTMLでアプリケーションキャッシュを有効にするには、以下のように<html>タグの中で「manifest」属性を使って、このキャッシュマニフェストファイルを指定します。

<!doctype html>
<html manifest="cache.manifest">
<head>
  ：
  ：
【省略】
  ：
  ：
</head>
<body>
  ：
  ：
【省略】
  ：
  ：
</body>
</html>

Webサーバをキャッシュマニフェストに対応するには

　キャッシュマニフェストファイルは、「text/cache-manifest」というMIMEタイプで送信する必要があります。

□ Apacheの場合

　Webサーバとして「Apache httpd」を使っている場合、デフォルトではキャッシュマニフェストに対応していないので、「httpd.conf」ファイルに以下の行を追加して「 .manifest」という拡張子のファイルのときに、このMIMEタイプで送信するように設定します。

AddType text/cache-manifest .manifest

　「httpd.conf」ファイルについては、以下の記事を参考にして下さい。

□ Tomcatの場合

　「Tomcat」などのJava用のアプリケーションコンテナの場合は、アプリごとの「web.xml」の<welcome-file-list>要素の直前に、以下の<mime-mapping>要素を追加します。

<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

　「web.xml」ファイルについては、以下の記事を参考にして下さい。

　これで、アプリケーションキャッシュに指定したコンテンツがキャッシュされるようになります。次ページでは、キャッシュマニフェストにHTML自体を含める方法やキャッシュを更新する方法について解説します。

  1/2

　INDEX
iPhoneで動かす業務用Webアプリ開発入門（終）　
HTML5でiPhone用Webアプリをオフライン対応に
Page1
モバイルWebアプリはオフライン対応が必須！
「キャッシュマニフェスト」ファイルを作るには
HTMLでキャッシュマニフェストを有効にするには
Webサーバをキャッシュマニフェストに対応するには
  Page2
HTMLファイルをキャッシュマニフェストに含めるには
対応必須！ キャッシュの更新スクリプト
iPhone用の業務アプリはWebで遜色なし！

iPhoneで動かす業務用Webアプリ開発入門 バックナンバー 連載インデックスへ»


ご意見、ご感想は Smart＆Social 会議室へどうぞ


　Smart＆Social フォーラム トップページへ


TechTargetジャパン

Smart ＆ Social フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH