BrowserSyncでレスポンシブデザイン対応のアプリ開発効率化

1115 ワード
BrowserSync HTML5 レスポンシブ HTML5 テキストリンク

Google Web Starter Kitを利用していて、とても気持ちよかったのでBrowserSyncについて調べてみました。

何するもの？

レスポンシブデザインのWebサイトを作成する場合、たくさんのデバイスを使ってテストする必要があります。

BrowserSyncを使うと、ブラウザで行った操作、及びコード変更を複数デバイスに対して同期させることができます。

具体的にできること

  • スクロールやクリック、リロード、フォームでの操作を複数デバイスにミラーさせる（！）
  • HTML、CSS、イメージなどソースコードの変更があった際に、自動でブラウザアップロード
  • GruntやGulpとかと連携できる
  • Desktop, tablet, Mobileでブラウザの同期ができる（！）
  • Back-endに依存しないので、PHPでもASPでもRailsでもなんでも使える
  • Node.jsで作っているので実行環境はWindowsでもMacでもLinuxでもOK

つまり、PCのモニタ、タブレット、スマホでブラウザ開いて、確認用URLを表示しておけば、コード変更時に勝手にブラウザをリロードしてくれます。

さらにそれだけではなく、PCで行った操作がタブレット上でもスマホ上でも勝手に行われるのです！

実際動かしてみるとかなり楽しいです。

以下のエントリにgulpと連携して導入する方法をまとめてあるので、興味のある方は見てみてください。
BrowserSyncでうきうきレスポンシブ対応アプリ開発 - ぶるーすくりーん