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 に置き換えが効くわけでもなく、エンジニアにもデザイナにも嬉しいツールだと思う。

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

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

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

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm