JavaScriptメモ:javascript(.jsファイル)をキャッシュさせない

ブログパーツのようなものを何かつろうと思っているのですが、とりあえずいろんなものを見てiframeとjavascriptをどんな風に使ってるのかチェックしてます。なるべくサーバーに負荷をかけないように考えて、毎回iframeでcgiやphpを呼び出すのではなく、jsファイルに書き込んでそれを読ませる様にしようと考えていますが、問題はjsファイルはキャッシュされるので、キャッシュさせない又はjsファイルに更新があった場合のみキャッシュを更新させるような仕組みが必要と考えています。
javascriptをキャッシュさせない方法はどこかで見た気がしたので探してみた。いろいろあったけど下記のサイトの記事が判りやすかったです。元々見た記事は見つけられなかったけど、多分普段巡回しているサイトのどっかだったと思うのだけど。
具体的な方法は、ファイル名の後に?をつけてパラメータを渡す事です。
よくcgiとかでGETでパラメータを渡す方法ですが、これがcssファイルやjavascriptファイルや画像ファイルなど何にでも応用が利くわけです。

<script src=”sample.js?200802260445″ language=”javascript” type=”text/javascript”></script>

hogehoge.js?200802260445(現在の日時)
等の様にパラメータに現在の日時を渡してあげれば、常にURLがユニークであるとブラウザに認識されてキャッシュではなく新しい内容を読み込むわけです。
初めて知った時、ホーこんな方法があったのか-と思ったものです。(jsファイルに応用できるのがわかって感動した)
この手法を元々知ったのは携帯電話様のcgiプログラムを作った時でした。特に昔のツーカーのHDML機とか激しくキャッシュするので、どうにかして最新の状態を読み込ませる方法は無いものかと思ったときに探していたら、表示するだけのcgiでも日時とかパラメータ渡すとキャッシュさせないで最新の状態にさせることが出来るみたいな感じだったと思う。
http://blog.kumacchi.com/view.cgi?200802260445 ←こんな感じ
あと、画像アップロードできる系のwebアプリだと記事中の画像だけ更新する際に同じファイル名だとやっぱりキャッシュされて、更新後に古い画像が表示されるままになたリするので、「画像変えたのに変わらないんですが何でですか?」って事になるので
&ltimg src=”http://blog.kumacchi.com/img/hogehoge.jpg?200802260445>
見たいにすればいいわけですが、まったくキャッシュさせないってのも問題なので工夫が必要です。
※一番悩むのは技術的な事より、デザインというかUIというかそういう部分が一番困る。
キャッシュといえば、(ってキャッシュじゃないけど)昔のWindows(98とか95)はユーザー毎にMyDocumentsが分かれてなくてマイピクチャのパスは下記のような感じだったと思う。
C:\MyDocuments\MyPictures
で、初心者にありがちなんだけど画像を掲示板にimgタグで貼り付けるときに下記の様にローカルドライブを指定しちゃったりする人が割といたわけなんだけど、どうなるかっていうと、同じファイル名の画像を持っている場合、それぞれが持っている画像が表示されるか、ファイルが無い場合は見えなかったりするわけですね。それぞれのパソコンの中のMyPicturesを見に行くわけですからw。
<img src=”C:\MyDocuments\MyPictures\xxx.gif”>
で、
B「みんなーうちのワンちゃんみてー」
A「こんなエロイ画像貼り付けちゃまずいんじゃないの!?」
B「え?うちのワンちゃんの画像を貼り付けたんだけど?」
C「うちではXマークで表示されないよ?」
A「ハッキングかなんかされたんじゃないのかな?」(多分、「俺が持ってる画像がなんで掲示板にアップされてるんだ(滝汗)」と思ってる?)
一同:なんでかなー?
通りすがりの俺:(AがMyPicturesにエロ画像溜め込んでいるの確定wwww)
見たいな掲示板を見かけることがあったのだが、今はないだろうなーw。
参考サイト:
●Pumpkin Moonshine: JavaScriptやCSSの更新時にキャッシュから読ませない
http://yuki.silk.to/2006/04/000170.html

タグ :