LiveReload - Intelligent Technology's Technical Blog

こんにちは。櫻です。

今回はLiveReloadというツール（と仕組み）の紹介です。

f:id:IntelligentTechnology:20131120161425p:plain

LiveReloadが何かというと

LiveReload 2 proudly presents…
The Web Developer Wonderland
(a happy land where browsers don't need a Refresh button)

という物です。
要するに、HTML、JavaScrip、CSS、画像等のファイルを更新するとブラウザが自動で内容を更新してくれるツールです。
エディタでファイルを保存するだけでブラウザの表示が更新されていくので気持ちよく開発が出来るのではないでしょうか。

仕組み

LiveReloadがどうやってブラウザの内容を更新しているかというと、以下の二通りの方法で実現しているようです。

ブラウザのアドオン(Safari, Chrome, Firefox)
JavaScript(WebSocketで更新通知を受け取る)

後者に関しては、WebSocketが動作すれば良いのでiOSでも利用できます。

LiveReloadの実装

元々は上の画面の通り、Mac用のGUIとして作成された物のようですが、現在はWindows版も（αバージョンですが）公開されています。
Mac版はApp Storeから入手可能です。

またこの他にもいくつか実装が見つかりました。

コンパイラ/プラグイン

さて、非常に便利そうなLiveReloadですが、最近はJavaScriptやCSSファイルを直接編集せず、CoffeeScriptなどの言語で書いてJavaScriptを生成する事も増えているかと思います。
LiveReloadはその辺りもうまくやってくれます。
LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jadeのコンパイラが付属されていて、設定を変更しておくとソースファイルを保存するだけでJavaScript/CSSのコンパイルをしてブラウザを更新してくれます。

LLのフレームワークであればブラウザのリロードだけで最新の状態に出来るので非常に便利そうです。
公式サイトでも、Rails, Drupal, WordPress, Joomla and ExpessionEngineでテストしていると書かれています。

実はコンパイラはプラグインとして提供されていて、自作のプラグインを追加する事もできます。
ant/maven/sbt/Gradle等を動かすプラグインを書けばServletでも自動でリロードさせる事が出来るかもしれません。*2

もう一歩踏み込んで…

ここまで出来れば十分だとは思いますが、どうしてもこれ以上の事がしたい場合でもWebSocketで通信するサーバを作成すれば任意のタイミングでブラウザのリロードを行う事が可能です。
プロトコルの詳細はLiveReload Protocol – LiveReload Help & Supportに書いてあるのですが、単純なJSONのやり取りを行うだけです。

はじめにブラウザからサーバへhelloコマンドが送信されます

{
  "command": "hello",
  "ver": "2.0.8",
  "protocols": [
    "http://livereload.com/protocols/official-6",
    "http://livereload.com/protocols/official-7"
  ]
}

クライアントのhelloを受けてサーバはクライアントへhelloを返します。

{
  "command": "hello",
  "serverName": "myServer",
  "protocols": [
    "http://livereload.com/protocols/official-7"
  ]
}

サーバからのhelloを受け取ると、クライアントはサーバへinfoコマンドでいくつかの情報を送ります。

{
  "command": "info",
  "url": "http://localhost:8090/sample1.html",
  "plugins": {
    "less": {
      "version": "1.0",
      "disable": false
    }
  }
}

以降、ファイルに更新がある度にサーバからクライアントへreloadコマンドが送信されます。

{
  "command": "reload",
  "path": "/sample1.html"
}

コードによると画像やCSSのみの更新も行えるようです。

現在のプロトコルはこれだけなのでサーバ部分だけなら簡単に作成できてしまいそうです。

まとめ

Webアプリ作成補助ツールのLiveReloadの紹介でした。
これが有るとView部分の開発が非常に快適になりそうです。
特に最近はブラウザをリロードするだけで全体が更新されるフレームワークが多いため、活用出来るシーンは多いのではないでしょうか。

*1:MacだとWatchServiceがpollingによる実装なため、残念な動作になります。

*2:Hot Swapとは相性が悪そうですが