ブラウザのリロードを自動化するLiveReloadの導入方法

img_livereload

結構前に開発する際のブラウザのリロードを自動化する仕組みを導入しました。
いろんな方法があるのですが、やっと一つの方法に落ち着いたので、この方法でいこうかなと思います。

【スポンサーリンク】

LiveReroadとは

ファイル(ディレクトリ)を指定して、そのディレクトリの中身に変更があった場合に、ブラウザをリロードしてくれるというものです。開発者なら「command」+「R」を手動で押してブラウザを更新することになると思うのですが、それをしなくてよくなると非常に楽です。

実行の流れは以下の通りです。

・ディレクトリを指定してLiveReroadを実行する
・ブラウザ側でLiveReroadを認識させる

ディレクトリを指定してLiveReroadを実行する

アプリを利用して実行
node(npm)を利用してCUIから実行

の2つの方法があります。なので、CUIが苦手な人でもわりと簡単に実行できます。ちなみにWindows、Macどちらでもいけます。

アプリで実行する場合

App Storeからダウンロードできます。残念ながら有料です。
アプリの場合は、立ち上げて、フォルダごとドラッグ&ドロップすればOKみたいです。

Andrey Tarantsov
Andrey Tarantsov
LiveReload

コマンドラインから実行する場合

「LiveReloadX」というnitoyonさんが作成したものがあります。
僕はこちらを使ってます。

ちなみに、本記事は環境はMacで書いています。
Windowsでもできると思いますが、コマンドの方法がわからないので、ソフトウェアでやったほうが無難な気がします。

Node.jsをインストールする

まずはNode.jsをインストールします。
アクセスしたら、「install」というボタンがあるので、指示にしたがってポチポチします。
nodejs.org

コマンドラインからliveReloadXをインストールする

ターミナルを立ち上げて、以下コマンドを入力します。

npm install -g livereloadx

あとは、指定したディレクトリを決めて、以下コマンドを入力するだけです。

livereloadx path/to/dir

「path/to/dir」の部分に、自分の対象としたいディレクトリを入れて下さい。
例えば対象にするディレクトリが、「/Hoge/Fuga/Piyo」なら、以下のようなコマンドになります。

livereloadx /Hoge/Fuga/Piyo

成功すると、ターミナル上に以下のようなメッセージが表示されます。

2014-05-05 10:11:35 - info:  Config:
2014-05-05 10:11:35 - info:    - mode:   default
2014-05-05 10:11:35 - info:    - port:   35729
2014-05-05 10:11:35 - info:    - filter:
2014-05-05 10:11:35 - info:      1: exclude ".{git,svn}/"
2014-05-05 10:11:35 - info:      2: include "*/"
2014-05-05 10:11:35 - info:      3: include "*.{html,shtml,tmpl,xml,css,js,json,jpeg,jpg,gif,png,ico,cgi,php,py,pl,pm,rb}"
2014-05-05 10:11:35 - info:      4: exclude "*"
2014-05-05 10:11:35 - info:  Waiting on port 35729...
2014-05-05 10:11:35 - info:  Watching "指定したディレクトリ"...
2014-05-05 10:11:35 - info:  127.0.0.1 - new connection to websocket server

これで、ディレクトリの監視は完了です。

ブラウザ側でLiveReroadを認識させる

上記の処理を行っただけでは、ブラウザ側がLiveReroadの処理を認識していないので、自動でリロードしてくれません。
そこで、ブラウザ側にファイルの変更を伝える必要があります。

方法はいろいろあるのですが、簡単にできる方法として、2つあります。

・ソースにjavascriptのコードを記述する
・chromeのプラグインを利用する

ソースにjavascriptのコードを記述する

まずソースにjavascriptのコードを埋め込んで認識させる方法です。
埋め込むコードは下記です。

<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +':35729/livereload.js?snipver=2"></' + 'script>')
</script>

コードの意味としては、livereload.jsを動的に埋め込み、先ほど実行したlivereloadXがこのjsを読み込んで更新を通知してくれるものです。
ページの量が少ない場合ならこの方法でいいと思います。

chromeのプラグインを利用する

上記の方法でもいいのですが、ソースにデバックコードを埋め込みたくない場合やソースのテンプレート部分を編集できない場合もあります。

その場合chromeのプラグインを利用することで対応できます。
Chrome Web Storeからダウンロードできます。

LiveReload Chrome プラグイン

インストールすると、chormeの右上にlivereload_offのようなアイコンが表示されます。
これをクリックすると、livereload_onになり、実行されます。
真ん中の◯が黒く染まっただけなので、わかりにくいかもですが…。

仕組みとしては、プラグインが動的に上記のjavascriptコードを埋め込んでくれるものです。
ブラウザがchromeに限定されるのがネックですが、メインブラウザがchromeの人にとっては便利です。

コマンドラインから上記のliveReloadXを実行している状態で、ソースコードを編集すると自動でブラウザが更新されます。

複雑そうにみえますが、やっていることはすごく単純です。

・ディレクトリを指定してコマンドを実行する
・chromeプラグインを実行 or javascriptコードを埋め込む

ぜひぜひ、導入してみて下さい。

プログラミングを効率よく学習するならTECH CAMPがオススメ↓


この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!