【キャッシュ更新を強制する】3つの手法（html）

皆さんはこういう経験はありませんか？

ニャンコ

サイトの修正が終わったので、確認お願いします！

了解です。どれどれ。。。
あれ？　直ってないですよ？

ワンコ

ニャンコ

ええええっ！　マジですか？

たとえば、サイトの修正を終わらせて上司や先方に報告をします。
ですが、「修正されていなかったですよー」などと言われたことってありませんか？

そのほとんどはブラウザに残っているキャッシュが原因です。

一度キャッシュを無効化し、新たに更新したファイルを読み込ませる方法を解説します。
これでもう二度手間になることはありません。

完全無料スクールPR

これから始めるWEB制作

初心者のための【ZeroPlus Gate】

ワンコ

「ZeroPlus Gate」は、30日間限定で完全無料で学べるプログラミングスクールです。

その名の通り、WEB制作を「0」からスタートする初心者に特化したカリキュラムを提供しています。
分かりやすい動画講座を通じて、プログラミング未経験者でもスムーズにWEB制作を学ぶことが可能です。

さらに、わからない点があれば何度でも質問し放題！独学で行き詰まってしまった方にも最適な環境が整っています。
加えて、カウンセリングを通じて、将来的なキャリア設計や学習の進め方についてもアドバイスを受けることができます。

ワンコ

私自身、このスクールを受講しましたが、正直なところ「なぜこれが無料なのか？」と驚くほど充実したカリキュラムでした。独学でWEB制作を学んでいた頃と比べ、理解度が圧倒的に向上したと実感しています。

有料スクールへの勧誘も一切なく、安心して気軽に学習を始められるのが魅力的です。

ポイント

・完全無料で利用できる（マジで無料です）
・30日間限定でWeb制作の動画講座を見放題
・専属メンターが面談で学習をサポート
・Slackで講師に何回でも質問できる
・しつこい勧誘もなし！

\ 完全無料で学んでみる /

無料受講はこちらから

ブラウザのキャッシュをクリアする方法

まずは、各ブラウザのキャッシュをクリアする方法です。

ブラウザの設定から削除

各ブラウザごとにキャッシュをクリアする方法は違いますが、ほとんどは「設定」画面などから、閲覧履歴の削除といった項目がありますので、そちらから削除できます。

ただ、毎回そのような操作をするのはめんどくさいので、次のショートカットを使いましょう。

スーパーリロードでキャッシュをクリア

スーパーリロードとは通常の更新とは違い、キャッシュを削除して再読み込みする機能です。
こちらもショートカットキーはブラウザごとに異なります。

代表的なブラウザのショートカットを記載します。

Chromeのキャッシュをクリア

shift + F5キー

Firefoxのキャッシュをクリア

ctrl + F5キー

Safariのキャッシュをクリア

shift + F5キー

パラメータを追加してキャッシュ更新を強制する

ただ上記の方法だと、上司や取引先にわざわざ

「ブラウザのキャッシュ消してから見てください！」

と言わなければなりません。

PCに詳しくない方だと「なんですか？キャッシュって」ともなりかねませんし、そもそもサイトを見に来る一般のお客さまはいちいちブラウザのキャッシュ消してからサイトを見ないですよね

なのでこちらで強制的に再読み込みさせましょう

CSSやimgにパラメータを追加する

キャッシュを無視して再読み込みさせる方法が、CSSや画像にパラメータを追加する方法です。
パラメータとは簡単に言うと、アマゾンなどのサイトURLを見てると、「?123」のように？に続いて英数字が並んでたりします。
あれは、サーバーに情報を送っているのですが簡単にいうとあれと同じです。
CSSやimgにも同じようにパラメータ渡せます。
渡すものはなんでもいいんですが、分かりやすく更新日の日付が良いでしょう。

/* cssの後ろに日付パラメータ追加 */
<link rel='stylesheet'  href='style.css?20221222' />

/* 画像も同じように */
<img src="logo.jpg?20221222">

パラメータを渡すことによって、新しいファイルと認識するため、キャッシュが残っていても再読み込みしてくれます。
もしまた別の日に修正などが入ったら日付を書き直せばまた読み直してくれます。

これで自動で再読み込みしてくれるので、「直ってないよ！」といわれることもないでしょう。

PHPを使用してキャッシュ更新を強制する

PHPを使用してキャッシュを無効化する方法です。
「PHPよく分からないよ！」という方も簡単だし、覚えると便利なので是非ご参考下さい。

phpの「date」関数でキャッシュを無効化する

パラメータを渡す方法は便利ですが、毎度パラメータを記載するのがめんどくさい！
というときは、PHPでパラメータを自動化しましょう。

phpのdate関数で現在時刻を出力させます。
これなら毎回手動で変えなくても、毎度自動で読み込んでくれますね。

date関数

指定した日付を、引数で指定したフォーマットの日付文字列として返します。
日付けが指定されていない場合、現在の時刻が使われます。

<!-- data関数に与えている（'YmdH'）は年月日時になるようフォーマットを指定しています。 -->
<link rel="stylesheet" href="style.css?<?php echo date('YmdH'); ?>" type="text/css">

これを実際にサーバーで実行すると、👇のように現在日付のパラメータが設定されます。

<link rel="stylesheet" href="style.css?2024012013" type="text/css">

phpの「filemtime」関数でキャッシュを無効化する

dateでパラメータ出力する方法だと、常にキャッシュを無効化するので、キャッシュの機能自体が全く無意味なものになります。

そこで、「filemtime」を使用します。
filemtime()関数はファイルの更新日時を取得する関数です。
ファイル更新日時をファイル名の後ろに出力することで、ファイル更新時のみキャッシュを無効化することが可能です。

filemtime(ファイルへのパス)

用方法としては、ファイル名の後ろに出力します。
注意点としては絶対パスは使用できないので相対パスで指定しましょう。

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

これを実行すると、下記のようにファイルの更新日付けがパラメータとして渡されます。

<link href="../css/style.css?1705759220" rel="stylesheet">

これで、ｃｓｓファイル更新時のみキャッシュを自動で読み直すので、今後いちいちキャッシュを更新する必要がなくなります。

以上　ブラウザのキャッシュをクリアする方法でした。
直ってないよ！って言われたときは、キャッシュくらい消して見ろ！！　とも思いますが、こちらの不備ですのでしっかり対応しましょう！