結構前に開発する際のブラウザのリロードを自動化する仕組みを導入しました。
いろんな方法があるのですが、やっと一つの方法に落ち着いたので、この方法でいこうかなと思います。
目次
LiveReroadとは
ファイル(ディレクトリ)を指定して、そのディレクトリの中身に変更があった場合に、ブラウザをリロードしてくれるというものです。開発者なら「command」+「R」を手動で押してブラウザを更新することになると思うのですが、それをしなくてよくなると非常に楽です。
実行の流れは以下の通りです。
・ディレクトリを指定してLiveReroadを実行する
・ブラウザ側でLiveReroadを認識させる
ディレクトリを指定してLiveReroadを実行する
アプリを利用して実行
node(npm)を利用してCUIから実行
の2つの方法があります。なので、CUIが苦手な人でもわりと簡単に実行できます。ちなみにWindows、Macどちらでもいけます。
アプリで実行する場合
App Storeからダウンロードできます。残念ながら有料です。
アプリの場合は、立ち上げて、フォルダごとドラッグ＆ドロップすればOKみたいです。
コマンドラインから実行する場合
「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からダウンロードできます。
インストールすると、chormeの右上に
のようなアイコンが表示されます。
これをクリックすると、
になり、実行されます。
真ん中の◯が黒く染まっただけなので、わかりにくいかもですが…。
仕組みとしては、プラグインが動的に上記のjavascriptコードを埋め込んでくれるものです。
ブラウザがchromeに限定されるのがネックですが、メインブラウザがchromeの人にとっては便利です。
コマンドラインから上記のliveReloadXを実行している状態で、ソースコードを編集すると自動でブラウザが更新されます。
複雑そうにみえますが、やっていることはすごく単純です。
・ディレクトリを指定してコマンドを実行する
・chromeプラグインを実行 or javascriptコードを埋め込む
ぜひぜひ、導入してみて下さい。
プログラミングを効率よく学習するならTECH CAMPがオススメ↓
