編集して保存して自動再読込み。編集して保存して自動再読込み「LiveReload」 // MOONGIFT Archived

LiveReloadはサーバと機能拡張を組み合わせてファイルの編集後に自動リロードを行うソフトウェア。

LiveReloadはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア。Webサイトのデザインをしている場合に良くある光景として、テキストエディタやDreamWeaverでデザインをし、一定量終わった段階でWebブラウザを再読み込みして動作を確認するといった行動がある。

コンテクストメニュー

まとめて一気に修正した挙げ句、何かをミスしていたりするとショックを受けてしまう。小さく編集し、細かく確認しながら作業できるのがベストだ。そのために使えるのがLiveReload、Firefox/Safari/Google Chrome機能拡張と組み合わせたソフトウェアだ。

LiveReloadは特定のディレクトリを監視し続ける。そしてそのディレクトリWebブラウザで開いておく。エディタで編集し、保存を押すと自動的にリロードで行われて表示の確認が出来るという仕組みだ。機能拡張ではLiveReloadが立ち上がっているサーバのアドレスを指定する。

サーバ起動中

fileプロトコルはSafariでは使えないということなので注意してほしい。また実際にLiveReloadを有効にする際にはコンテクストメニューからEnable LiveReloadを選ぶ必要がある。ブラウザの再読み込みという手間が減るので、素早くWebサイトのデザインが行えるようになるはずだ。

[s2If current_user_can(access_s2member_level1)]

Safariの設定画面（プレミアム限定）

[/s2If]

MOONGIFTはこう見る

監視対象にはJavaScriptやCSS、HTMLの他にも各種画像フォーマット、PHP、Ruby、erbなどが入っている。とは言えサーバサイドのコーディングで自動リロードが行われてしまうのはちょっと怖いかもしれない。Webデザイン向けと考える方が良さそうだ。

デフォルトの設定ではファイルを更新した0.05秒後にリフレッシュが行われるようになっている。LiveReload自体はリフレッシュする機能しかないので、サーバは自由に選べるようになっている。マルティディスプレイのWebデザイナーは特に便利に感じそうだ。