【まえがき】
お疲れ様です。
新人コーダーをやっているものです。
新人ということもあり、修正案件をやることが圧倒的に多い日々。
ベースコーディングやりたい……。
このサイト俺が全部作ったんだぜ！って友達に自慢したい。
まあもっと実力が付けば自ずとそうなるでしょう。
願望はこれくらいで早速本題に！
【本題】
サイト修正依頼の代表格といえば「画像の差し替え」です。
「この社員寿退社したので」、
「ここのテキスト直したいんだけど、フォントの著作権の関係で画像なんだよね」
などなど理由は様々。
そこでせっせと画像を入れ替えるのですが、ここでいつもクライアント様の不満を買うのが”キャッシュ”です。
スーパーリロード（Ctrlキーを押しながらF5キーを押す）でキャッシュ削除してもらっても、納得していただけないことがしばしば。
そこでキャッシュの更新させる方法として有名なのが、ソースURLの最後にクエリパラメータをつけるというもの。
|
1 |
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/hoge.jpg?v=20180305" width="100" height="100" alt="hoge"> |
ブラウザがURLと紐付けてキャッシュを残すことを利用した方法です。
CSSやJavaScriptの外部ファイルのキャッシュを更新するならこれで解決なのですが……、入れ替えた画像一つひとつにそんなことやってられない！！
サーバーの設定でキャッシュを無効化しちゃえば……
という選択肢もあったのですが、あくまで目的はキャッシュの利点を残したまま画像のキャッシュを更新するということ。
色々考えた結果、できたものがこちら！！
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function () { $('img').each(function() { //imgタグがある限り繰り返し実行 var imgSrc = $(this).attr('src'); //画像のソースURLを取得し、変数に格納 $(this).attr('src', imgSrc + '?v=<?php echo filemtime(get_template_directory().'/assets/img'); ?>'); //本来のソースURLをクエリパラメータ付きURLで置換 }); }); </script> |
まーシンプル。
最初はもっと長かったんですよ。
上長の添削を受け、また上長の添削を受け、無駄を省いていったらこんなシンプルなものに仕上がりました。
コードを書くとき、難しく考え過ぎちゃうのはきっとエンジニアあるある。
PHPも組み込んであるので外部JavaScriptではなく、</body>の上辺りに置いていただけたらと（必ずjQueryを読み込んだあとに）。
解説はコメントの通り。
5行目のPHPの部分は、画像がまとめて入っているディレクトリの最終更新日時をUNIXタイムスタンプで出力するようにしてあります。
（※UNIXタイムスタンプは「1970年1月1日0時0分0秒からの経過秒数）
このあたりは先輩エンジニアのお知恵を拝借いたしました。
PHPが使えないサイトの場合は、更新日の数字か何かに書き換えて、外部ファイルのJavaScriptにまとめてしまってください。
【あとがき】
サイトの作りによっては改良が必要かも。
これを改良してCSSとかJavaScriptをも一緒に更新しちゃいたいって場合は、
「テンプレートディレクトリの最終更新日時をクエリパラメータとして出力」とかにすれば良いのではないでしょうか（WordPressサイトの場合）。
キャッシュはメリットも沢山あります。
アクセス毎にソースURLが変わってしまうようなコードにしてしまうと、メリットを全部なくしてしまうことになりますのでご注意を。
今回参考にさせていただいた記事は以下のもの。
特にCSS・JavaScriptのキャッシュを更新する方法はこちらをご覧頂いた方が良いかと。
https://spc-jpn.co.jp/blog/6620/
大先輩が書いたもので、「スーパーリロード」を連打していた僕には画期的でした。
便利にするって楽しい！
