WEBサイトの案件をこなしていると、クライアントにサイトを納品し最終チェックをしてもらいます。
その時に、必ず発生すると言っても過言ではない問題が「画像のキャッシュ問題」です。
WEBにあまり詳しくない担当者に当たった時には、キャッシュについての理解が無いために無駄な工数を割いてしまうことも多々あります。
そんな画像キャッシュ問題を未然に防ぐために、簡単にできるコーディング方法をご紹介します。
キャッシュ（cache）とは？
キャッシュとは閲覧したWEBページのデータを一時的に保存したもののことです。
閲覧したページデータを保存しておくことで、次回そのページに訪れた時にスムーズにWEBサイトを閲覧することができるようになるためにキャッシュは利用されるのです。
ちなみに、キャッシュとよく混同されがちなのがCookie（クッキー）という、これまた一時的にデータを保存するようなものがあるのですが、端的に違いをご説明すると以下のような違いになります。
| Cache（キャッシュ） | 閲覧したWEBページのデータを一時保存 |
|---|---|
| Cookie（クッキー） | WEBページを訪れたユーザーのデータを一時保存 |
データを保存するという点は同じですが、保存するデータが全く異なります。
ちなみに、ターゲット広告などで利用されているCookie（クッキー）ですが、Googleが2020年から2年以内に広告目的での利用を制限していくと発表し話題になりました。
画像のキャッシュ問題はどのような場面に起きるか
WEBサイトをスムーズに閲覧させてくれるようになる素晴らしい「キャッシュ」ですが、当該の画像表示の際に「画像を更新したのに切り替わっていない！」という事象を時々引き起こします。
その事象が生じる場面を一部ご紹介しましょう。
WEB担当者とのやり取りをする時
担当者「更新したはずの画像が変わってないので、修正してください」
私「あ、いえPCのキャッシュ消してみてください」
担当者「え？キャッシュ？どうやって消すんですか？」
私「ああ、えーと、、まずはクロームの左上のChromeを押して、以下略」
担当者「できました！あ、Cookieまで消してしまいました、、これってどうやって戻せますか？」
私「…」
上記のようにWEB担当者との間で案件のチェックをする場面で、画像のキャッシュを巡って無駄なやり取りが発生するケースが多いです。
上記のやりとりをメールで行うなんてのは地獄そのものです。
今回の方法を用いれば無駄な工数削減が期待できます。
定期的に更新されるWEBページに訪れた時
担当者「WEBサイトをリリースしました。」
ユーザー「あれ？このサイト見出しはvol.15になってるけど、前見たvol.14の時の画像のままだ。情報が正しくないじゃないか」
担当者「変更しておりますのでそんなはずは、、」
ユーザー「いや、更新すると直るんだけど、ほら、最初に見ると」
担当者「それはキャッシュが原因です！キャッシュを削除していただければ、、」
ユーザー「面倒臭いよ！！」
上記のケースは納品後、ユーザーが閲覧できるようになった環境においてキャッシュ問題が発生する場面です。
一番恐ろしいですね。
ページを訪れる不特定多数の人にキャッシュを消去して、などと指示を出せるわけがありませんのでやはり未然に画像キャッシュ問題は防ぐべきなのです。
画像キャッシュ問題を防ぐコード
上記でご紹介したような画像キャッシュ問題を引き起こさないためのコードをご紹介します。
２つの文字列を追加するだけで、キャッシュ問題は解決します。
こちらは既存のコード。このままでは画像キャッシュの悲劇が繰り返されます。
<img src="sample.jpg" alt="なべわかし">
上記のコードに、画像名の後に「?＋日付の文字列（日付が一般的）」、imgタグ内の最後に「/（これは何でもOK、スラッシュが一般的）」を加えるだけでOKです。
実際のコーディング例は以下の通り。
<img src="sample.jpg?20180314" alt="なべわかし" />
非常にシンプルですが、この方法で画像キャッシュ問題にはもう悩まされません。
これがうまく機能する理由としては、img内の情報が書き換わるために「この画像は新しいものである」と認識させることでキャッシュを利用せず新たに画像が読み込まれるためです。
上記の２つの文字列は言ってしまえば、「画像新しくなったよ！」という告知文みたいなものです。
頻繁に更新するのでHTML変更が面倒
いちいち画像のHTMLを変更するのが面倒だ、と感じる方はPHPで以下のように制御することで自動で日付を追加してくれるようになります。
（これはWordPress案件とかでは重宝します。）
<img src="sample.jpg?<?php echo date("YmdHis");?>" art="なべわかし" />
いちいち更新の日付を手で入力すると手間なので、PHPで日付を自動出力できるようにカスタマイズしてあります。
少しでも工数を減らして、自動化できるこの記法は重宝したいですね。
※最新環境ではちゃんとローカルでテストしてからUPしてください！
画像キャッシュ残さない方法まとめ
これで画像キャッシュ問題は解決され、担当者やユーザーとの無駄な工数を削減することができるでしょう。
しかし、注意点として何でもかんでも全てのこの方法を適用するのはオススメしません。
というのも頻繁に画像を差し替える箇所にこの方法は非常に有効ですが、滅多に画像を差し替えない「ヘッダーロゴ」「フッターロゴ」などに対してもこの方法を適用してしまうと、キャッシュを利用できず毎回読み込みが発生します。
その結果サイト表示の遅延に繋がるのはユーザーのUXを阻害する恐れがありますので、利用シーンはしっかりと考えたいものですね。
ではでは。