キャッシュの影響でjs・css・swfの変更が反映されないとき

WEB
  1. ブラウザキャッシュはなかなか消えない
  2. step1. Cache Bustingを使ってファイルにパラメータを付与する
  3. step2. 付与するパラメータの運用方法を考える
    1. 1. css、js、swfを変更した際は同時に読み込みファイルのパラメータを変更する
    2. 2. 定数を設定しておいて一括変更できるようにする
    3. 3. jsで動的に現在日付を?以下に付与するようにする
    4. 4. jsで動的にランダムな文字列を?以下に付与するようにする
  4. サイトの特性に合わせてCache Bustingのパラメータを決めてください

ブラウザキャッシュはなかなか消えない

ローカル環境ではうまくいっていたのに、本番環境になるとなぜか変更が反映されない。ブラウザのキャッシュを削除するとうまくいった。

なーんだキャッシュかぁ

で済めばいいですけど、サイトリニューアルしたのでブラウザのキャッシュを削除(または強制リロード)してからご覧くださいとは言えないですよね。

jsファイル、cssファイル、swfファイル(Flash)などをすぐに反映させる方法をご紹介します。

step1. Cache Bustingを使ってファイルにパラメータを付与する

CSS
<link rel="stylesheet" type="text/css" href="hoge.css?001">
js/jQuery
<script type="text/javascript" src="hoge.js?001" defer></script>
Flash
<param name="movie" value="hoge.swf?001" />

?以降はクエリー文字列といって意味のないパラメータになります。

これを付与しておくと「知らないファイルだ」とブラウザが判断して新たにファイルを取得しに行ってくれます。この技法のことを「Cache Busting」と言うそうです。

ただ既に「hoge.js?001」をキャッシュしているブラウザで「hoge.js?001」を閲覧してもキャッシュは効いたままになります。「hoge.js?002」といった別の文字列に変更しない限り修正は反映されません。

step2. 付与するパラメータの運用方法を考える

続いてこのパラメータの運用方法について考えて行きたいと思います。Cache Bustingで使用する?以降の文字列自体には何の意味もないため、好きな文字を指定することができます。ただ先ほども書いた通り修正時には別の文字列に変わっていないと修正は反映されません。

パラメータの付与方法には下記の方法が考えられます。

  • css、js、swfを変更した際は同時に読み込みファイルのパラメータを変更する
  • 定数を設定しておいて一括変更できるようにする
  • jsで動的に現在日付を?以下に付与するようにする
  • jsで動的にランダムな文字列を?以下に付与するようにする

それぞれの方法にメリットとデメリットがあるのでご紹介します。

1. css、js、swfを変更した際は同時に読み込みファイルのパラメータを変更する

いわゆる「運用でカバー」する方法になります。

  • ファイル修正の可能性がほとんどなく、たまにしか変更しない場合
  • 対応ファイル数が少なくすぐに修正可能な場合
  • サイトの更新者が少なく周知の必要がない場合

上記のケースの場合は直接パラメータを変更する方法でも支障は少ないでしょう。

ただファイルの更新が頻回だとやり忘れる場合もあるし、修正ファイル数が多いとやり忘れる箇所が出てくるかもしれません。また、担当者が多いと情報が行き届かずに修正されない場合もあるので、その場合は次の項目以降の方法にしましょう。

2. 定数を設定しておいて一括変更できるようにする

サイトのバージョン番号などを定数化しておき、その定数をパラメータに付与する方法です。

修正は機能追加などのタイミングで入ることが多い場合などに便利です。

定数を変更するという運用は入りますが、js、css、swfファイルすべてに定数で付与できるので、1でやったようにあちこちのファイルを修正する必要はなくなります。

3. jsで動的に現在日付を?以下に付与するようにする

jsを使用して現在の日付などを?以下に付与する方法です。

毎月1日に決まってサイトのFlashを変更する場合は年月を取って「hoge.swf?201811」とするなど、状況に応じた方法も出来ます。

ただこの場合下記の場合に注意する必要があります。

11月1日

  1.  0:05 Aさんサイトアクセス
  2.  9:30 hoge.swfファイルを11月の内容に変更
  3.  9:35 Bさんサイトアクセス
  4.  9:40 Aさんサイトアクセス

上記のケースの場合、Bさんは修正内容が反映されていますが、Aさんには修正が反映されていないことになります。0時ピッタリに修正が反映されない場合はこの運用では難しくなってきます。

TOPページの季節のFlashで、年月日を取って「hoge.swf?20181101」とパラメータを付与し最大1日くらいは前のFlashが反映されていてもOKという判断に出来るのであればこのケースがベストかもしれません。画面が崩れたり動作に影響がでてくるファイルの場合には向いていません。

4. jsで動的にランダムな文字列を?以下に付与するようにする

jsでランダム関数を使用してランダムな文字列を付与する方法です。

初回読み込み時に「hoge.swf?Qw34eRT」と表示されていてもリロードすると今度は「hoge.swf?a98AWED」となっているなど完全に毎回強制で再読み込みする方法です。

ファイルの変更が頻回にある場合など、運用上キャッシュを全く意識しなくていい反面、キャッシュが一切効いていない状態なのでアクセス数によってはサイトの負荷が高くなってきます。

サイトの特性に合わせてCache Bustingのパラメータを決めてください

上記の通り、Cache Bustingのパラメータの付与方法と言っても色々とあります。

ちなみに私はキャッシュされて困ってしまう…という案件に何回か遭遇しましたが、すべて1の方法で対応することになっていました。

やり忘れさえなければ意のままに変更を反映でき、パラメータ付与するためのjsにバグが…といった可能性もないので結局こちらの方法が選択されていました。

デメリットに関しては社内wikiのリリース手順に記載をしておくなど修正漏れ対策をしてカバーしていました。

コメント

ホーム
トップ