画面デザインの変更が反映されない(ブラウザキャッシュ問題)

スラスラわかるHTML&CSSのきほん

はじめに

WEB開発でCSSJavaScriptを修正したとき、時々画面デザインやJSの処理が変わっていないことがあります。

 

こういう場合は大体ブラウザのキャッシュをクリアすれば解決するんですが、この「ブラウザキャッシュ」が結構一筋縄ではいかなかったりします。

 

人生もブラウザも消せない過去には苦労するよ、というのが今回のお話。

 

結論

上から順に試してみる。

  • F5ボタンを押してリロード
  • ブラウザのオプションからキャッシュをクリア
  • ブラウザのキャッシュフォルダ内の全ファイルを直接削除
  • ユーザープロファイルの削除(再作成)
補足

IEコマンドラインからもキャッシュクリアできるようです。

 

 

経緯

先日、私が開発担当のWEBアプリをリリースしたんですが、ユーザーから画面のデザインが変わっていないとの問い合わせを受けました。

 

ほとんどの場合、F5ボタンを押してリロードすれば変更が反映されるんですが、たまにブラウザのキャッシュが残り続けて古い表示のまま変わらないことがあります。

 

そんな時はブラウザのオプションから明示的にキャッシュクリアすれば、古いページのキャッシュが残り続けることはありません。

各ブラウザでのキャッシュクリアのやり方は以下を参考ください。

 

が、ここで問題発生!

いくらブラウザのオプションからキャッシュクリアしても、古いページのキャッシュがなぜか消えない!

 

仕方がないので、ブラウザのキャッシュフォルダに移動し、手作業で全ファイルを削除します。

各ブラウザでのキャッシュフォルダの場所は以下の通り。

 

Chrome

C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\Cache

 

IE11(Windows 8以前)

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Temporary Internet Files

 

IE11(Windows 8.1以降)

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\INetCache

 

なお、EdgeとFirefoxはやや特殊な持ち方をしているようです。

詳しくはこちらを参考ください。

 

しかし、ここでも問題発生!

私のPCでは上手くいったんですが、一部のユーザーのPCでは手作業でファイルを削除できない!

一見削除できたように見えるが、再度キャッシュフォルダに戻ってくるとファイルが復活している!

 

どうにもならないので、OS再インストールやPC交換も検討しましたが、まずはユーザープロファイルを削除して再作成してみることに。

 

すると、無事復活!

かなりの荒技でしたが、どうにか画面デザインの変更が反映されました。めでたしめでたし。

 

まとめ

どうもセキュリティポリシー設定(フォルダ権限?)の問題で、キャッシュフォルダのファイルが削除できなくなる場合があるようです。

 

はっきりはわかりませんが、新しいセキュリティポリシーを適用した後から問題が発生するようになったと感じています。

 

なお、IE10以降でキャッシュ保持がだいぶ変わっているようです。

IE5~IE9と比較してIE10/IE11はここが違う(リンク紹介) - ぼくんちのTV 別館

 

今回最後までトラブルが続いていたのもIE11だったので、もしかするとこの辺りも関係しているのかもしれません。