ブラウザのキャッシュをコントロールする(2)

都合により画像やら CSS やらを差し替えたりすることがたまにあります。HTMLはそのままでも対象ファイルを上書きすればいいだけなので楽なんです。

しかし！閲覧者のパソコンにキャッシュされている情報が優先されてしまい、画像を差し替えたはずなのに「まだ変わってないじゃんか！いつになったらやってくれるのか！」と指摘されてしまうこともあります。そんなとき「キャッシュされてると思うので、キャッシュをクリアしてください」が通じないことが多々あります。

いろんな立場のヒトたちがキャッシュ削除の方法を閲覧者向けにあちこちで説明していますが、キャッシュ保存に起因するトラブルがそれだけ多いということです。しかも、対象となるキャッシュだけを狙い撃ちして削除することは困難で、キャッシュを全削除することとなります。

それはそれで、他のトラブルの元凶ともなり得ます。

ならば、ウェブページの提供者が、必要なだけキャッシュを利用する……時には必要なだけキャッシュを利用しないようコントロールすればスッキリ解決です！

そもそもファイル名が同じなのでキャッシュが使われるわけです。違うファイル名にすれば一挙解決ですが、HTMLも書き換えなきゃならないところが面倒なんですよね！そうなんですよ。

だからわざわざ同じURLで解決したいのです。

だからキャッシュが使われてトラブルになるのです。

URLは同じでも、クエリが付いていることで、呼び出されたファイルは別物として認識されます。でも、クエリが付いているだけでは対象ファイルを読みに行く以上のことはありませんから、画像を表示するという基本機能には変化がありません。

これらは、キャッシュという観点からは別物ですが、参照するファイルは同一。main.css を更新してアップロードした場合、「?」以降のクエリが変わっていればキャッシュを使わずに再読み込みするのです。

手で書くのは面倒なので、固定 HTML ファイルならば、

<img src="main.jpg">

とするところを、例えば Javascript か何かで

<script>document.write('<img src="main.css?'+Date.now()+'">')</script>
<noscript><img src="main.jpg"></noscript>

としてやれば、クエリが秒単位で変わりますのでキャッシュされたファイルが使われることはありません。PHP でもできますよね。

いちいち Javascript なんて面倒くさいよ！という場合、MovableTypeならばMTタグを埋め込んでもいいでしょう。テンプレート以外でも、本文表示に「mteval」モディファイヤを使い、ファイル名にクエリを追加するMTタグを仕込むというのもアリかなと思います。

<img src="main.jpg?<$mt:Date format="%Y%j"$>">

ファイル名「main.jpg」後の「?」以降のクエリが1秒毎に違っているのでキャッシュするのしないのという側面から見ると別物扱いです。でも、これではただ単に「毎回キャッシュを使わない」ということのために、呼び出されるたびにずーっとキャッシュを増やし続ける魔物でもあります。

あと、該当ファイルに対していちいち埋め込まねばならないのも面倒ですね。

だったら、サーバーサイドでキャッシュの期間を指定したらよいのではないでしょうか。

以前にも説明しましたが、「.jpg」「.css」等、ファイルタイプごとにキャッシュ期間を定めることができます。それをディレクトリごとに細かく設定することもできます。

この方法は、どちらかというと「積極的にキャッシュを使う」という用途で使われますが、キャッシュする期間を敢えて短くしたり、全くキャッシュさせないということも可能です。ですので、必要なディレクトリに、必要な分だけ記述した .htaccess を仕込んで、キャッシュ期間をコントロールすればよいのです。

ちょっと話題になったのは、イントラネットに保存されているキャッシュが読み出されてしまう例。これって .htaccess でコントロールできるんでしょうか。できないのだとすると、ファイル名を変更するか、クエリをくっつけるかしか思いつかないのですが、他に回避方法ありますか？

ご存知の方がおられましたら、ぜひともご教示ください。

キャッシュは通信量や表示速度の向上に役立つ機能なのですが、なかなか厄介な存在でもあるのです。何にしても両刃なんですねえ。

faviconのデザインについて考えてみる