弓削篤史（デザイナー／撮影／広報）
写真・動画撮影、サイトデザイン・コーディング、CMS導入やPHPを使ったWEBプログラミングに携わっています。
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
お知らせ
NEWS
【CSS】WEBサイトの更新時、CSSのキャッシュを自動で読み直す方法
2016年6月22日
／マージBLOG、WEB制作
かなり今更な話となってしまいますが・・。
WEBサイトのページの修正の際にCSSを書き換えるケースはよくあると思いますが、
その時に一番困るのが、
1）クライアント様に修正依頼を頂いて内容を修正
2）修正後、情報を仮公開してクライアント様に連絡
3）「何も変わっていない」という指摘を頂く
4）CSSのキャッシュが原因で、修正前のCSSが表示されていた
というケースですね。
一応、クライアント様に「スーパーリロード」を掛けてもらう事で解決する問題なのですが、
そもそも、スーパーリロードをしなくても自動でCSSが更新されて欲しいですよね。
方法としてはCSSファイルの指定の後ろにクエリを加える方法が一般的だと思います。
例えばこんな感じです。
ファイルを更新するたびに?201610261200の部分の数字を変更する事で、
ブラウザに新しいファイルという認識をさせて、
結果わざわざスーパーリロードしなくても、CSSを更新する事ができます。
ただこの場合、直接ファイルに上のような指定をするわけですから、
数字を変更したページのみにしか反映されないんですよね。
もし全ページに変更が及ぶようなものだった場合、
トップページは綺麗に見えてるけど、他のページは前のまま・・なんて新たな誤解を与えかねません。
正直この方法だけだと、
ちょっと面倒だなとも思うので、PHPを利用して、いくつか案を考えてみました。
案1.クエリをdate()関数でコントロールする
一番楽な方法かなと思います。
↑のような記述を、↓のような感じで加えるだけ。
これで、ファイルを更新しようがしまいが、例の場合だと1分単位でCSSを新たに読み直してくれます。
あとは、H（時間）、i（分）を消したりする事で、読み直しの期間を調節できます。
逆に基本いじる必要のないCSSに関しては、そもそもクエリを指定しなければいいので、そういう意味でも使い勝手はすごく良いのではないかと思います。
デメリットは、キャッシュの意味が無くなるという事でしょうか。
ただ現在においてCSSファイル位の容量であれば、そこまで気にする必要は無いのかなと思います。
案2.CSS更新日時をインクルードして指定する
今度はかなりアナログな方法ですが、一応手動でかつ楽にCSSのクエリを加える方法です。
「?201712221200」の数値をテキストファイルとして保存し、それをincludeで共有するという方法です。
まず、css_update.phpみたいなファイルを作成しておき、
その中には「2016-1026-1200」みたいに更新日時を記しておきます。
CSSの修正があった場合は、css_update.phpの数字を変更するのみで、CSSを新しく読み直してくれるという考えです。
CSSの記述は以下のような感じ。
上記のcm_pc.css?の先にincludeする事で、css_update.phpの中にある文章が貼り付けられ、ここの数字が変更されていればcssを再度読み直すという流れです。
全てのページに同様の記述を行っておけば、インクルードファイル1個を修正する事で、サイト全てのページに新しいCSSが反映されますね。
デメリットは、手動で修正しなければならない事でしょうか。反面キャッシュ機能は適切に機能するようになります。
他に、CSSファイルの更新日時を引っ張ってくる方法もあるかなと思いますが、
個人的にはdate()関数で変更してしまうのが一番気楽でいいような気がします。
