2013年5月25日としかわ
html/css , コラム , ブラウザ

ページが変更されていない?

ホームページを更新してお客様にご連絡した後に、「ページが変わってないんですけど…」とお電話を頂く事がしばしばあります。
これは「キャッシュを見ている」という状態なのですが、「恐らくキャッシュを見ていると思いますので、更新してください」と案内しても、そもそもキャッシュの意味ががわからないというお客様も居て説明が難航する事もあります。

キャッシュとは

キャッシュとは、「インターネット一時ファイル」とも言われますが、その名の通り、「一時的にパソコンに保存したファイル」の事です。

「インターネットを閲覧する」という事は、利用者のパソコンがWEBサーバーから、閲覧するページの情報や画像、動画などを全てダウンロードし、自分のパソコンにダウンロードしたデータを見ている状態です。
次にまた同じページを見る場合には、「さっきダウンロードした、自分のパソコン内のデータを見ている」という事がよくあります。
それが、「ページが変わってないんですけど…」につながるんですね。

なぜキャッシュが存在するのか

なぜそんな事になっているのでしょうか。
キャッシュが無ければ更新ボタンを押さなくてもいいのに、と思いがちですが、仮に重いファイルなどをダウンロードする場合を思い浮かべてみてください。
数分かけてダウンロードしたファイルも、自分のパソコンに落とした後では、開くのにはあまり時間がかかりませんよね。
WEBサイトも同じで、毎回サーバーからダウンロードしていると閲覧に時間がかかるので、時間短縮の為に「毎回同じ(ような)データをダウンロードしない」という仕組みになっています。
これはパソコン側の便利機能なのです。

ページの更新

そこで、「切り替わっていない」と思った時には、ブラウザを「再読み込み(更新)」してみてください。
更新ボタンの場所はブラウザによって多少変わりますが、通常はアドレスバーの付近にある矢印が丸くなったようなマークです。
Windowsの場合は「F5キー」でも更新になります。
(Ctrl + F5で「キャッシュを使用せずに更新」になります)

1

大抵はこれで問題ありませんが、フレームで区切られた範囲には更新は効きません。
現在はフレームは一般的ではありませんが、たまにiframeでコンテンツを読み込むこともあると思います。
その場合には、フレームで読み込んだページを更新する必要があります。
これは多少案内がややこしいのですが、FirefoxやChromeでは右クリックをするとフレーム内の再読み込みを行うためのメニューが出るので、それを実行します。
そのようなメニューが出ないブラウザの場合は、直接フレーム内のページを開いて更新してください。

2

キャッシュを使用しない方法

お客様によっては、毎回更新ボタンを押さないといけないのは問題がある、としてキャッシュを保存しないように出来ないか、というご相談も受ける事が有ります。
ページを作成する際に「キャッシュを保存しないページ」として作成する事は可能なのですが、
そうした場合にはそのページは毎回すべてのファイルをダウンロードするので「重いサイト」になってしまいます。
ですので、通常はあまりこういった方法は取りません。
裏ワザとして、特定のファイルのみキャッシュを使わない方法をご案内します。

例えば、画像ファイルを上書きして更新した際に、<img src=”hoge.jpg”>と書くところを、<img src=”hoge.jpg?20130525″>と書いてみましょう。
ファイル名の後に「?」と、適当な文字の羅列を入れます。(今回は日付)
すると、同じファイル名でもブラウザは別ファイルだと判断して、そのファイルのみキャッシュを使わず表示します。
楽天などのシステムサイトでは、更新ボタンを押してもなかなか切り替わらない場合もあるのですが、そういった時でもこの方法ならすぐに切り替わるので便利ですよ。