CSS/Javascriptをキャッシュから読み込ませない[常に最新版を読み込む]

Webサイトを運営中にデザイン変更などで「CSS」や「Javascript」(JS)のファイルを変更すると、ブラウザが最新のファイルを読み込まないでキャッシュにある古いファイルを使用する場合があります。今回はそのような事を回避する方法をご紹介します。

ブラウザが古いキャッシュを読み込むと？

ブラウザがキャッシュにある運営者が意図しない古いCSSやJavascriptを読み込むと、デザインが崩れたり、Javascriptの場合はセキュリティホールになる事も考えられます。

常に最新版のファイルを読み込ませる

前述の問題点を回避するにはブラウザに「常に最新版」のファイルを読み込ませる必要があります。

単純にHTMLの中にCSSやJavascriptを全て書き込む方法もありますが、別ファイルで定義している場合は、次のようにすれば常に最新版を読み込むようになります。

<link rel="stylesheet" href="common.css?20150816220322" type="text/css" />

「common.css?20150816220322」の「?」の後ろにはそのファイルの更新日時を記述しています。CSS/JSに「?」などのGETデータを付加しても問題ありません。ブラウザは通常と同じように「common.css」のファイルを読み込みます。

PHP側でファイルの更新日時を付加するには次のようにします。

function CSS(){
  
  // CSSの更新日時を取得する
  $css_filetime   = date('YmdHis', filemtime("common.css"));
  
  // 戻り値
  return '<link rel="stylesheet" href="common.css?'. $css_filetime  .'" type="text/css" />';
}

更新日時が嫌な方は、連番やランダムな英数字などにすると良いです。

• Twitter
• Facebook
• はてブ

• Pocket
• LINE

関連記事

この記事を書いた人

	💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte