HTMLではブラウザキャッシュが影響して、変更した画像や、外部cssファイル、JavaScriptファイルの更新が反映されない場合があります。SmartPad4iやCobos4iでもテンプレートのHTMLに画像や外部cssファイル、JavaScriptファイルを読み込むとブラウザキャッシュの影響でユーザーによっては即座に反映されない場合があります。
Tipsではブラウザキャッシュを読み込まず、変更を反映させるキャッシュバスティングについて紹介します。
ブラウザキャッシュとは？
ChromeやEdge,Safariなどのブラウザには、HTMLの表示を高速化するためブラウザ側にキャッシュとしてファイルを保存しています。
ブラウザが同じファイルであると判断した場合、Webサーバー側にあるファイルを再度取得せず、キャッシュとして保存したファイルを使用して画面を表示します。
Webサーバーへのリクエスト/レスポンスが発生しない分、高速に画面を表示することが可能です。
ブラウザキャッシュによる影響(最新リソースが読み込まれない)
<link rel="stylesheet" href="/smartpad4i/html/SP4IHOME/css/style.css" type="text/css">例えば、HTML内に外部読み込みでCSSが読み込まれるよう記述している場合、外部リソースのstyle.cssを編集して画面の色やレイアウトを変更しても、ブラウザキャッシュが使用されて編集前の色やレイアウトを適用する可能性があります。
例えば、最新のCSSの設定で画面のタイトルバーの色を赤にした場合でも、ブラウザキャッシュから以前のCSSが読み込まれてタイトルバーの色が変更されないということが発生します。
キャッシュバスティング
キャッシュバスティングとは、ブラウザやプロキシが保持している古いキャッシュを強制的に無効化し、常に最新のファイルを読み込ませる仕組みのことです。
<link rel="stylesheet" href="/smartpad4i/html/SP4IHOME/css/style.css" type="text/css">例えば、URLの後ろにパラメータを設定してキャッシュを読み込まれないようにします。
<link rel="stylesheet" href="/smartpad4i/html/SP4IHOME/css/style.css?v=20250909"
type="text/css"><link rel="stylesheet" href="/smartpad4i/html/SP4IHOME/css/style.css?v=1757395177317"
type="text/css">パラメータの値には固有値を設定してください。
パラメータの値には 日付や、タイムスタンプなどがよく用いられます。
ブラウザは、style.cssとstyle.css?v=20250909を異なるファイルと認識するため、style.css?v=20250909を新たにブラウザキャッシュに取り込みます。
さらに、次回同じstyle.css?v=20250909のファイルを読み込む際には、ブラウザキャッシュからstyle.css?v=20250909が読み込まれるため、毎回キャッシュが読み込まれない状態になることはありません。
SmartPad4i(Cobos4i)では、テンプレートのHTMLを元に動的にHTMLが作成されてブラウザに返却されます。そのためテンプレートのHTML自体がキャッシュされることはありません。
テンプレートのHTMLが読み込む外部リソースに、パラメータを設定することでキャッシュバスティングが可能です。
置換ツール等で一括置換できるように管理しておけば、更新のタイミングで一括更新できます。
おわりに
外部CSSやJavaScript , 画像ファイルが変更されない等、ブラウザキャッシュにより更新が行われない場合には、キャッシュバスティングを使用して最新のファイルを読み込むように設定ください。