画像がキャッシュされてしまう時の強引な対処法

こんばんわ。

今日は会社の先輩へ送る餞別の品を求めてコムサイズムに行きました。

シンプルなシャツ一枚にしても、ユニクロとかと比較するとちょっとオサレな感じがしますよねっ。

そんなコムサで、シンプルdeオサレなベルトを買いました。







それはさておき、ブラウザのキャッシュ機能ってすごいですよね！

光回線とかのおかげで回線速度が数年前に比べると格段に早くなっているとはいえ、キャッシュ機能でさっき読み込んだ同じ画像をまた読み込んで・・・とかしていると、画像を多様しているサイトはチラチラしたりもっさりしてしまうと思いますし。



でもいいことばかりでもなく、プログラムで画像のアップロード・更新処理などの機能を作った時に先方さんから



「さっき画像をアップロードしたのですが、画像が更新されていないようです」



という問い合わせが飛んできました。

どうもブラウザがキャッシュに残っている古い画像を表示しているようで、「更新ボタン（F5）」を押すとやっと新しい画像がでてくるという状態でした。





それならno-cacheさせたらいいだけだよねと思い、HTMLのMETAに

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Mon, 26 Jul 1997 05:00:00 GMT" />

と入れても改善されず。



PHP側から出力されているから、header出力すればいいのかなと思い、PHPで画像を動的に出力する際にキャッシュさせない – KEINOSの日記を参考に

$sEtag = md5(time());
header('pragma: no-cache');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Etag: "{$sEtag}"\n\n");

と入れても改善されず。





CakePHPが何か悪さしているのかなと思ったりもしましたが、その辺はわからず。。。





なので、強引な手段にいきます。

ブラウザがキャッシュを読み込みにいく条件の一つとして、同じファイル名であるということがあります。

たとえまったく同じ画像でも、ファイル名が違うと違うファイルとなる、当然と言えば当然ですよね。

なので、それを利用します。





こんな感じです。

$image_name = "uploaded.jpg?time=".time();

プログラムを併用して画像の後ろにアクセスごとに変化する何かしらのGETパラメータ（クエリ・ストリング）を付随してあげます。

そうすると、ブラウザが「違うファイルかもしれない」と認識するので、画像を読み込みなおしてくれるようになります。

これはPHPでやっていますが、たとえばjavascriptでもonLoadイベントなどで処理すればできると思います。





ファイル名そのものを書き換える方が無意味なパラメータをつけなくてすむのでいいんですが、そのファイル名が何の画像かを把握できるようにしてあげる必要性があるので、手間を増やさない為にこの方法で強引にやりました。