Webサイトを開発させる上で、キャッシュのせいでcssやJavascriptがうまく反映されないと言う事はよくある話。
私が作っているサイトでも、サイトのレスポンス向上のためにキャッシュを利用しているが、
修正がうまく反映されず、「あれ？」と思う事がしばしば。
特に、開発環境では頻繁にファイルを更新するため、.htaccessでキャッシュを抑止しているけれど、
本番環境と開発環境で異なるファイルを管理するのも若干ストレスだったりする。
そんな訳で、回避策を検討してみた。
条件としてはこちら。
- サイトはphpで開発している
- 対象はcssファイル、js（javascript）ファイル
- レスポンス向上のため、キャッシュは利用する
- ファイルを修正した際、ユーザにキャッシュクリアをさせなくても、修正した内容は確実に反映される
- 対象ファイル（この場合css、jsファイル）以外の修正は行わない
では、実際の対応。
キャッシュを利用する
キャッシュを利用するやり方は以前、こちらのページで紹介したので割愛。
修正した内容を確実に反映させる
こう言うとき、定番のやり方は修正するたびにファイル名を変更したり、パラメータを付加したりする。
こんな感じ。
[code lang=”html”]
<link href="css/default.css?date=20131012" rel="stylesheet">
[/code]
上記の例ではcssファイルの後ろにパラメータで日付を付加している。
cssファイルを修正した場合は、この日付を変更することでキャッシュを使えなくしている。
ただ、これだとhtml側を修正する必要があるし、何より頻繁に修正する開発環境ではかなりメンドい。
また、html側の修正を忘れると言う凡ミスも誘発する。
対象ファイル以外の修正は行わない
と、いうわけで対象ファイルの変更日付を自動的に取得してしまう仕掛けをphpで作成する。
[code lang=”php” line=”1″]
// スクリプトの更新日付を返す
function echo_filedate($filename) {
if (file_exists($filename)) {
echo date(‘YmdHis’, filemtime($filename));
} else {
echo ‘file not found’;
}
}
[/code]
で、読み込み側のhtml(php)ファイルをこうしておく。
[code lang=”html”]
<link href="css/default.css?date=<?php echo_filedate("css/default.css"); ?>" rel="stylesheet">
[/code]
こうしておけば、ファイルの日付が変わると自動的にパラメータが変わり、
確実に変更が反映されるようになる。
こんな感じ。
[code lang=”html”]
<link href="css/default.css?date=20131012190303" rel="stylesheet">
[/code]
これでストレスなく開発に専念できる。
ただ、もうほとんど開発は終盤だけど。
横着しないで、最初にやっときゃよかった・・・。
コメント