JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin

2006 03 16

■ JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin

<script src="/javascripts/foo.js?1142509269" type="text/javascript"></script>

や

<script src="/javascripts/bar.js?v=2.3" type="text/javascript"></script>

の記述を見るようになってきました。また CSS でも

<link href="/stylesheets/foo.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />

といった記述もちらほら見かけます。

これは JavaScript や CSS を更新しても、ブラウザキャッシュが読み込まれているため、更新された JS ファイルなどがロードされない場合への対策です。上記のような最終更新時刻やバージョンを query につけて読み込ませれば、スーパーリロードをせずともきちんと読み込まれます。

で、最終更新時刻を query につける方法であれば、JS ファイルを書き替えるだけで自動でそのタイムスタンプの query をつけることが簡単にプログラムで実現できそうですね。

というわけで Rails Plugin で helper を hack して JS や CSS の query に最終更新時刻をつけるのを実装してみました。Rails は JavaScript や CSS の読み込みは helper を使って

 <%= javascript_include_tag 'prototype' %>

と記述することが多いです。自分はほとんどのアプリケーションでこの helper を使って行っています。そこでこの helper の実装を plugin で上書きすることによって

<script src="/javascripts/prototype.js" type="text/javascript"></script>

と出力されていたのを透過的に

<script src="/javascripts/prototype.js?1142509269" type="text/javascript"></script>

に書き換えています。CSS も stylesheet_link_tag を

<link href="/stylesheets/style.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />

と query にタイムスタンプをつけて出力するようにしてあります。導入方法は簡単で、RAILS_ROOT で

./script/plugin source http://svn.rails2u.com/public/plugins/trunk
./script/plugin install add_query_mtime

で plugin をインストールすればそのアプリケーションに簡単に適用されます。これでブラウザキャッシュを更新するために手動で query を付けたりする必要が無くなりそうです。

Rails の svn head での plugin の実装の変更

svn head の Rails では ./script/plugin の挙動が変わっていてハマりました。svn レポジトリで管理している Rails アプリのためにいろいろ工夫がされていて便利になってるのですが、svn を使ってない Rails アプリでは svn コマンドは使わずに http で html をスクレイピングして plugin を取得しようとします。

確かに subversion を使わずに取得できるので便利になったといえばこの方法も便利になったのですが、apache がデフォルトで出力するレポジトリブラウザの html でないとうまくインストールが行えなくなってしまいました。自分は SVNIndexXSLT ディレクティブを使って出力する html を変えていたために正常にインストールできなくなってしまっていたわけです。

というわけでもとの素っ気ないレポジトリブラウザに戻しました、しくしく。