iPhone, iPod touchをメインターゲットに、HTML5のCache Manifest+localStorage+JavaScriptでネイティブアプリのような操作性を実現する方法を紹介していきます。
HTML5のmanifestと localStorage はオンライン時のレスポンス向上、負荷軽減が主目的と言えますが、これらを利用することでiPod TouchのようなWiFiしかない機器でネットに接続されていないときでも動作するアプリを作ることが可能です。
これまでに作ったアプリは Nack Lab で公開しています。
HTML＋JavaScriptですから他のプラットフォームでも動作可能ですが、主にHTML5/CSS3についてはSafari/iOSを対象としているため、それ以外では動作不可/不良もあります。
iPhoneの場合はアイコンを「ホーム画面に追加」するとネイティブアプリらしくなります。
Cache Manifestの概要
詳細は様々ページで紹介されているのでそちらに譲り、ここではこのようなアプリを作るときの留意点を挙げておきます。
manifestはhtmlの最初の二行に次の要領で宣言します。一行目はHTML5であること、二行目は使用するmanifestファイルの指定です。
<!DOCTYPE html>
<html manifest="index.manifest">
これによりindex.manifestに列挙したリソースをローカルにキャッシュし、ネットワークにアクセスせずに使用することができます。manifestには次の３つの区分があります。
| #CACHE | キャッシュ済みのデータがあればそれを使うリソース。 |
| #NETWORK | 必ずネットワークから取得するリソース。 |
| #FALLBACK | ネットワークから取得できなかった場合の代替。 |
基本的な使い方は、変更があまりないものを#CACHEに設定しておき、通常はキャッシュされたリソースを使うようにするというものです。
ネット切断時に動作するWebアプリを作るには、対象Webページのhtmlと、そのロード中にアクセスされるリソースを全てmanifestに含めます。これにはLINK、SCRIPT、IMGなどでアクセスされるCSS、JavaScript、イメージも含まれます。また、manifestを宣言したhtmlも含めておく必要があります。
Aタグやボタンなどがクリック（タップ）されてからアクセスが発生するものや、XMLHttpRequestでアクセスするものは必須ではありません。そのhtml内で使用するリソースはキャッシュする意味がありますが、他のhtmlに移動する場合は移動元のhtmlでキャッシュしておいても意味はなく、移動先のhtmlでmanifestを設定しておかなければオフライン時はページにアクセスできす、エラーとなります。
キャッシュされたデータを更新するにはmanifestファイルの内容を変更します。タイムスタンプを変更しただけではキャッシュは更新されません。また、Webブラウザのキャッシュをクリアするとmanifestによるキャッシュもクリアされます。
manifestを変更した場合、その直後のアクセスではキャッシュが使われ、バックグランドでmanifestのチェック、変更があった場合はダウンロードが実行されます。そのため、変更が反映されるのは次のアクセス(以降)になります。
このバックグランド処理は結構時間がかかるため、manifest変更後にリロードを繰り返してもなかなか変更が反映しないという経験をしがちです。applicationCacheのonupdatereadyイベントが発生するまではダウンロードは完了していません。
またindex.htmをmanifestに加えると、htmlを変更したときはmanifestも更新する必要があります。htmlタグからmanifestをはずした場合も、その変更を有効にするためにmanifestファイルを更新する必要があります。これを忘れると一見manifestを使っていないのに、いつまでもキャッシュデータにアクセスし、変更が反映されないhtmlになってしまいます。
参照：Cache Manifestを無効にする方法
WWWサーバーにCache ManifestのMIME TYPEが設定されている必要があります。Apacheの場合はCache Manifestを置くディレクトリに、次の行を含む.htaccessを置きます。
拡張子の推奨が".manifest"から".appcache"に変更されています。
HTML5 Tracker ― 5812.
AddType text/cache-manifest .appcache
サーバーがCache ManifestのMIME TYPEを設定しておらず.htaccessも参照しない環境の場合は、Cache Manifestは利用できません。
localStorage概要
HTML5のlocalStorageはCookieと似ている点がありますが、主に次の点が異なっています。
- 容量がCookieの4Kバイトに対し、2M～10Mバイト程度ある。
- キー/バリュー形式でデータを扱う。
Cookieでも類似のことはできますが、より広範囲に応用できると言えるでしょう。
IE8でもオプションの「DOMストレージを有効にする」がオンになっていれば使えます。
localStorageの消去はブラウザによって異なりますが、iOSのSafariの場合は「Cookieとデータを消去」により消去されます。
localStorageの使い方はいたってシンプルで、次のことを知っておけば十分です。
//データ読み出し（keyは項目名)
var stringData = localStorage[key];
//または
localStorage.getItem(key);
//データ書き込み(dataは文字列として保存される）
localStorage[key] = data;
//または
localStorage.setItem(key, data);
//localStrageからの個別データ削除
localStorage.removeItem(key);
//localStrageからの全データ削除
localStorage.clear();
//サイズチェック
localStorage.length;
localStrageサポートチェック
次のようにlocalStorageが定義されているかどうかでチェックしたいところですが...
if (typeof localStorage == "object") {
//localStorageを使った処理
}
IEでは[DOMストレージを有効にする]にチェックが入っていないとlocalStorageが使えませんが、(typeof localStorage)が"object"となります。次のようにすればより確実です。
if (typeof localStorage == "object" && localStorage != null) {
if (typeof localStorage == "object" && localStorage != null) {
//localStorageを使った処理
}
0 件のコメント:
コメントを投稿