壮Gulp202856Webサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。Browsersyncのデモ動画Browsersyncを使ってデスクトップブラウザとスマートフォン(iPhone)のブラウザを同期させ、ファイルの編集後に自動リロードするデモ動画を御覧ください。CSS3でハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。Browsersyncは何を便利にしてくれるのかファイルの編集後に複数ブラウザの確認をする際、以下のような手間があります。別のデスクトップブラウザやスマートフォンブラウザでの表示確認の為に、ローカルサーバーやリモートサーバーを立てる手間Browsersyncを使用すると、これらの手間が省け制作効率を多くアップさせることができます。Browsersyncの主な特徴は以下です。同じネットワークにある端末のすべてのブラウザが同期される同期されたブラウザにおいては、スクロール、クリック、再読み込み等のユーザーアクションがすべて同期されるGulpとBrowsersyncの連携Browsersync単独でも便利なのですが、GruntやGulpといったタスクランナーと連携するとさらに便利です。SassやTypeScriptをコンパイルした後にブラウザをリロードしたり、スプライトシートを作りながら実機で表示確認をしたり等ができるようになります。ここではGulpと連携する例をご紹介します。タスクランナーGulpを使ってウェブ制作を爆速にしよう」を御覧ください。Gruntとも連携できますのでGruntの場合は適宜読み替えていただければと思います。BrowsersyncのインストールBrowsersyncのインストールは簡単です。Node.jsがインストールされた環境で、以下のコマンドを使ってBrowsersyncプラグインをインストールします。--save-devという風に管理者権限で実行します。Browsersyncの基本は2つのAPIBrowsersyncを使うときにおさえておきたいAPIは以下の2つです。ルートフォルダ}})ブラウザを同期した場合のルートフォルダーを指定します。.reload()同期しているブラウザをすべてリロードします。Gulpでのタスク設定gulpfile.jsでプラグインの読み込みとタスクの設定を行います。srcフォルダー以下のファイルの更新を監視し、ファイルが更新されたら同期しているブラウザをリロードするというタスクを作ってみます。});});タスクを実行するとBrowsersyncが開始します。browserSyncTaskBrowserSyncが開始されるとログに以下のように出力されます。URL」が自動で立ち上がったローカルサーバーのURLです。同じネットワークにあるデスクトップブラウザやスマートフォンのブラウザからこのURLにアクセスすれば、すべてのブラウザが同期されます。最後にBrowsersyncを使うと、複数のブラウザや複数の端末における動作確認が容易になり、制作者のみならずチーム内のメンバーによる確認の手助けにもなります。動作確認がスムーズになると、その分制作のブラッシュアップに注力できるようになります。2017年1月16日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。