サイト改修などで、スタイルシートを変更したり、画像を差し替えたりした際に、ブラウザキャッシュが原因で、なかなか表示が変わらず困ったことはありませんか？
クライアントに改修を依頼されて、変更分をリリースしたところ、クライアントから「変更されてません」という連絡をもらった経験のある方もいらっしゃるかと思います。
こういったトラブルを防ぐために、一般的によく使われているのが、「更新したcssや画像ファイルにクエリストリングを付ける」といった方法です。
具体的には
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
を更新したときには
<link rel="stylesheet" type="text/css" href="/css/style.css?20220930235602"/>
といった形で、拡張子に後ろに?｛好きな文字｝をつけてブラウザに別のファイルとして認識させ、新たに読込直すようにする方法です。
ただし、ファイル数が多くなったり、更新のたびに毎回クエリ文字を付けるのも結構面倒です。
そこで、CMS側で一括でまとめてクエリ文字を付けてしまおうというのがこのプラグインです。
プラグインの機能
- キャッシュを更新したいファイル（拡張子・ファイル名）の 登録機能
- クエリ文字の自動出力機能
- クエリ文字のアップデート
- 自動出力の停止
導入方法
baserマーケットから、プラグインを入手（無料）し、圧縮を解凍して、
FTPソフトなどで、/app/Plugin/ にアップロードします。
baserCMSの管理画面「プラグイン一覧」より、BrowserCacheUpdate（ブラウザキャッシュ更新プラグイン）を有効化します。
左の管理メニューの「プラグイン」のドロップダウンメニューの中に「ブラウザキャッシュ更新設定」追加されるので、それをクリックすると設定画面に遷移します。
1、 キャッシュを更新したいファイル（拡張子・ファイル名）の 登録
入力欄にキャッシュを更新したいファイルを入力します。
- 単一ファイルであれば、ファイル名を指定することも可能です。
- cssファイルすべてなど、拡張子で指定することも可能です。
- 複数指定する場合はカンマ区切りで入力します。
2、クエリ文字の自動出力機能
「保存してクエリストリングをアップデートする」ボタンをクリックすると、クリックしたときの年月日時分秒がクエリストリングとして該当ファイルに付与されるようになります。
例）
<img src="/img/test.png" alt="test"> にて表示している画像を差し替えたとき
このテスト画像を
このようにリネームして差し替えても、ブラウザが古いtest.pngをキャッシュしてしまっているため、
しばらくは元画像が表示され続けます。
クエリ文字のアップデート
画像を差し替えた際に
このように指定して、「保存してクエリストリングをアップデートする」ボタンをクリックすると
<img src="/img/test.png" alt="test"> が <img src="/img/test.png?20221001001635" alt="test">に変わります。
その結果、すぐに新しい方の画像が表示されるようになります。
「保存してクエリストリングをアップデートする」ボタンをクリックしたときの年月日時分秒を使用します。
一旦アクセスした後は、新しい画像がキャッシュされた状態 となり、再読み込み時にはキャッシュから画像が表示されるため、画像ダウンロードが原因で表示が遅くなるのは最初の１回だけになります。
（「保存してクエリストリングをアップデートする」ボタンをクリックし直すと、新たなクエリに書き換わるため、また画像の再ダウンロードが発生します。）
自動出力の停止
- プラグインを無効化する
- 管理画面入力欄の値を空にして保存することでも、クエリストリングの出力を停止させることが可能です。
まとめ
頻繁に画像の差し替えやスタイルの調整が発生するサイトなどでは、とりあえずこのプラグインを入れておいて、
改修の前後だけ有効化して使用するといった使い方が便利なプラグインです。
また、css調整などの クライアント確認 の際にもいちいち「テーマファイル」を書き直さなくて良いので重宝します。