※ 2011秋っていうのは自分用に書いてあるだけで、決して 2011 年の本当の最新情報ではないです1。
何年も前からいろんな形でくり返し出てきてる話だけど、みんなもっと楽しようぜ。いったいオレたちは何回リロードすればいいんだい？
まとめ
ということで今回はブラウザのリロード自動化の話。どういう形でこれを実現しているのか調べてみた。
Rubyist 的には LiveReload がイチオシなんだけど、まだ開発途上な部分がアレコレあって Windows 環境にはややつらい。2それでも Windows で動かしようのない npm 依存のものよりはマシだし、使い勝手はいいと思う。
以下の記事もあわせて読みたい。
背景
- View や CSS、効果系の JavaScript の編集は細かい変更を目視で確認しながらくり返すことになりがち
- 広範囲に渡る変更の場合、多くのページを開きまくる必要がある
- 思いがけない影響が出ていないとも限らない
ダルい
ダルいのは機械に任せてしまおう。
自動化の実現方法
大きく以下の2通りに分かれる。
- やみくもに reload する ( 数秒おきとか )
- どちらかというとオークション監視向け
- ファイルの変更を監視して reload させる
reload方法
- HTML の中に JavaScript を仕込んで location.reload
- OS、ブラウザを選ばないが HTML を書き換える必要がある（手で？ 自動で？）
- OS の機能などでアプリの操作を自動化 ( AppleScript or WSH or AutoHotKey … )
- ブラウザの拡張で
- MozRepl, Firebug, LiveReload, …
ファイルの変更監視方法
できるだけ OS レベルでサポートされている方法が軽いし速いが、力ずくでも監視できる。説明がこみいってしまうので詳細は割愛。
監視と通知が分離していない形態もある。
ファイルの変更通知方法
- 直接エディタやブラウザからファイルの status を取得
- XMLHTTPRequest で status を渡す
- WebSocket <- New !
ブラウザのautoreload拡張
では具体的なツールの話。
やみくもにreloadする
- Easy Auto Refresh, Auto-Reload, Auto Refresh Plus, Page Refresh (以上 Chrome)
- ReloadEvery, Tab Mix Plus :: Add-ons for Firefox (以上 Firefox)
ファイル監視系
- Auto Reload :: Add-ons for Firefox
- file scheme only だけどお手軽でイチバン効果を実感しやすいかも。
- http://localhost もルールを記述すればイケるっぽい
- XRefresh provides browser refresh automation for web developers
- XRefresh for Chrome — Gist
- -> livereload
監視ツールと組み合わせる系
多少手間は増えるけど速い。リソース的にも多少有利？
vogue
- node.js + npm 依存
- 各ページに reload 用の js を噛ませる必要がある
- user script で噛ませる方法もあるらしい
- ブラウザを選ばない
試してない。
livereload系
LiveReloadが超気持ちいい2011 へ。個人的にはいちばんのオススメ。
nodejuice
nodejuiceがヤバい2011へ。ヒトバシラーが増えるといいな。
自分で組み合わせてなんとかする方法
頑張るのが好きな人向け。あるいは頑張った人たちの歴史。
- watchr - ファイルに変更があったら何かする / もしくはオサーンについて - coリ・ー・ン＜2nd life
- MozRepl + ruby + watchr + net/telnet
- System.Exit – autotest と MozRepl でブラウザ自動リロード
- Eclipse/保存と同時にブラウザを自動リロードする方法 - TOBY SOFT wiki
- 橋本商会 » エディタ保存したらブラウザリロードするsinatra/auto-reloadを作った
- Dreamweaverで上書き保存した瞬間に、Firefoxを自動でリロードさせる、強力なコーディング高速化スクリプト | 5am! Web Illusions
- ファイル保存時にブラウザを自動的にリロードする JavaScript ライブラリを書きました | Tanablog
- 最速インターフェース研究会 :: Firefoxでの開発を高速化する自動リロードスクリプト
ほか
もう一度まとめ
ブラウザの自動リロードについては何年も前から様々な工夫がなされてきている。どれを使っても自分の目的が達成できればそれでよいとも言えるが、最近は LiveReload など完成度の高いツールが出てきていて、もう少し導入が楽になれば一気にブレイクするんじゃないかと感じている。
こうしたツールは1ページしか書かないうちは、あるいはあまり HTML, CSS, JavaScript を多く書かないうちはメリットを感じないかもしれないけれど、CSS や JavaScript は予想外に影響範囲が広くなりがちなので、あるところだけをいじっているつもりがうっかり別な場所を壊していたということも十分あり得る。
最近はそういう事故を防ぐためにも上に挙げたツールで押さえておきたいページを全部自動でリロードさせるという使い方をしているが、これはなかなかよい。マシンの負荷は当然上がるが、リロードという作業は完成するまでやり続ける単純作業なので、導入に多少コストを掛けても十分お釣りがくるし、安心感がまるで違う。もちろんチェック自体を目視ではなくシステムによるテストに置き換えていくなどの工夫もできるだろうが、目視でなくては確認できない効果は目視せざるを得ない。そういう意味では完全に CI に置き換えが効くわけでもなく、エンジニアにもデザイナにも嬉しいツールだと思う。
ぜひ多くの人に使ってほしいなぁと思う。