Web開発・テスト環境に有用な browser-sync を試してみた

モダンなWeb開発に有用と思ったので、記事しておこうと思います。 browser-sync はその名前の通り複数デバイスのブラウザを同期してテストすることができる MIT ライセンスで提供されているオープンソースのコマンドラインツールです。

Adobe Edge InspectGhostLab と同等のツールです。 上記に挙げたツールは有料で OS も選びますが、browser-sync は無料で Mac、Windows、Linux と OS を選ばず使えます。 Mac だけだった GhostLab に Windows 版が出たみたいなので、OS は選ばない。

browser-sync の特長

  1. Scroll スクロールの同期
  2. Forms 入力したフォームの値の同期
  3. Links リンクのクリックを監視して、同期したすべてのブラウザで追従
  4. CSS injecting CSSファイルを監視して、変更されたら同期したすべてのブラウザで反映する。
  5. Live Reload HTML や PHP ファイルを監視して、ブラウザを自動リロード
  6. Built-in Server 静的ファイルを提供するローカルサーバー内蔵
  7. Use with any back-end setup 既存の PHP、Rails、Python、Node または ASP.net のセットアップで使用することができるように、プロキシオプションが含まれています。
    ※意訳なので間違っていたらすみません。

browser-sync をインストール

インストールは以下のコマンドを入力します。
(npm コマンドを使うので、事前にnode.js をインストールしておくことが必要です。)

npm install -g browser-sync

browser-sync を使う インストールが済んだら、プロジェクトディレクトリに

cd コマンドで移動します。 ここでの例では以下のような構成としました。単純ですね。

project directory
└─index.html

プロジェクトディレクトリで以下のコマンドを入力して

Enter を押して実行します。

browser-sync --files "index.html" --server

すると、index.html ファイルを監視した状態で、環境に応じたデフォルトのブラウザが開きます。 プロンプトには以下のようなメッセージが流れます。

   info  - socket.io started

OK, Server running at http://192.168.1.7:3001
Serving files from:  C:\[user name]\project

Load a browser & check back here. If you set up everything correctly, you'll see a 'Browser Connected'  message

Watching the following:
index.html

Browser Connected! (IE, version: 11.0)

この状態で html ファイルを変更して保存すると Live Reload でブラウザが自動リロードされます。 また、スマートデバイスでこの URL にアクセスすると同期されるので、以降 html ファイルを変更して保存する度に、PC ブラウザとスマートデバイスのブラウザが自動リロードされます。 必要な設定を javascript で記述して設定することができ、設定ファイルにはオプションを指定して、より具体的に設定できるようです。 詳しい使い方は公式サイトを見てください。

雑感

OS を選ばずにこの開発環境が無料で手に入れることができるなんて素晴らしいですね。開発者の人に感謝です。 browser-sync はワークフローを高速化して、複数のデバイスのモニタを対象している開発時に力を発揮するツールだと思いました。レスポンシブ Web デザイン (RWD) の開発でも使えそうです。また、Adobe Edge Inspect に置き換わるツールだとも思いました。 調べたら同じ開発者の人が Grunt Plugin も提供されていました。 browser-sync を単体として利用するか Grunt Plugin として利用するのかの2つの利用方法ができるようですね。

参考記事