Jan 20, 2006

Firefoxでの開発を高速化する自動リロードスクリプト

以前にも書いたとおり萌ディタとSleipnirAPIを駆使して、htmlその他ソースファイルをいじると保存のタイミングに合わせてSleipnirのアクティブタブがリロードされるようになっているわけなのですが、近頃Firefox1.5をメインに使うようになってしまったのでFirefoxでも上手く動くようにしようという話。

もちろん自動リロード機能を提供する拡張があるのは知ってるんだけど、編集のタイミングと関係なく1秒ごとにリロードさせたらせわしなくて仕方ない。あくまで保存のタイミングに合わせてブラウザを更新したい。

最初は萌ディタからFirefoxにコマンドラインでブックマークレットを渡すというのをやってみたのだけれど、どうにも手元の環境では上手く動かない。新しいタブでブックマークレットを開いてしまったりする。WSHでFirefoxにフォーカスを合わせてF5を送るとかもやってみたんだけど萌ディタにフォーカスを戻す方法がわからない。

そんなわけなのでエディタに依存せず、完全にブラウザの側で何とかすることにした。
XMLHttpRequestで自分自身を取得してファイルの内容に変更があったら表示を更新するようにする。
// 今開いてるページに変更があったらリロード
setInterval(function(){
    var self = arguments.callee;
    var req = new XMLHttpRequest;
    req.open("GET",location.href,true);
    req.onload = function(){
        (self.old && req.responseText != self.old) && location.reload(true);
        self.old = req.responseText;
    };
    req.send(null);
},1000);

これだと、自分自身のファイルしか見ていないので外部CSSなんかを変更したときにリロードされない。そこで（全部見張るようにしても良いんだろうけど）トリガーとなるファイルを手動で指定できるブックマークレットにしてみた。スタイルシートをいじっているときはstyle.cssなど指定すればスタイルシートの更新に合わせてページが再描画される。

このページで起動されると困るのでローカルファイル専用。
ブックマークレット ： AutoReload

で、いちいち実行するのが面倒くさいのでGreasemonkeyスクリプトにしてみた。
ローカルファイルの場合、ファイルの更新を検知して自動で再表示するようになる。
http://la.ma.la/misc/userjs/AutoReload.user.js

User Script Commands から更新を検出するファイルとタイマーの周期を設定できるようにした。デフォルトは今見ているファイルと1000ミリ秒。

後は萌ディタで保存するたびに
perl -e "open(FH,'>c:/lastmod');print FH time;"

こんなワンライナーが走るようにしておいた。Greasemonkeyの側では「file:///c:/lastmod」を見張らせる。サーバー上で開発する場合はlocalhost/lastmodなんかに適宜変えるようにすれば良いだろう。

----
ちなみに。

GM_xmlhttpRequestは他ドメインは読めるがローカルファイルは読めない。ローカルファイルからでも読めない。Greasemonkey0.6.4ではXMLHttpRequestが使えなくなっているため、代わりにunsafeWindow.XMLHttpRequestを使った。この場合、同一ドメイン、及び、ローカルファイルからローカルファイルへのアクセスができる。
Posted at 12:42 | WriteBacks (9) | Edit
Edit this entry...

wikieditish message: Ready to edit this entry.
















A quick preview will be rendered here when you click "Preview" button.