「あ、それキャッシュですね。」とはもうオサラバ！パラメータでキャッシュをクリアしよう！

こんにちは。
最近BBQがしたくてたまらない。
山田です。

 

早速ですが、バナーをサイトに掲載したあとにクライアントに
「できました！更新したので確認お願いしますっ！」
と勢いよく返事したのはいいものの・・・。

 

「いや。変わってません。ちゃんと確認してください。」

 

こんな経験ありませんか？

何回画像を差し替えても、

 

「あれ…デザインが変わってない…。」

 

と画像を上書きしたのにも関わらず、全然画像が変わらなくて、
結局別のファイル名にしてUP。

 

結果として画像ファイル名が

(1回目)「banner.jpg」
(2回目)「banner2.jpg」
(3回目)「banner3.jpg」

 

なんて・・(これは私の問題か。)

どんどんわけのわからない名称になってしまったりして、

「なんで変わんないんだよ！！いい加減にしろ！」

 

って思ったことありませんか？

ほとんどの場合、こういう現象はWebブラウザのキャッシュが原因です。

今日はそんなWebブラウザキャッシュとはおさらばできる「パラメータ」についてのTipsをご紹介します！

なんでキャッシュが残ると更新されないの？

パソコンはインターネット上でホームページを表示させた際にそのデータを一時的に保存（キャッシュ）します。
なんでこんな作りになっているかというと、サーバーのデータを取りに行くより表示速度が速くなるからです。

 

つまり、キャッシュがパソコンに残ることによって、

最初に閲覧した時よりも、2回目閲覧した時は時間がかからずに表示されるというわけです。

 

キャッシュを削除する方法

もちろんブラウザ上の設定でキャッシュをクリアすることができます。

ブラウザ毎に違いますので、ここでは割愛しますが、

気になる方は、

[ooキャッシュ クリア　方法]

 

なんかで調べてみてください。

 

まぁ。そんなこんなで、

自分でキャッシュをクリアするのはやれば良いんですが、
クライアントに対して。

 

「あ、それキャッシュですね。クリアしてもっかい見てもらえますか？」

というのは非効率ですし、できることなら、

 

「更新終わりました!(ついでにキャッシュもクリアしときましたよ！)」(ドヤァ

の方が、仕事できるな？コイツは・・・。と思ってもらえるわけです。多分。

 

じゃあ一体どうするの？というわけで使うのが今回お伝えする「パラメータ」です。

 

パラメータとは？

パラメータとは､ サーバーに情報を送るためにURLに付け加える変数のことを言います｡
(変数？なんだそれ・・。)

 

まぁ細かいところは、今回も割愛いたしますが、
ざっくりお伝えすると、

クエッションマーク (?) をURLの末尾に付けることで、「変数(パラメータ)＝値」の形式で、

サーバーに送信するデータをURLに含めることができると覚えといてください。

 

パラメータの種類

パラメータにはアクティブパラメータとパッシブパラメータの2種類があります。

 

[パッシブパラメータ]

パッシブパラメータはサーバ上のプログラムが内部的に使用するためのパラメータです。

 

[アクティブパラメータ]

指定したパラメータの値によってWebコンテンツの内容が変化するタイプのパラメータです。

 

このパラメータを使ってキャッシュをクリアできるというわけです。

 

 

キャッシュクリアの方法

実はこれ。imageだけではなくCSSやJSにも活用できます。

し　か　も！

 

やり方はかんたんです！

 

読み込む静的ソースのファイルパスの後に「？」と任意の文字列を追加するだけ！

百聞は一見に如かずということで、下記がソースです。

 

imageファイルの場合

CSSファイルの場合

JSファイルの場合

という具合にファイル名の末に?を付けるだけで、
ブラウザに新しいファイルとして認識され、それまでキャッシュされていたリソースがクリアされます。

ちなみに、この方法は楽天などのECモールでも使えます！

(くぅーーーーッ！嬉しい！)

 

ちなみにこの「?」以降の文字列は実はどんなものでも大丈夫です。

 

「?yamada」でも「?kds」でも自分で管理しやすい任意の表記でも大丈夫です！

ただ一人で運用していくならまぁ自分がわかればいいですが、

いつ付与されたパラメータかをメンバー全員が把握する為にも私山田的には「?20190901」や「?day=20190901」みたいなわかりやすいものがオススメです！

 

パラメータを使うときの注意点

キャッシュを付与している状態で画像を更新すると、「あれ？また変わんない・・・。」となってしまいます。

それもそうで、画像が変わらないのはずっと前回付与したパラメータを読み込んでいるからです。

そういう時は、

[?01]→[?02]

な具合で、このパラメータの文字を変更してください

PHPを使えば、動的にパラメーターを付与することもできます。
ここでは詳しく書きませんので、気になる方は

「PHP パラメータ　付与」

 

で検索してみてください。

(こればっかりですみません。)

 

終わりに

いかがでしたか？
これでもうクライアントや上司に「キャッシュのせいだから再読み込みして下さい。」と言わなくて済むハズ！

あなたなりのやり方で、キャッシュクリアライフをお楽しみください！

では今回はこの辺で。