search
LoginSignup
12

More than 5 years have passed since last update.

posted at

updated at

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

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でうきうきレスポンシブ対応アプリ開発 - ぶるーすくりーん

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12