にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:46.

「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法

ブラウザにはキャッシュ機能がある

たいていのブラウザには、通信量を削減して表示速度を向上させるために、一度ダウンロードしたデータはローカル(HDDなど)のキャッシュ領域に一定期間ほど保存します。ユーザが表示を指示したデータ(HTMLやCSSや画像など)がキャッシュ領域にあれば、サーバからはダウンロードせずにキャッシュ領域に保存してあるデータをそのまま表示します。

キャッシュ領域に保存してあるデータを読ませずに、強制的にサーバからダウンロードし直させるには、単に「再読込」をすればいいだけです。
たいていは、F5キーを押すと(構成ファイルを含めた)ページ全体の再読み込みができます。もちろん、ツールバー上の「再読込(リロード)」ボタン等を押しても構いません。

このキャッシュ機能は、通常、ブラウザを使う際には便利でありがたい機能ではあります。……が、ウェブ製作現場では少々困ることがあります。

キャッシュ機能があるために起こるウェブ製作現場での問題

ウェブ製作では、こちら側とクライアント(依頼者)側とで、以下のようなやりとりが頻繁に行われます。

こちら「こんな感じでウェブページを作りましたがどうですか?」
依頼者「この部分をもうちょっとこんな感じにして下さい」

で、指示通りに修正した結果をお知らせしたとき、

こちら「ご依頼頂いたように修正してみましたがどうでしょうか?」
依頼者「……全然変わってないように見えるんですが」

こういった反応はよくあります。
この原因が、ブラウザのキャッシュ機能です。
短い期間で同じページを表示させた場合、HTML内で呼び出されているCSS・JavaScript・画像等の各ファイルは、サーバからはダウンロードされず、ローカルのキャッシュ領域に保存されたデータが読まれる可能性が高いです。
その結果、「どこも修正されていない」ように見えてしまうわけです。

こういう反応には頻繁に遭遇するので、修正報告メールには必ず「もし変わっていないように見えたらそれはキャッシュのせいだからページ自体を再読込させて下さい」のような意味の文章を書き加えます。同じ方には一度しか言わないなどということはなく、毎回毎回書き添えます。

場合によっては、「ブラウザに搭載されているキャッシュ機能とは何か?」、「どういう利点があってキャッシュ機能がブラウザにあるのか」、という点から説明をします。(^_^;) そもそも「キャッシュ」と言っただけでは伝わらないことが多いですから。

というわけで、なかなか面倒なのですよね。

(ブラウザがデータを一切キャッシュしないようヘッダに書いておく手もなくはないんですが、それだと「本当に更新していないファイル」も毎回読み込み直されることになります。無駄な通信が多くなってしまうので、極力避けたい方法です。)

毎回言わなくて済むようにする記述方法がある

実は、最近気付いたんです。
もしかしたら、ずいぶん前から業界ではとっくに使われていたのかも知れませんが。恥ずかしながら、私は最近になって、ようやく気付きました。(^_^;;;

例えば、HTMLからCSSファイルを読み込む際は、以下のように記述しますよね。(CSSファイル名が styles.css の場合)

<link type="text/css" rel="stylesheet" href="styles.css">

これを、以下のように変更します。

<link type="text/css" rel="stylesheet" href="styles.css?20130420-1100">

URLの末尾にクエリを付加しています。
上記では、「CSSのファイル名」の直後に「?」記号を書いて、その後に適当な文字列を加えただけです。
文字列は何でもいいんですが、目的から考えると日時を記述しておく方が良い気がします。

補足: URLの末尾に「?」記号を使って付加する「クエリー」

URLの末尾に「?」記号を加えて続ける文字列は、「クエリー(Query)」と呼ばれるもので、CGIなどのプログラムにデータ(指示)を送る目的などで使われます。
例えば、掲示板で123件目の投稿を表示するURLが www.example.com/bbs/show.cgi?msg=123 だったりとか。この場合、ブラウザが呼び出しているファイルが show.cgi で、そのCGIに送っているデータ(指示)が msg=123 の部分です。CGIは、その「msg=123」の部分を解釈して、適切なデータ(HTMLなど)をブラウザに返します。
Wordpressをデフォルトの設定で使うと、ページのURLも www.example.com/?p=123 みたいな感じになりますよね。この「?p=123」も同じです。

このクエリー(=「?」記号とそれに続く文字列)は、HTMLやCSSなど、動的には変化しないデータの末尾に加えても特に影響はありません。
www.example.com/page.html
www.example.com/page.html?hogehoge
www.example.com/page.html?sakuratan=tomoyochan
……等々、どう書いても、示している(表示される)のは page.html です。

しかし、ブラウザは、これらを異なるURLだと見なします。
なので、「?」以降の文字列が異なれば、ブラウザはキャッシュデータを読みません。
ここがポイントです。(^_^;)

更新するたびに「?」以降の文字列を変化させれば、キャッシュの影響を受けない

というわけで、例えばCSSを読み込ませる際のURL(ファイル名)は、以下のように「?」+「更新日時」の法則で文字列を加えて記述しておき、

<link type="text/css" rel="stylesheet" href="styles.css?20130420-1100">

このCSSを更新したときには、「?」以降の日時の部分を書き換えます。

<link type="text/css" rel="stylesheet" href="styles.css?20130420-1112">

このように、更新する度に書き換えれば、キャッシュを読まれる心配はありません。
依頼者(クライアント)側のOKが出た時点で、

<link type="text/css" rel="stylesheet" href="styles.css">

のように、何も付けないURLにすれば良いでしょう。
(まあ、付けたままにしておいても害はありませんが。)

というわけで、つい最近この事実に気づいて、今ではこの方法を使っています。
……もっと早く気づきたかった……。(^_^;;;

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---