アプリケーションキャッシュ (3/5)
作成:2012-04-16 07:52
更新:2012-04-16 07:52
更新:2012-04-16 07:52
■キャッシュを利用してみよう
では、実際にアプリケーションキャッシュを使ってみましょう。まずはマニフェストファイルを作成します。今回は「sample.appcache」というファイル名で用意することにしましょう。そして、下のリスト欄に掲載したような内容を記述しておきます。
ここでは、CACHE:にhelo.htmlというファイル名を用意してあります。つまり、helo.htmlをキャッシュして、サーバーにアクセスしないで表示されるようにするわけですね。では、そのhelo.htmlを用意しましょう。やはり下のリスト欄に簡単なサンプルを挙げておきましたので、これを記述してください。
この２つのファイルは、いずれもサーバーの設定変更を行なってあるディレクトリに配置します（Apache HTTP Serverならば、.htaccessファイルを設置した場所）。このhelo.htmlファイルを見てみると、<html>タグが以下のようになっていますね。
ページに何度かアクセスしてみると、そこに表示される日時はちゃんと更新されていることがわかります。これは、ページを読み込んだ後でJavaScriptによって動的に設定されているものなので、キャッシュとは無関係にちゃんと最新の表示に変わるのです。キャッシュされるものは、あくまで「本来、サーバーから受け取るデータ」なので、受け取った後で実行されるJavaScriptは影響を受けません。ですから、動的に表示を更新するたぐいのページであっても、ロード後にJavaScriptを利用し、Ajaxで必要なデータを受け取って更新するようにしておけば、キャッシュしても問題なく最新のデータを表示することができます。
表示を確認したら、helo.htmlの内容を書き換えて、再びアクセスしてみてください。表示されるページは、書き換える前の状態のままのはずです。ページを変更しても、キャッシュされている限り、ブラウザに表示される内容は更新されないのです。
では、どうやってキャッシュされたページを更新するのか。それは「マニフェストファイル」を利用します。マニフェストファイルの内容が更新されると、それによってキャッシュされているファイルも自動的に更新されます。ですから、キャッシュしているページの内容を更新したら、あわせてマニフェストファイルの中身も書き換えてやればいいのです。
今回のマニフェストファイルには、「#VERSION 1」というコメント文が書かれていますね。これが、実は更新のための仕掛けです。helo.htmlの内容を更新したら、このVERSIONの番号を変更して「#VERSION 2」というように書き換えれば、helo.htmlの表示も更新される、というわけです。このように、マニフェストファイルに更新のためのコメント文を用意しておくと、更新作業もやりやすいでしょう。
ここでは、CACHE:にhelo.htmlというファイル名を用意してあります。つまり、helo.htmlをキャッシュして、サーバーにアクセスしないで表示されるようにするわけですね。では、そのhelo.htmlを用意しましょう。やはり下のリスト欄に簡単なサンプルを挙げておきましたので、これを記述してください。
この２つのファイルは、いずれもサーバーの設定変更を行なってあるディレクトリに配置します（Apache HTTP Serverならば、.htaccessファイルを設置した場所）。このhelo.htmlファイルを見てみると、<html>タグが以下のようになっていますね。
<html lang="ja" manifest="sample.appcache">このように、<html>タグに「manifest」という属性を用意し、これに使用するマニフェストファイルを指定します。こうすることで、このページを読み込む際、指定のマニフェストファイルをロードしてキャッシュへの保存が実行されるようになります。そして2回目以降のアクセスでは、キャッシュされた内容が表示されるようになる、というわけです。
ページに何度かアクセスしてみると、そこに表示される日時はちゃんと更新されていることがわかります。これは、ページを読み込んだ後でJavaScriptによって動的に設定されているものなので、キャッシュとは無関係にちゃんと最新の表示に変わるのです。キャッシュされるものは、あくまで「本来、サーバーから受け取るデータ」なので、受け取った後で実行されるJavaScriptは影響を受けません。ですから、動的に表示を更新するたぐいのページであっても、ロード後にJavaScriptを利用し、Ajaxで必要なデータを受け取って更新するようにしておけば、キャッシュしても問題なく最新のデータを表示することができます。
表示を確認したら、helo.htmlの内容を書き換えて、再びアクセスしてみてください。表示されるページは、書き換える前の状態のままのはずです。ページを変更しても、キャッシュされている限り、ブラウザに表示される内容は更新されないのです。
では、どうやってキャッシュされたページを更新するのか。それは「マニフェストファイル」を利用します。マニフェストファイルの内容が更新されると、それによってキャッシュされているファイルも自動的に更新されます。ですから、キャッシュしているページの内容を更新したら、あわせてマニフェストファイルの中身も書き換えてやればいいのです。
今回のマニフェストファイルには、「#VERSION 1」というコメント文が書かれていますね。これが、実は更新のための仕掛けです。helo.htmlの内容を更新したら、このVERSIONの番号を変更して「#VERSION 2」というように書き換えれば、helo.htmlの表示も更新される、というわけです。このように、マニフェストファイルに更新のためのコメント文を用意しておくと、更新作業もやりやすいでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※sample.appcacheの内容
CACHE MANIFEST
#VERSION 1
CACHE:
helo.html
※helo.htmlの内容
<!DOCTYPE html>
<html lang="ja" manifest="sample.appcache">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<script type="text/javascript">
function initial(){
document.querySelector('#t').innerHTML = new Date();
}
</script>
</head>
<body onload="initial();">
<header>
<h1>Cache Sample</h1>
</header>
<article>
<p id="msg">AppCacheのサンプル</p>
<hr>
<p id="t"></p>
</article>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る