ブラウザに画像データをキャッシュさせない方法

ブラウザに画像データをキャッシュさせない

gdライブラリを使って画像をサーバーにアップロードして、そのファイルを回転させたり、縮小したり、ファイル名はそのままで画像を入れ替えるといった仕組みを作っています。

しかし、ブラウザのキャッシュ機能が邪魔をして変更がすぐに反映されないことことがあります。スーパーリロードを使うという手もありますが、いちいちやるのも面倒です。

 head内にmetaタグで以下のように記述し、ブラウザに「キャッシュしないでね」と伝える方法があるそうなので試してみましたが、修正がすぐに反映されたりされなかったりで改善できませんでした。

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />

上述の記述をしても、キャッシュするかしないかはブラウザ任せになるようです。

「ブラウザさん、これは編集プログラムなんで、キャッシュはしないでね」

「一応努力はするが、こちらも重たいブラウザと言われたくないんでね。こちらにはこちらの事情ってもんがあるわけよ」

といったところなのかもしれません。

さらに調べていくと、画像の src の後ろに半角ハテナとなにかの文字列を付加するというのをみつけました。

<img src="/test.jpg?xCm87R" alt="テスト" />

という具合です。

この付加する文字列は、前回のものと重複しないような文字列であればいいわけですから、ランダムな文字列を生成して付加する方法や、時刻を文字列に変換して付加する方法が考えられます。

1,ランダムな文字列を生成して付加する方法

<?php
function makeRandStr($length) {
	//配列をマージする rangeは範囲の整数を有する配列を作成します
	$str = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z'));	
   	$rand_str = "";
	for ($i = 0; $i < $length; $i++) {
	// 配列の中の文字からランダムに1文字取り出し、$rand_strに＄length分だけ追加します
	        $rand_str .= $str[rand(0, count($str) - 1)];	
	 }
    return $rand_str;	// 得られたランダムな文字列を返します
}

$_RAND_STR = makeRandStr(5);	// ５桁のランダム文字列を得ます
print("$_RAND_STR <br>");	// 確認してます

$_IMG_URL = "test.jpg"."?".$_RAND_STR;	// イメージファイル名に「?ランダム文字列」を付加します

print("<img src=\"$_IMG_URL\"  alt=\"サンプル\">");　// 表示してます

?>

2,日付を付加する場合 

<?php
  $_TIME_STR = date('YmdHis');	// date関数で時刻を文字列で得ます

  print("$_TIME_STR <br>");	// 確認してます

  $_IMG_URL = "test.jpg"."?".$_TIME_STR;  // イメージファイル名に「?時刻文字列」を付加します

  print("<img src=\"$_IMG_URL\"  alt=\"サンプル\">");
?>

？の後の文字列が以前読み込んだ時と違うものであれば（ブラウザのキャッシュした画像と違うと判断し）、改めて画像を読み込みにいくということですね。

あまり多用しすぎると閲覧者のメリットが失われてしまいますので、どうしてもというとき以外は使用しない方がいいでしょう。

ちなみに、この方法、cssの読み込みにも使えるみたいです。書き換えたCSSを強制的に反映させたい場合には便利です。

<link rel="stylesheet" type="text/css" href="/css/sample01.css?2010041510" />
<link rel="stylesheet" type="text/css" href="/css/test01.css?20ku6ijkl" />

PHP

Posted by pman-bros