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と連携して使ってみる

Web Starter Kitの実装を参考に、Gulpさんのタスクとして定義してみます。

導入してみる

まずは、プロジェクト作成から。

$ npm init
$ npm install gulp browser-sync --save-dev

次にgulpfile.jsを作成し、以下を記述。

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('serve', function () {
  browserSync({
    notify: false,
    server: {
      baseDir: ['app']
    }
  });

  gulp.watch(['app/**/*.html'], reload);
});

動作確認用にapp/index.htmlを作成

<!doctype html>
<html>
  <body>
    Hello!!
  </body>
</html>

gulpコマンド打ってみる。

$ gulp serve

こうすると、PCのブラウザでlocalhost:3000が勝手にオープンされると思います。
これで準備は完了です。

BrowserSyncを体験してみる

そしてここからが、BrowserSync使った楽しい開発のお時間です。

まずは、家中のスマホとかタブレットとか集めて縦置きとか横置きとかにして並べて、ブラウザで{PCのIPアドレス}:3000にアクセスします。
※同一ネットワークに接続していることが前提になっています。

そこで、あれ、スマホ版の文字小さいな！これはいけない！

って思い、viewportの宣言とか加えてみます。

<!doctype html>
<html>
  <head>
    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
  </head>
  <body>
    Hello!!
  </body>
</html>

そして、エディタでセーブ！！
これだけで、すべてのブラウザがリロードされます。すごい！

これでスマホでもHello!!が見やすい文字サイズで表示されるようになりましたね。

次は、アクションの同期を確認してみます。

アクション同期してみる

HTMLをまた修正してボタン押したらテキスト追加してくれるようにします。

  <body>
    <h1>Hello!!</h1>

    <div>
      <Button onclick='yo()'>Click!!</Button>
      <div id='text'></div>
    </div>

    <script>
      yo = function() {
        document.getElementById('text').textContent += 'Yo!';
      }
    </script>
  </body>

で、ブラウザでボタンポチってみます。

すると、すべての端末のブラウザに「Yo!」が表示されます！
PCで操作してもスマホで操作してもすべてのブラウザが同期されて「Yo!」が増えていきます！
すんげー！！

この不思議な仕組みはビルド時にHTMLに以下を仕込むことでできあがっているみたいです。

<script type='text/javascript'>//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync-client.1.1.2.js'><\/script>".replace(/HOST/g, location.hostname));
//]]></script>