jQueryで全部の画像のキャッシュを強制更新してみた

ブログ

2018.03.26 コーディング

jQueryで全部の画像のキャッシュを強制更新してみた

【まえがき】

お疲れ様です。

新人コーダーをやっているものです。

 

新人ということもあり、修正案件をやることが圧倒的に多い日々。

ベースコーディングやりたい……。

このサイト俺が全部作ったんだぜ!って友達に自慢したい。

まあもっと実力が付けば自ずとそうなるでしょう。

願望はこれくらいで早速本題に!

 

 

【本題】

サイト修正依頼の代表格といえば「画像の差し替え」です。

「この社員寿退社したので」、

「ここのテキスト直したいんだけど、フォントの著作権の関係で画像なんだよね」

などなど理由は様々。

 

そこでせっせと画像を入れ替えるのですが、ここでいつもクライアント様の不満を買うのが”キャッシュ”です。

スーパーリロード(Ctrlキーを押しながらF5)でキャッシュ削除してもらっても、納得していただけないことがしばしば。

 

そこでキャッシュの更新させる方法として有名なのが、ソースURLの最後にクエリパラメータをつけるというもの。

ブラウザがURLと紐付けてキャッシュを残すことを利用した方法です。

CSSやJavaScriptならそれで十分解決なのですが……、入れ替えた画像一つひとつにそんなことやってられない!!

 

サーバーの設定でキャッシュを無効化しちゃえば……

という選択肢もあったのですが、あくまで目的はキャッシュの利点を残したまま画像のキャッシュを更新するということ。

 

色々考えた結果、できたものがこちら!!

まーシンプル。

最初はもっと長かったんですよ。

上長の添削を受け、また上長の添削を受け、無駄を省いていったらこんなシンプルなものに仕上がりました。

コードを書くとき、難しく考え過ぎちゃうのはきっとエンジニアあるある。

 

PHPも組み込んであるので外部JavaScriptではなく、</body>の上辺りに置いていただけたらと(必ずJQueryを読み込んだあとに)。

解説はコメントの通り。

5行目のPHPの部分は画像がまとめて入っているディレクトリの最終更新日時をUNIXタイムスタンプで出力するようにしてあります。
(※UNIXタイムスタンプは「1970年1月1日0時0分0秒からの経過秒数)

このあたりは先輩エンジニアのお知恵を拝借いたしました。

PHPが使えないサイトの場合は、更新日の数字か何かに書き換えて、外部JavaScriptに入れてしまってください。

 

 

【あとがき】

サイトの作りによっては改良が必要かも。

これを改良してCSSとかJavaScriptをもまとめて更新しちゃいたいって場合は、
「テンプレートディレクトリの最終更新日時をクエリパラメータとして出力」とかにすれば良いのではないでしょうか(WordPressサイトの場合)。

キャッシュはメリットも沢山あります。

アクセス毎にソースURLが変わってしまうようなコードにしてしまうと、メリットを全部なくしてしまうことになりますのでご注意を。

 

今回参考にさせて頂いた記事は以下のもの。

特にCSS・JavaScriptのキャッシュを更新する方法はこちらをご覧頂いた方が良いかと。

古いキャッシュ撤去委員会

大先輩が書いたもので、「スーパーリロード」を連打していた僕には画期的でした。

便利にするって楽しい!

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら