キャッシュクリアでサイトの修正を反映させる方法(OS/ブラウザ別)


キャッシュクリアでサイトの修正を反映させる方法(OS/ブラウザ別)

こんにちは。ディレクターのエリカです。

サイトの動作確認中、修正がすぐに反映されないことってありませんか?
その原因は主にブラウザ(Internet Explorer, Safari, Google Chrome, Firefox, Opera など)のキャッシュのトラブルだったりします。

キャッシュとは?

使用頻度の高いデータを一時的に保存しておくことで、2度目以降の表示を速くする仕組みです。
修正前の情報がキャッシュされていると、修正したはずなのに見た目が最新状態にならない……という現象が起こりえます。

ウェブ関係でよくあるのは、ブラウザのキャッシュと、システムのキャッシュです。
システムのキャッシュはエンジニア以外に触りようが無いので、ここではブラウザのキャッシュをコントロールする方法をご説明します。

キャッシュをクリアして強制再読み込み(スーパーリロード)!

ブラウザが保存していたキャッシュを無視して、すべてのデータを再読み込みさせることで、最新状態を正確に確認することが出来ます。
この命令のことを「強制再読み込み」「スーパーリロード」「フルリロード」「キャッシュクリア」等と呼びます。

※ウェブに詳しい人でも、この呼び名は意外に知られていないと思います。
よかったらこれを機に覚えてみてくださいね。

スーパーリロードの方法はブラウザによって異なるため、下記の一覧からご確認ください。

Windowsの場合

Internet Explorer

Ctrlを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー

Google Chrome

Ctrlを押しながら更新ボタンをクリック
Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー

Firefox

Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
CtrlShiftを押しながらR キー

Safari

Shiftを押しながら更新ボタンをクリック
CtrlShiftを押しながらR キー
Ctrlを押しながらR キー

Opera

Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー

Macの場合

Safari

Shiftを押しながら更新ボタンをクリック
⌘ Commandを押しながらR キー

Google Chrome

⌘ Commandを押しながらR キー

Firefox

⌘ CommandShiftを押しながらR キー

Opera

⌘ Commandを押しながらR キー

技術的な解決方法

少人数での動作確認であれば、上記の方法を説明して解決できますが、もしこれが社内外に関係する大人数での動作確認であった場合どうでしょう?
数十人、数百人にスーパーリロードを説明するのはなかなか面倒ですよね。

そんな時は、システム側に「仕込み」を入れることで、ブラウザのキャッシュを無視させることも可能です。
開発規模によっては下記の方法も検討してみてください。

WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする

CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか

まとめ

とても簡単な機能ではありますが、キャッシュのトラブルが起こる度に検索するのが面倒だったので、記事にまとめてみました笑。
同じようにちょっと不便をお感じだった皆さまの参考になれば幸いです!

 

 

この記事を書いた人

エリカ
エリカ ディレクター 2012年入社
ディレクターのエリカです。趣味は美術鑑賞で、絵画や展示などたくさんの作品を眺めるのが好きです。得意料理は「鍋」です。よろしくお願いします。

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2016/01/05 17:16時点)
  • 出版日2015/08/18
  • 商品ランキング57,666位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション