Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away