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

関連記事