Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:HTML5

アプリケーションキャッシュとは

HTML/CSS/JavaScriptや画像ファイルなど、Webページの表示に必要な諸々のファイルをユーザーのローカルに保存する仕組み。

なぜ、アプリケーションキャッシュが必要なの?

モバイル端末等の、通信速度が遅かったり、通信品質が低かったりする端末でも、Webサイトを快適に利用できるようにするため。また、アプリケーションキャッシュをフル活用すれば、オフラインでも動作するアプリケーションを作ることができる。

アプリケーションキャッシュの対応ブラウザーは?

Internet Explorer 10以上、主要なモダンブラウザー(Firefox, Chrome, Safari, Opera)の各最新版、Mobile Safari(iOS2.1以上)及びAndroid標準ブラウザー(Android 2.0以上)。

アプリケーションキャッシュの利用方法

キャッシュマニフェストの作成

キャッシュマニフェストとは、各ファイルのキャッシュ方針を示すファイルのこと。以下のような書式で記述する。

CACHE MANIFEST
# rev1
# キャッシュマニフェストにはコメントを書ける

# CACHE: でキャッシュするファイルを指定する
CACHE:
./app.js
./style.css
./logo.png
./not_found.html

# NETWORK: で、常にネットワークから取得するファイルを指定する
# *を使用すると、全てのファイルをネットワークから取得する
NETWORK:
*

# FALLBACK: で、ローカルにキャッシュされたファイルが存在しない場合の代替ファイルを指定する
# 左側のリソース(/以下の全てのファイル)がキャッシュされていない場合は、右側のリソースを表示
FALLBACK:   
/ not_found.html

リビジョン以外のコメントを除去したバージョン:

CACHE MANIFEST
# rev1

CACHE:
./app.js
./style.css
./logo.png
./not_found.html

NETWORK:
*

FALLBACK:   
/ not_found.html

キャッシュマニフェストファイルには、「example.appcache」といった具合に、「.appcache」という拡張子をつけるのが一般的。

キャッシュマニフェストの配信

キャッシュマニフェストは、text/cache-manifestというMIMETypeで配信する必要がある。Apacheの場合は、キャッシュマニフェストの配置ディレクトリに以下のような.htaccessを配置すると、配信できる。

AddType text/cache-manifest .appcache

キャッシュマニフェストの読み込み

HTMLファイルのmanifest属性で読み込むキャッシュマニフェストを指定する。

<!doctype html>
<html manifest="example.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Application Cache Sample</title>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>HTML5 Application Cache Sample</h1>
    <img src="logo.png" alt="logo">
</body>
</html>

キャッシュマニフェストの更新

CHACHEでキャッシュするよう指定されているファイルについて、キャッシュ対象ファイルが更新された場合でも、ブラウザーは新しいファイルを取りに行かない。ブラウザーに再度リソースの取得をさせるためには、必ずキャッシュマニフェストを更新しなければならない。

キャッシュマニフェストの更新を伝えるのはコメント行の更新でもOKなので、コメント行のリビジョン等を更新して更新を伝える。

Application Cache API

キャッシュマニフェストが更新されても、即キャッシュが更新されるわけではない。流れとしては、(1) Webページを読み込む (2) キャッシュマニフェストが更新されていることがわかる (3) 次回アクセス時にキャッシュを破棄して新しいファイルを取りに行く となる。

こういったキャッシュの更新等の処理を、ブラウザー任せではなく自前で制御したい場合は、Application Cache APIを使用する。

たとえば、キャッシュを1時間おきに更新確認したい場合、以下のようなJavaScriptで実装できる。

document.addEventListener("onload", function() {
    setInterval(function() {
        applicationCache.update();
    }, 1000 * 60 * 60);
});

参考文献

参考URL

1.草案 Working Draft
2.最終草案 Last Call Working Draft
3.勧告候補 Candidate Recommendation
4.勧告案 Proposed Recommendation
5.勧告 Recommendation

出典:大津真『JavaScriptプログラミング入門 第2版』


ちなみに、HTML5は2011/5/25に最終草案が出て、現在は勧告候補の策定中。(最終草案はここで読める)

CSSは、「CSS3」という大枠ではなく、個々の機能別にDraftやRecommendationが出てるみたいなので、ちょっと事情が違う。例えば、CSS3のセレクタ(:last-child等)は、もう勧告が出てる(2011/09/29)。一方で、Grid Layout(テーブルレイアウトのような感覚でdivをレイアウトできる、新しいプロパティ)は、今年の3/22に草案が出たばかり。

個人的には、CSSの草案・勧告が楽しい。「こんなことが出来るようになるのか!」という期待感がある。

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class="nav-topicpath">)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8" />
<title></title> ←文字コードより後に配置すること。
<meta name="format-detection" content="telephone=no" /> ←電話番号認識の無効化
<link rel="apple-touch-icon" href="img/home.png" /> ←ホーム画面用アイコンの指定
<link rel="stylesheet" href="css/iphone.css" media="screen" /> ←スマートフォン向けのmedia属性

※ホーム画面用のアイコンは、114x114以上のPNG画像。ホーム画面の角丸と光沢はiPhoneが自動でつけるので、アイコンに大して角丸・光沢をつける必要はない。
(自動での装飾をさせたくない場合、<link rel="apple-touch-icoun-precomposed" href="img/home.pmg" />と書く。ただし、角丸は必ず適用される)


参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

section:章や節の単位をマークアップする。見出しと本文で構成される1つのまとまりをマークアップするために使う。

article:ブログやニュースの記事のように、その部分だけを切り離しても独立したコンテンツとなるような箇所に利用する。

nav:ページ内の主要なナビゲーションをマークアップ。

header:ページやセクションの導入部分に当たる見出しやナビゲーションリンクをグループ化。

footer:ドキュメントの関連情報や著作権情報などをグループ化。

figure:挿絵、図表とそのキャプション(figcaption要素)をマークアップ。

small:著作権表記や注釈等の細目をマークアップ。



参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ