[HTML] 画像やCSSが更新されない（キャッシュが残る）問題対策 2019.06.25 TUE

ASP.NET C# HTML CSS / Sass

先輩！画像変えたの更新されてへんって、お客さんに怒られてるんですわ。。

あー、それはキャッシュでしょうねー

へ？？。。キャッシュてなんですの？

はじめに

Web制作を進めるうえでクライアントとのやり取りでほぼ必ず発生するキャッシュ問題
たとえば画像を更新したのに、クライアントの環境では画像が古いまま。
CSSでレイアウトを変えたのに、クライアント側では表示が崩れている。※これは大問題ですが・・

それらはすべてキャッシュが問題

キャッシュとは、Webで一度見たコンテンツを閲覧環境に保存し、次回から保存したデータを表示させることで、表示速度アップとムダな通信をなくすことができる仕組みです。

ただ便利なキャッシュも場合によっては、余計なお世話、少し邪魔な存在になります。
感覚的にスマホ、タブレットはなかなか更新されない印象です。

キャッシュを削除する方法

ブラウザのキャッシュを消す（設定画面より）

キャッシュはブラウザのキャッシュフォルダーに保存されます。設定画面より、キャッシュを削除できます。

Chrome
IE

ブラウザのキャッシュを消す（スーパーリロード）

Chrome,IE,Mozilla Firefoxであれば、キャッシュを消したいページで「Ctrl+F5」(MacはCommand＋R)キーを押すことでキャッシュを無視しサーバーから読み込みます。
ただ、Webは不特定多数の方が見ますので、みなさんに「スーパーリロードをしてください。」なんてお願いはできません。
HTML上で対策する必要があります。

クエリ文字列（URLパラメーター）による対策 Cache Busting

?version=1のような形をクエリ文字列といいます。
パラメーターを付与することでキャッシュ対策ができます。

通常imgであれば下記のように記載します。

<img src="/img/sample.jpg" alt="sample">

対策するには、クエリ文字列（sample.jpg?20190625 のような？以降の文字列）を付与します。
すると、ブラウザはキャッシュを読まずにサーバーのファイルを見に行きます。

クエリ文字列を変化させると、ブラウザは新しいファイルと認識し、改めて取得します。

<img src="/img/sample.jpg?20190625" alt="sample">

?以降は任意の文字で問題ありません。

静的なHTMLの場合、この方法になります。しかし毎回書き換えるのはとても面倒です。

動的なコンテンツ。たとえばPHP、ASP.NET等であれば、下記のように自動化できます。

ファイルの更新日時を取得する

方法として、私はファイルの更新日時を読み込み、パラメーターに当て込むやり方をしています。
ベストな方法かわかりませんが・・

雑ですが、ASP.NET C# Razorだとこんな感じでしょうか。
GetLastWriteTimeで最後に書き込んだ日付と時刻を取得します。

<link rel="stylesheet" type="text/css" href="style.css?@File.GetLastWriteTime(Server.MapPath("style.css")).ToString("yyyyMMddHHmmss")">

私はPHPのことをあまり知りませんが、簡単そうであります。

<link rel="stylesheet" type="text/css" href="style.css?<?php echo filemtime('style.css') ?>">