« Stay hungry, stay foolish. | Home | 楽しい9連休にするために »
2006年4月25日
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ
プログラマ「プログラムを更新しました」
テスター「いきなりエラーがでますよ！動作確認したんですか！」
プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」
テスター「キャッシュをクリアしたらエラーがでなくなりました」
テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」
今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。
先人達は偉大すぎます。
<link href="common.css" rel="stylesheet" type="text/css">
この記述だとサーバ側の「common.css」を更新しても、
クライアント側のキャッシュの「common.css」が使用されて、
サーバ側の変更が反映されない可能性があります。
これをcssやjsにクエリー文字列を付加することで、
「common.css」ではなく、「common.css?20060425」でキャッシュさせます。
<link href="common.css?20060425" rel="stylesheet" type="text/css">
<script src="common.js?20060425" language="javascript" type="text/javascript"></script>
cssやjsを更新した際はクエリ文字列を変更します（20060425→20060426）
<link href="common.css?20060426" rel="stylesheet" type="text/css">
<script src="common.js?20060426" language="javascript" type="text/javascript"></script>
「common.css?20060425」はキャッシュされていますが、
「common.css?20060426」はキャッシュされていないので、
キャッシュは使用されず、サーバ側の「common.css」が実行されます。
クエリ文字列の内容は特に処理に影響は与えないので、
何を付加してもかまいませんが、日付やバージョンをつけるのが
管理しやすいです。
そんな方法があるんだー
現実の話で困ってました
ぶっちゃけ、別名CSSファイル作ってましたよorz
さっそく試してみます
お役に立てたならなによりです。
間違いやアドバイスがあればフォローをお願いしますね。
HTMLで以下のように記述していました。
'＜meta http-equiv="pragma" content="non-cache"＞
javaでのキャッシュ制御と、HTMLでの制御と違いはないものなのでしょうか？
どちらの方がメリットとかあるのか分れば教えていただけませんか？
＞noriさん
■クエリ文字列による制御（このエントリの方法）
・キャッシュがほぼ抑止できる（抑止できない条件があるかもしれないが私は知らない）
■metaタグによる制御（noriさんが記載されている方法）
・条件によってキャッシュを抑止できない
と理解しております。
ちなみにmetaタグのスペルを間違われています。
＜参考＞
http://www.tagindex.com/html_tag/page/meta_06.html
なつかしいエントリだ。2年前かぁ…。
この2年はなかなか濃ゆい2年だったわ。
metaタグだと、proxyがあると抑止できないと思います。
当時の開発環境もproxyがあってmetaタグではダメでした。
クエリ文字列だと大丈夫でしたね。
このときのシステム、今はどうなってるんだろ(；´∀｀)
なるほど、ありがとうー
これでわざわざF5で更新してもらう必要がないです。
これは流行る！
これで更新したCSSのファイルの更新日とかもってこれればなあ。。。