Webサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、Web制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します

Browsersyncのデモ動画

Browsersyncを使ってデスクトップブラウザとスマートフォン(iPhone)のブラウザを同期させ、ファイルの編集後に自動リロードするデモ動画を御覧ください。CSS3でハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。

Browsersyncは何を便利にしてくれるのか

Browsersyncのメリット

ファイルの編集後に複数ブラウザの確認をする際、以下のような手間があります。

  1. ファイルを編集する度に、ブラウザを全て手動でリロードする手間
  2. 別のデスクトップブラウザやスマートフォンブラウザでの表示確認の為に、ローカルサーバーやリモートサーバーを立てる手間

Browsersyncを使用すると、これらの手間が省け制作効率を多くアップさせることができます。Browsersyncの主な特徴は以下です。

  1. ローカルサーバーが自動で起動
  2. 同じネットワークにある端末のすべてのブラウザが同期される
  3. 同期されたブラウザにおいては、スクロール、クリック、再読み込み等のユーザーアクションが全て同期される

次のページでは、Browsersyncの設定方法を解説します。