ブラウザ確認が一瞬! Grunt・Gulpと始めるBrowserSync入門

ブラウザ確認が一瞬! Grunt・Gulpと始めるBrowserSync入門

※この記事が公開されたのは1年10ヶ月前ですが、 2015年12月21日に内容をメンテナンスしています。

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

BrowserSyncのデモ動画

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

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

BrowserSyncのメリット

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

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

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

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

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


     最新記事の一覧へ 
公開 / 更新
鹿野 壮

鹿野 壮

ICS所属のインタラクションデザイナー。九州大学芸術工学部音響設計学科でインタラクティブコンテンツを学ぶ。AIR・Swiftを使ったアプリ開発とHTML5・CSS3・JavaScriptを使ったリッチなWebページ制作が得意。豚骨ラーメンが大好きです。QiitaTwitterでも情報発信中!