HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた

2011年1月5日

HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。

iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。

単に路線図を表示するだけのアプリ

iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。

そこで、起動すると路線図の画像を表示するだけの超簡単なWebアプリケーションを作ろうと思います。路線図はiPod Touchの小さな画面に収まりきらないので、タッチインターフェイスでスクロールしたり、拡大縮小したりできます。

路線図の画像は、東京メトロが公開している路線図を使うことにしました。PDFで公開されているので、何らかの方法で画像ファイルに変換します。僕は、MacOSのプレビューで開き、画像ファイル形式で保存しました。これをオフラインアプリケーションにしてみましょう。

HTML5のファイルを作る

まずは画像を表示するHTMLを作ります。たったこれだけです。

railmap.hml：
<!DOCTYPE html>
<html manifest="railmap.manifest">
<body>
<img src="railmap.jpg" />
</body>
</html>

1行目のDOCTYPEがHTML5に対応するDOCTYPE。2行目のmanifestで指定されているファイルで、どのファイルをキャッシュするのか指定します。4行目の「railmap.jpg」が路線図の画像ファイルです。

このWebページはiPod TouchのWebブラウザでふつうに表示できます。そして、オフラインのときにはもちろん開けませんし、表示したままiPod Touchを持ち歩いたとしても、何らかのタイミングでWebブラウザに接続エラーが発生してしまい、いつのまにか画像の参照ができなくなってしまいます。

そこで、HTML5のオフラインアプリケーション機能でこのWebページをオフラインキャッシュに保存しましょう。それにはマニフェストファイルを作ります。

マニフェストでキャッシュに保存するファイルを指定

これがマニフェストファイル。

railmap.manifest：
CACHE MANIFEST

# version 1

CACHE:
railmap.jpg

マニフェストファイルのCACHE:以降に書いてあるファイルが、キャッシュに保存されるファイルです。また、元のhtmlファイルは暗黙のうちにキャッシュに保存されます（明示的に書いてもいいようです）。

そして#で始まる行がコメントです。なぜコメントが必要かといえば、マニフェストファイルが変更されないかぎり、キャッシュに保存されたファイルが再ロードされることがないためです。

例えば、元のrailmap.htmlファイルを書き換えたとしてもマニフェストファイルに変更がなければ再ロードされず、キャッシュに保存されたファイルが使われるため、Webブラウザに書き換えた内容が反映されることはありません。こんなときにマニフェストファイルのコメント内のバージョン番号を書き換えることで、マニフェストファイルを書き換えたことにするのです。

ファイルを書き換えたときには、Webブラウザから2～3度再描画しないと反映されません。これは再描画時にまず変更されたかどうかを検知し、その次の再描画時に実際に変更が反映されるという動作になっているためのようです。

さて、これで画像、HTML、マニフェストファイルが揃いました。今回はさくらインターネットのレンタルサーバを使うので、これら3つのファイルをサーバのあるフォルダにFTPで転送します。ファイルの文字コードはUTF-8です。

マニフェストのファイルタイプを設定

もう1つ必要なファイルがあります。最後にそれを設定しましょう。マニフェストファイルを「text/cache-manifest」タイプとして送出するための設定です。

サーバのフォルダに.htaccessファイルを作成し、以下の内容を設定しました（ターミナルからviで直接書き込みました）。

.htaccess：
AddType text/cache-manifest .manifest

これで拡張子.manifestのファイルが、自動的にこのタイプで送出されます。HTML5の仕様では、マニフェストファイルはこのタイプで送出される必要があります。試したところ、Windows7のFirefoxではこの設定をしなくとも期待の動作をしましたが、iPod TouchのSafariではこの設定が必要でした。

表示されたらホーム画面に登録

さあ、iPod TouchのSafariからWebサイトにアクセスしてみましょう。無事にWebページと画像が表示されました。

表示されたら、念のため［設定］からWifiをオフにしてもう一度アクセスしてみて、オフライン状態でもエラーにならずに表示されるかどうかを確認してみます。エラーも出ず、何事もなかったかのように表示されています。

あとはこれをホーム画面に登録します。アイコンは、画像を元にiOSが勝手に生成してくれて、ホーム画面に表示されました。これでアプリっぽくなり、起動するといつでもこの画面を表示させることができるようになりました（自動的にSafariが起動し、このWebページが表示されます）。

追記：知り合いがAndroid OSのGalaxy Sで試してくれたところ、同様にオフラインで使えたそうです。

HTML5は企業向けのモバイルアプリケーション配布に便利

作業の途中で、オフラインアプリケーション機能でPDFファイルもキャッシュできるのではないかと試したのですが、少なくとも現状のiPod TouchではPDFはキャッシュされないようでした。HTML、CSS、JavaScriptがキャッシュできることは確認しています。

このようにHTML5のオフラインアプリケーション機能を使うことで、WebアプリケーションをまるでネイティブアプリケーションのようにiPod TouchやiPhone、iPadに導入することができ、しかもApp Storeを使う必要がないことが分かりました。

企業内で使うモバイルアプリケーションなら、こんな風にHTML5で作ってWebでアクセスするだけで配布でき、あとはオンラインでもオフラインでも使えるというスタイルは非常に便利なのではないでしょうか。

MacOSに対するいいわけ

実はこの実験は最初に手元にあるMacBook AirのApacheを利用しようとしていました。MacOSには標準でApacheが搭載されているため、簡単にできると思ったためです。ところが実際にやってみたところ、けっこう手間がかかるのであきらめました。

MacOSのApacheは、デフォルトで.htaccessが無効になっているようです。そこでhttpd.confの書き換えが必要なのですが、そのためにはrootにならなければなりません。ところがMacOSは標準でrootユーザーが無効になっているので、有効にしなければなりません。

この時点で、設定の奥の方にあるらしいrootユーザーを有効にする設定を探すのに挫折して、使い慣れていて、すでに.htaccessが有効になっているさくらインターネットのレンタルサーバを使うことにしました……。

ところで、MacOSのプレビュー機能でPDFを画像に変換したなら、それをiPhotoに保存してiPod Touchと同期すれば簡単に路線図の画像をiPod Touchで見られるのではないか？と、これを試している途中で思ったのですが（試してはいませんが）、そうするとHTML5の記事として成り立たなくなってしまうので、そういうツッコミはなしってことでひとつよろしくおねがいします：-）