外部ファイルのCache(キャッシュ)問題を Ant で解決する

2018年7月20日Java, 開発

おはようございます。

唐突ですが、
WEBシステムでよく問題になるキャッシュをどうにかするため
Antを使って小細工をしてみました。

基本的に Java の WEBシステムを想定しています。

スポンサーリンク

Cache(キャッシュ)とは

ここでいうキャッシュとは、
ブラウザにキャッシュされる一時的なデータを指しています。
(他にPCのキャッシュメモリーを指すこともある)

どちらも基本的に目的?動作は同じで、処理の速度を高速化させることができます。
ブラウザキャッシュであれば、
毎回インターネット上のWEBサーバーからデータ(HTMLなど)を
ダウンロードして表示するのではなく、同じ内容であればキャッシュを利用することで
ページの表示を高速化しています。

デメリットをあげるとするならば
このキャッシュ問題ってことになるかと思います。

キャッシュ問題

WEBシステムで
CSSやJavascript を更新して本番WEBサーバにデプロイした際に
顧客が利用するブラウザに、CSSやJavascriptがキャッシュされてしまい
うまく最新の状態になってくれない、最悪の場合は Javascript でエラーが発生してしまって
動作しなくなるなんてことが起こります。

この場合、ブラウザの機能で強制リロードという操作をすると簡単に解決できるのですが、
これを知らないユーザが多いため、
WEBシステムの利用者からはどうにかしろと言われることが多いです。
もうほとんど間違いなく言われますよね。文句を。

対応

対応についてはおそらく次の方法が一般的なのかと思う。

  1. HTMLに制御文を仕込む
    HTML(メタタグ)で制御、そもそもデータをキャッシュさせないって方法がある。
    ただし、そもそもキャッシュ機能はページ読込の速度を早くする目的があるため
    あんまりよろしくない。と個人的には思う。
  2. WEBサーバ側で制御
    1番と似ているが、WEBサーバ側でクライアントにレスポンスを返す際に
    HTMLヘッダーという情報に、キャッシュさせないでねって情報を含めることで
    ブラウザを制御する。
    これも1番同様あんまりよろしくない。
  3. 外部ファイルの読み込みに細工する
    クエリパラメータというものを用い、外部ファイルを読み込む際に細工をする。
    変更したCSSや Javascript を読み込むページで、
    読込の記述にクエリパラメータを付加することでキャッシュされたデータとは
    違うものですよってブラウザに認識させる方法。
    この方法であれば、他のキャッシュデータについてはそのままキャッシュを使ってくれる。
    ただし、手動で数あるページを修正していくと必ずミス(修正漏れ)が発生する。

基本的には3番がいいと思うので、
自動でクエリパラメータを付けるバッチを組み込むことにしました。
CSSおよびJavascript を読み込んでいる箇所すべてにクエリパラメータを付与しておき、
リリースするモジュールを作成する際に Ant で文字列をタイムスタンプに置換する
というようにしておけば必ず最新の外部ファイルを読み込ませることができるはず。

クエリパラメータ

JSP

Ant

Build.properties

Build.xml

Antタスクの呼び出し

コマンドを実行すると、BUILD_DATE となっている箇所が
実行日時「yyyyMMddHHmmss」に置き換わります。

まとめ

最善の方法かはわかりませんが、
ひとまずこういった仕組みを入れておけばいちいち顧客からの
問い合わせにキャッシュクリアしてくださいって言わなくて済みますね。

ではでは。

スポンサーリンク


関連するコンテンツ

2018年7月20日Java, 開発Ant, Cache, CSS, Java, Javascript, キャッシュ, キャッシュクリア

Posted by doradora