トップ «前の日記(2011-09-18) 最新 次の日記(2011-09-24)» 編集

2011-09-23 [長年日記]

_ ブラウザのリロード自動化2011秋

※ 2011秋っていうのは自分用に書いてあるだけで、決して 2011 年の本当の最新情報ではないです*1

何年も前からいろんな形でくり返し出てきてる話だけど、みんなもっと楽しようぜ。いったいオレたちは何回リロードすればいいんだい?

まとめ

ということで今回はブラウザのリロード自動化の話。どういう形でこれを実現しているのか調べてみた。

Rubyist 的には LiveReload がイチオシなんだけど、まだ開発途上な部分がアレコレあって Windows 環境にはややつらい。*2それでも Windows で動かしようのない npm 依存のものよりはマシだし、使い勝手はいいと思う。

以下の記事もあわせて読みたい。

背景

  • View や CSS、効果系の JavaScript の編集は細かい変更を目視で確認しながらくり返すことになりがち
  • 広範囲に渡る変更の場合、多くのページを開きまくる必要がある
    • 思いがけない影響が出ていないとも限らない

ダルい

ダルいのは機械に任せてしまおう。

自動化の実現方法

大きく以下の2通りに分かれる。

  1. やみくもに reload する ( 数秒おきとか )
    • どちらかというとオークション監視向け
  2. ファイルの変更を監視して 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する
ファイル監視系

監視ツールと組み合わせる系

多少手間は増えるけど速い。リソース的にも多少有利?

vogue

http://aboutcode.net/vogue/

  • node.js + npm 依存
  • 各ページに reload 用の js を噛ませる必要がある
    • user script で噛ませる方法もあるらしい
  • ブラウザを選ばない

試してない。

livereload系

LiveReloadが超気持ちいい2011 へ。個人的にはいちばんのオススメ。

nodejuice

nodejuiceがヤバい2011へ。ヒトバシラーが増えるといいな。

自分で組み合わせてなんとかする方法

頑張るのが好きな人向け。あるいは頑張った人たちの歴史。

ほか

もう一度まとめ

ブラウザの自動リロードについては何年も前から様々な工夫がなされてきている。どれを使っても自分の目的が達成できればそれでよいとも言えるが、最近は LiveReload など完成度の高いツールが出てきていて、もう少し導入が楽になれば一気にブレイクするんじゃないかと感じている。

こうしたツールは1ページしか書かないうちは、あるいはあまり HTML, CSS, JavaScript を多く書かないうちはメリットを感じないかもしれないけれど、CSS や JavaScript は予想外に影響範囲が広くなりがちなので、あるところだけをいじっているつもりがうっかり別な場所を壊していたということも十分あり得る。

最近はそういう事故を防ぐためにも上に挙げたツールで押さえておきたいページを全部自動でリロードさせるという使い方をしているが、これはなかなかよい。マシンの負荷は当然上がるが、リロードという作業は完成するまでやり続ける単純作業なので、導入に多少コストを掛けても十分お釣りがくるし、安心感がまるで違う。もちろんチェック自体を目視ではなくシステムによるテストに置き換えていくなどの工夫もできるだろうが、目視でなくては確認できない効果は目視せざるを得ない。そういう意味では完全に CI に置き換えが効くわけでもなく、エンジニアにもデザイナにも嬉しいツールだと思う。

ぜひ多くの人に使ってほしいなぁと思う。

Tags: Web

*1 一部アッチッチの開発版があるけど、技術的には新しくない。いや、新しくなきゃいけないってもんでもないけど。

*2 正解はあるのでそれに忠実にしたがっているなら苦労はない。