2013年4月20日(土) 11時23分03秒 [Web関連]

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

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

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

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

時々キャッシュが強く効いている場合もあって、単に再読込するだけでは更新されない場合もありますが。そのときは [Ctrl]＋[F5]キーを押してスーパーリロードすれば全ファイルが読み込み直されます。

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

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

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

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

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

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

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

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

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

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

▼強制的にキャッシュしないように設定する方法もなくはないが

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

そもそも、（ウェブページの表示速度の向上のためにも）更新していない間は極力キャッシュから読み込んで、無駄にダウンロードしないようにしてくれる方が望ましいわけですから、キャッシュを拒否したりキャッシュ期間をすごく短く設定しておく対処方法は避けたいです。

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

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

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

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

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

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

URLの末尾に「?」記号を加えて続ける文字列は「クエリー/Query」と呼ばれるもので、CGIやPHPなどのプログラムにデータ(指示)を送る目的などで使われます。
例えば、掲示板で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（ファイル名）は、以下のように「?」＋「更新日時」の法則で文字列を加えて記述しておき、

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

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

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

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