素早くマルチデバイスでの確認ができるbrowser-syncというツールが便利

JavaScript フロントエンド開発

マルチデバイスの対応をしてると、ちょっとスマホで操作性を確かめたいなー、とか思うことよくあります。見た目とか、タッチイベントの挙動の確認とか。

そんな時に便利なのがbrowser-syncというnpmモジュールです。

できること

ローカルネットワーク内のデバイスでブラウザを共有できます。

PCで立ち上げたブラウザに、iPadやiPhoneからアクセスする、なんてことができます。

使い方

すごく簡単です。

npm install -g browser-sync

でインストール。

ドキュメントルートディレクトリにいるなら

browser-sync start --server

を叩くとブラウザが起動します。

ドキュメントルートにいないなら、後ろにディレクトリ名の指定も可能です。

browser-sync start --server app

そうするとこんな感じの出力がされるので、Externalのアドレスに他のデバイスのブラウザからアクセスします。

▶ browser-sync start --server
[BS] Local: >>> http://localhost:3000
[BS] External: >>> http://192.168.2.100:3000
[BS] Serving files from: ./

特徴

  • CUIのツール
    • これが決め手。この手のツールはGUIが多い気がします。CUI派にはありがたいです。
  • ブラウザ操作が同期される
    • 例えばiPhoneの操作がPCで開いているブラウザにも再現されます。見てるとすげー面白いです。PCでは開発ツール立ち上げたりしといて、リアルタイムにエラーでてないかなーなんて確認もできるのが地味に便利です。
      • --no-ghostオプションで同期offにもできます。
  • Gruntのタスクに組み込める
  • Gulpのタスクに組み込める

その他

このツールは、指定したディレクトリをドキュメントルートとしてローカルサーバを立ち上げることができます。

主題ではないですが、設定いらずで気軽にローカルサーバを立ち上げることができるのもこのツールの便利なところです。

ちょっとこのファイルhttpプロトコルで開きたいんだよねー、って時に重宝します。

最後に

僕は今のところ開発ではちょっとしか確認程度にしか使ってないのですが、がっつりやるならGruntかGulpのタスクでLiveReload設定して起動できるようにするのが良さそうですよね。

やってみたらまた感想書きます。