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>
だからどの端末でもブラウザでもOKなのかー。
手っ取り早くBrowserSync触ってみたい方は以下のリポジトリクローンしてください。
https://github.com/mid0111/browser-sync-sample