WatchReloadとMacFusionで、ウェブ開発でのリロードを完全に自動化する

ウェブ開発者の誰もが必ずやらなければならないことのひとつは、自分が書いたコードの動作を確認するためにブラウザのリロードボタンを押すことだ。

以前書いたこの記事では、watchmedoとapplescriptでウェブ開発者のブラウザのリロードを自動化する方法を紹介した。この方法ではローカルのファイルの保存と同時にapplescriptでブラウザをリロードしている。このやり方だと、ローカルのファイルの更新しか補足できず、開発サーバがローカルとは別の場合には使えない。

この記事では、MacFusionと拙作のWatchReloadを組み合わせることでローカルでもリモートサーバのファイルでも保存と同時に自動的にブラウザをリロードする方法を紹介する。

MacFusionの導入

MacFusionというツールは、sshでログインできるサーバのファイルをローカルにマウントしてくれる。例えファイルがリモートに有ったとしてもローカルに一旦マウントすることで、自分のローカルマシンのエディタやツールがそのまま利用できる。

導入には、公式サイトからMacFusionをインストールする。

MacFusionは、MacFuseに依存しているがMacFuseの公式は現在保守されておらずMacOSX Lionだと動かない。有志がLionでも動くように改修したものがいくつかあるのでそれを適当にインストールする。

MacFuseをインストールした後、MacFusionを起動して試しにsshで入れるサーバのファイルをマウントできたら成功。

WatchReloadの導入

拙作のWatchReloadは、ファイルの更新を補足して開いているブラウザをリロードしてくれる常駐型のアプリケーション。

導入には、WatchReloadのページからzipファイルをダウンロードして適当な場所に解凍する。WatcgReloadを起動すると、右上のステータスバーにWatchReloadのアイコンが現れる。

Start Watching... を選択すると監視するディレクトリを選択するダイアログが出るのでMacFusionでマウントしたディレクトリの親を選択。

chromeを立ちあげて、マウント先のファイルを編集してブラウザが更新されたら成功。operaやsafariも利用できるので、複数ブラウザでのリロードも簡単。

ファイルを保存するだけ自動的にブラウザがリロードされるので、動作確認のために自分の手でいちいちリロードボタンを押す手間が省ける。また、WatchReloadのみだとローカルのファイルしか監視できなかったが、MacFusionと組み合わせることで、リモートのファイルの更新も補足できるようになる。サーバサイドのスクリプトを書く際にも利用できることになる。さらに、一つのブラウザでのみ利用するだけでも便利だが、複数のブラウザで動作確認するときには、更に威力を発揮してくれる。

終わりに

ブラウザのリロードを自動化することでウェブ開発者のストロークや手間を大幅に減らすことができる。この記事ではMacFusionとWatchRelaodを利用してそれを完全に自動化する方法を紹介した。