Safariのアプリケーションキャッシュを試す
iPhone/iPod touchのSafariは、HTML5準拠のアプリケーションキャッシュ機能を実装している。
これはクラインアント側でキャッシュするファイルを制御できるもので、これを利用すると、オフライン状態でwebアプリを動作させることが可能になる。
- HTML5仕様
http://www.whatwg.org/specs/web-apps/current-work/#appcache
アプリケーションキャッシュを制御するには、キャッシュマニフェストファイルというものをサーバ側に設置する。これにはクライアント側にキャッシュさせたいURIを記述したもので、具体的には以下のようになる。
CACHE MANIFEST #comment index.html code.js img/icon.png
この例では、index.html,code.js,img/icon.pngの3つのファイルをキャッシュするという指示になる。
これをファイルとして、たとえばcache.manifestという名前でサーバに置く。このファイルは適切なmime-typeで出力される必要があるので、apacheなら.htaccessに
AddType text/cache-manifest .manifest
のように書いておく。
htmlファイル側には、ヘッダ部分に次のように記述する
<html manifest="cache.manifest">
これで、このhtmlが読み込まれたときにマニフェストが参照され、クライアント側でキャッシュされるようになる。
一度キャッシュされると、オンラインでもオフラインでもキャッシュが利用され、サーバ側のファイルは参照されなくなる。
サーバ側のファイルを更新したときは、そのままではキャッシュされたままになってしまうので、クライアント側にキャッシュを破棄して再読み込みさせなければならない。
そのためには、マニフェストファイルを更新すればよい。ファイルが1文字でも違っていればいいようなので、コメント部分にバージョン情報を記述しておくなどすればよい。
iPhone/iPod touch のSafariで試してみたところ、ちゃんと動作しているようだ。ただ、いろいろテストしている過程で、キャッシュされたページを開いたところでブラウザが落ちるようになってしまったりといったこともあるので、注意しつつ試してみる必要がある。
Safariのツールバーを出なくする
すでにいくつかのサイトでも話題になっているが、iPhone/iPod touchのSafariでwebアプリを開いたときに、上のアドレスバーや、下のメニューバーを出なくする設定が発見されている。
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
上の設定が、webアプリモードにするもので、これを書いた場合、ホーム画面にアイコンを置いたブックマークから起動すると、webアプリモードになり、アドレスバーやメニューバーが表示されなくなる。
下の設定は、一番上の電波状態や時刻が表示されているバーの部分を、半透明にする設定で、上のアプリモードの設定があるときのみ有効のようだ。
副作用としては、メニューが出なくなるので、Safariとしてのページ移動やブックマークの機能が使えなくなるということ。
それからページ遷移についても、普通のブラウジングと違う挙動があるので注意が必要だ。
リンクによるページ遷移の場合、リンク先が開かれるときに通常のSafariによるブラウジングに戻ってしまう。つまりページ遷移した段階で、webアプリモードが解除されてしまう。
また、target="_blank"等を書いたリンクは無視され飛べないし、window.open関数で開いたページは、Safariが起動するものの元のページが表示されてしまう。
おそらくこのあたりはセキュリティ上の配慮なのだろう。
例外としては、javascriptでlocation.hrefを変更した場合は、webアプリモードのまま同じ画面内でペーシ遷移ができるようである。
というわけで事実上、１ページで完結するか、ajax的な画面遷移のwebアプリのみで有効な設定のようである。
保存したページをオフラインで見るwebアプリ
主にiPod touchで便利かと思うが、iPhoneでも使用可能。
こちら->http://touch.wakufactory.jp/webpocket/
使い方は上のページをみていただくとして、画面キャプチャを貼っておく。
これがページを保存する画面。こちらはオンラインで使用。
こっちが保存したものを閲覧する画面。オフラインで使える。
外部のcss等は反映されないので、レイアウトは崩れるが、文章を読むぶんには十分。
大きな画像も拡大/縮小して表示できる。
DBの容量が現時点では5Mバイトまでになっているので、その範囲内で保存しておくことができる。
難点はビュアーのページがsafariに残っていないと使えないこと。オンライン時に開いておいて、あまり重たいアプリを起動しないように注意するしかない。
内部的なことを少し書いておくと、サーバ側でwebページや画像を取得して、それをajax的にクライアントに送っている。画像はbase64エンコードに変換し、dataスキームを使って表示している。
クライアント側は、jsonフォーマットでサーバからデータを受け取り、ローカルのDBに格納している。
DBのリストアップと、本体を取り出して表示する部分は、すべてオフラインで動くというわけ。
ローカルDBを使って、ページを保存するテスト
iPhoneだと不要かもしれないが、iPod touchの場合通信がオフラインの状態で使うことが多く、その場合に保存したwebページを見られると便利なことがある。
htmlファイルをSafariのローカルDBに保存して、オフライン状態でも見られるようにするものを作ってみた。
http://touch.wakufactory.jp/sample/webpocket.html
url欄に取得したいurlを入れて、GETを押すと、サーバ経由でページを取り込み、ローカルDBに格納している。
一旦格納したものは、オフラインになっても、DBから呼び出して表示することができるというわけ。
PC版のSafariでも動作する。
今のところ指定ページのhtmlのみを取ってくるだけなので、画像も出なければ、外部ファイルのcssも効かない状態だが、文章を見る目的ならなんとか使えそう。上のキャプ画面では、青空文庫のhtmlファイルを保存してオフラインで呼び出している。
ローカルDBに保存されていることは、設定画面のSafari->Databaseで確認できる。ここにはドメインごとに保存されたDBがリストアップされ、DBごとに以下のような詳細情報が見られる。
300kbあまりのページが保存されていることがわかる。最大は5MBまでで、どうやら現段階では変更できないようだ。
オフラインで見られるとはいえ、このページ自体がブラウザに残っていなければ使えないのが難点。Safariのページキャッシュは、重いアプリを使ったりするとすぐに開放されてしまうようなので、ページの再読み込みが起こってしまったら、その時点でアウトである。
制約はあるものの、なんとか実用になりそうな雰囲気なので、ちゃんとしたアプリとして仕上げてみるつもり。
iPod touch/iPhoneのsafari でお絵描き
昨日のテストプログラムをもうちょっと実用的(?)にしてみた。
http://touch.wakufactory.jp/sample/canvas4.html
作例が酷いのはご容赦を。
保存機能は無いけど、ホーム+スリープボタンで画面キャプチャできる。
canvasのサイズをスクリーンサイズ以上にすると、描画の反応がとたんに遅くなる。
縮小モードにしても遅いので、大きいキャンバスに拡大縮小しながら描くってのはちょっと無理そうで残念。
Safari新機能
2.0になって、Safariの機能もいくつか追加されています。
一番期待できそうなのが、HTML5.0のローカルDBサポート。
オフラインで使うことの多いtouchにとっては、ありがたい機能といえます。
サンプルなどはこのあたり。PCのSafariでも動きます。
http://webkit.org/misc/DatabaseExample.html
それから、マルチタッチのイベントが取得できるようになっているようです。
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
これはネイティブアプリ並UIをwebアプリでも実現できそうな期待があります。
いずれも少しいじってみてまた書きます。
