EC-CUBEでCSSの変更をキャッシュさせない方法

Web制作をやっていると、以下のようなやり取りをすることってないでしょうか。

制作者「サイト変更したから確認してねー」
クライアント「変わってないよ・・・」
制作者「キャッシュが原因だからブラウザのキャッシュをクリアしてね」
クライアント「あー変わった変わった」

EC-CUBEの場合、ブラウザじゃなくてテンプレート側のキャッシュが原因の時もあるので、テンプレートのキャッシュをクリアして対応することもあります。

キャッシュ自体はサイトの表示速度を速めてくれたり、サーバーの負荷を軽減してくれるのですが、たまに邪魔をしてくるのも事実です。

上記のような無駄なやり取りが発生しないように、いちいちキャッシュをクリアしなくてもCSSの変更が反映されるようにする方法をご紹介したいと思います。

「/data/Smarty/templates/テンプレート名」の中にsite_frame.tplというファイルがあります。site_frame.tplの中に、以下のような記述があります。

<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/import.css" type="text/css" media="all" />

import.cssでは、block.cssやcontents.cssなどのテンプレートで使われているCSSファイルをインポートしています。このCSSの読み込みにパラメータを付けてあげることで、import.cssがキャッシュされなくなります。

<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/import.css?ver=<!--{$smarty.now}-->" type="text/css" media="all" />

import.cssの後ろに「?ver=<!–{$smarty.now}–>」を追加していますが、$smarty.nowはタイムスタンプが出力されるため、サイトをリロードする度に値が変わります。

パラメータの値が変わることで、同じimport.cssであっても、ブラウザからは別のファイルとして認識されます。これにより、CSSがキャッシュされなくなるというわけです。

あとがき

クライアントによっては、1度キャッシュのクリアについて説明すると、以後サイトの変更が反映されない時はご自身でキャッシュのクリアを試してくれる方もいます。ですが、大抵のクライアントがWebの知識があるわけではないので、なかなか理解してもらえないことの方が多いです。

上述した内容のように、こちらで対応できることはできる限りやってあげた方が親切ですね。