ここ最近「Web関係者によるWebと全く関係ないテーマの飲み会」づいているショートホープです。全然関係ないテーマで大盛り上がりしていて、こういう集まりもいいもんだな、と思いました。
僕がなにかできるとしたら「Web制作者のためのバイク乗り飲み会」くらいしか思いつかないんだけど、その『飲み会』、絶対にやっちゃアカンやつや…(´・ω・｀)
さて本題
WP-Dのメンバーでもあるよつばデザインの後藤さんからお声がけいただいて、去る12/18にKDDIウェブコミュニケーションズ セミナールームで行われたCPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所 スペシャル」に参加し、「node.jsことはじめ・Browser-Syncで楽々コーディング」というタイトルのライトニングトークで登壇してきた。
ろくに登壇した経験もないのにいきなりCSS Nite、しかもライトニングトークだから持ち時間は1人5分なのにデモをするという暴挙に出たわけだが、お情けでちょっと時間も延長していただいて（テンパって目の前のタイマーすら視界に入っていなかったのは内緒…）なんとか最後までお見せすることができた。とは言っても時間的な制約もあって実際の動作をただ見てもらうだけで終わってしまった。
簡単なセットアップだけすればすぐ動くとはいえ、「手順はググって」というのもあんまりなので、ここで簡単ではあるが最初から順を追って説明をしたい。
そもそも「 Browser-Sync 」って？
最近はだいぶ落ち着いてしまったように感じるが、少し前までわりと頻繁に耳にすることの多かった「Live Reload」ができるnode.jsパッケージのひとつがBrowser-Syncだ。
ライブリロード機能を提供するほとんどのパッケージがgulpやGruntのようなタスクランナーで動作させる前提のものであるのと異なり、 Browser-Sync は単独でも動作させることができる。
これが「決定版」と思わせる大きな理由のひとつであると思う。ブラウザのプラグインも不要で、導入の手間が圧倒的に少ないからだ。もちろん、タスクランナーと連携して動作させればさらに強力なツールになる。
もうひとつの大きな選択理由は「ネットワーク内の同期」だ。この機能を使うことで、様々なデバイスでの表示確認の手間を圧倒的に減らすことができる。この機能のために Browser-Sync を使う、という感じだ。その際接続する外部デバイスへのアプリのインストールなどは一切必要ない。
これは使わない理由を探すほうが難しいんじゃないだろうか？
事前の準備
単体で Browser-Sync を動かしたい場合、事前に用意することはほとんどない。もちろんnode.jsのパッケージなのでnode.jsのインストールが大前提とはなるが、それも手間はない。
このあとの説明は基本的にMacでの操作ベースになるが、Windowsでもほぼ同じ手順で実行できる。
node.jsのインストール
まずnode.jsをインストールする。手っ取り早く始めるなら、node.jsの公式サイトにアクセスし、トップにある「INSTALL」ボタンを押して手順通りに進めばいい。
インストールが完了したら、ターミナル(Windowsならcmd.exe)を立ち上げて
$ node -v
と入力すると、正しくインストールされていれば
のようにバージョンが表示される。記事執筆時点での最新バージョンは0.10.33である（画像では0.10.31）。
2014.12.24 追記
この記事の公開が2014年12月18日だが、2014年12月24日の時点で、既にnode.jsの最新安定バージョンは0.10.35となっている。この後にもカラム的に書いているが、万事この調子で非常にアップデートが早い。こまめにチェックをしましょう。
【ちょっとブレイク】パッケージマネージャのインストール
いわゆる「黒い画面」を使うとなると「マウスが使えない…」というだけで敬遠しているデザイナーさんは多いのではないだろうか。ただ、ここでのターミナルの操作はほぼコマンドをコピペするだけだ。あとは定型のコマンドいくつかを入力すればだいたいの操作はできてしまうし、実際の作業時に触るのもタスクを起動する•終了する時のみであとはバックグラウンドで動かしているだけ。実際に操作してみていただければ、「こんなに簡単ならもっと早くから使えば良かった…！」となること請け合いである（僕もたいしたことはできない）。
今はCUIでの操作が苦手だけど勉強してこれから使えるようになりたい、と考えているならば、先々のためにもパッケージマネージャをインストールしておくことをおすすめする。
パッケージマネージャは個々のパッケージを一括で管理できるスグレモノ。CUIでパッケージ（あるいはアプリケーション）のインストール、アップデート、アンインストールなどが一元管理できる。ここでは手順を記載した記事を紹介するにとどめるが、あとあとの管理のことを考えると必須の作業と言っていい。
Macの場合は「Homebrew」で管理するのが一般的だろう。以前はMacPortsやFinkもよく使われていたようだが、僕は使っていない。
Windowsでは「Chocolatey」があるが、僕自身試したことはない。
Windowsソフトを管理！パッケージ管理システムChocolateyでインストール、アップデートを簡単にする
パッケージマネージャの導入については、これも説明し始めるとブログ記事1件では説明しきれないくらいになってしまうので今回はこれくらいで。参考記事を参照してほしい（他力本願
npm
「 npm 」とは「node package manager」のことで、前述した「Homebrew」「Chocolatey」が各OSのアプリケーションの管理だったのに対し、「 npm 」はnode.jsのパッケージ専用。 npm のリポジトリに登録されているnode.jsのパッケージはここから簡単にインストールできる。
詳しくは公式サイトを参照していただきたい。
npm はnode.jsをインストールした際に同時にインストールされる。node.jsと同様に
$ npm -v
で npm のバージョンが確認できるので、インストールされているのがわかる。
Browser-Sync のインストール
いよいよこれから Browser-Sync をインストールするのだが、これもあっけないほど簡単。ただし、ここに関しては注意が一点ある。
Browser-Sync をインストールする『場所』なのだが、一般的にはグローバルにインストールすることが多いだろう。グローバルにインストールしておけばどこからでも Browser-Sync を立ち上げることができるからだ。
ただし、今回の例では「プロジェクトのルートディレクトリ」にインストールする。そのプロジェクトのルートディレクトリにインストールすることで「プロジェクト」のディレクトリ内で全て完結するようにしているためだ。
$ npm init
まずターミナルを立ち上げる。ターミナルのコマンド「cd」（Change Directory）でプロジェクトのルートディレクトリに移動して、以下のように入力する。
$ npm init
これは設定ファイルであるpackage.jsonを作成するために必要な手順。このコマンドを入力すると、質問形式でプロジェクトの名前やらバージョンやらいくつかの入力項目を聞かれるが、ここは後からいつでも書き換えが可能なので最初はとにかく全部「return」でいい。
どんどんreturnしていくと最後にpackage.jsonに記載される内容が表示されて「Is this ok? (yes)」と聞かれるが、これもそのままreturn。これでpackage.jsonが作成される。
package.jsonは一度作成すればいいので、新しいプロジェクトを始めるときにだけ「npm init」すればいい。もしpackage.jsonを自分で作成する、あるいは以前に作ったpackage.jsonを流用するなら「npm init」は不要だ。
Browser-Sync をプロジェクトのルートにインストール
「npm init」でpackage.jsonができたら、 npm を使って Browser-Sync をインストールしよう。
$ npm install browser-sync --save-dev
上記コマンドを実行すると、 Browser-Sync がプロジェクトのルートディレクトリの「node_modules」にインストールされる。「–save-dev」というオプションを付けたのは、インストールと同時にpackage.jsonにモジュール名「 Browser-Sync 」を自動で追加するためだ。
次回新しいプロジェクトを始めるときには、モジュール名が追加されたpackage.jsonを流用して「npm install」を実行すれば、今回とは逆にpackage.jsonの記述を元にプロジェクトディレクトリに Browser-Sync がインストールされる。
ちょっとだけ注意すること
Browser-Sync に限ったことではないが、node.jsのパッケージ全般の話として「頻繁にアップデートされる」ことが挙げられる。パッケージだけでなくnode.js本体や npm も。多い時には一日に複数回アップデートがかかることもある。新しいプロダクトだから仕方ない面もあるが、たまに公式のリリースページを見ておくといいかもしれない。
バージョンの組み合わせによっては不具合があって動かない、とか新しいバージョンでは記法が変更になっている、とか実はわりと「あるある」な話なので、そこは注意が必要。
package.jsonにオプションを追記
Browser-Sync をグローバルにインストールしていれば、サーバを起動したいディレクトリで以下のようなコマンドを実行すれば良い。
$ browser-sync start --server --files='./*.html, ./*.css'
だが、今回はローカルのディレクトリにインストールしているため、このコマンドから直接 Browser-Sync を呼び出せない。それにこんなに長いコマンドをいちいち打つのも大変。そこで、できあがったpackage.jsonに変更を加える。
"start": "browser-sync start --server --files='./*.html, ./*.css'"
これでサーバを起動したいディレクトリで「npm start」というコマンドを入力するだけで、ローカルのディレクトリにインストールした Browser-Sync を「直下にある.htmlファイルと.cssファイルだけを監視対象とした状態」で起動できる。他にも監視させたいファイルがあるなら「–files=’xx’」部分にカンマ区切りで列挙すればいい。初期設定はこれだけだ。
ちなみに、今回のデモで使ったpackage.jsonはこちら。
そしてプロジェクトのルートディレクトリはこんな構造である。これだけでちゃんと動く。
├ package.json
│
├ index.html
│
├ style.css
│
└ [node_modules]
│
└ [Browser-Sync]
さて、動かしてみる
ここまで準備できたらあとは動かすだけ。準備も簡単だが、動かすのも簡単。前述したとおり、ターミナルに
$ npm start
と入力すれば勝手にローカルのサーバが立ち上がってデフォルト設定のブラウザが開く。
ポートは設定で変更することもできるが、デフォルトでは「localhost:3000」で立ち上がる。その時にターミナルをみていると
こんな表示になっていることがわかる。この「Local URL」に表示されているのがローカルのサーバのURLだ。
ブラウザの表示はこんな感じ。
ここで、先ほどpackage.jsonに記述したオプションで監視対象にしたファイルをエディタで開き、書き換えてみよう。
例えば.cssファイルを一部書き換えてみる。
なんということでしょう、ファイルを保存した瞬間にブラウザが自動でリロードされて変更が反映されている。
このとき、ターミナルの表示はこうなっている。
この「File changed:」の部分で.cssファイルの書き換えをリアルタイムで検知してブラウザをリロードしているのがわかる。
この例では.cssファイルを書き換えたが、package.jsonに「監視対象は.htmlファイルと.cssファイル」と記述したので、もちろん.htmlファイルを書き換えて保存しても瞬時にリロードされる。
普段コーディング作業をしていると、一日にそれこそ何千回もブラウザのリロードが必要になり、毎回「Cmd + R」なり「F5」なりキー入力をしているはずだ。それが一切不要になる。これだけでもコーディングのストレスがだいぶ軽減されるのではないだろうか。
そして本命
このライブリロード機能だけでも充分導入に値すると思うが、 Browser-Sync が本領を発揮するのはここからだ。
ローカルネットワーク内の同期
先ほどのターミナルの「Local URL」の下に「External URL」という表記がある。
同じローカルネットワーク内にある別のマシンからこのURLにアクセスすると、いまローカルで立ち上がっているサイトを表示することができる。しかも、ページ遷移やスクロール、フォームの入力、果ては JavaScriptのイベント までもが同期する（！）。この操作も、例えばnode.jsのサーバを立ち上げているマスターからの操作だけを受け付けるということではなく、ネットワークに接続したどのマシンからの操作も即座にすべて反映される。
これこそが Browser-Sync の Browser-Sync たる所以で、イマドキなら当然どのサイト制作でも必要な、多岐に亘るデバイスでの表示確認の手間を一気に減らすことができる。
例えばPC / Macで表示させた時は問題なくともモバイルデバイスだと崩れる、なんていうケースは良くあることだと思う。実際の制作現場ではPC向けのCSSを書いてからiPhoneで表示確認して修正を加えて、Androidの表示崩れに泣いた(´ ; ω ; ｀)あとにタブレットで表示確認して…なんてカオスなことになっているのではないだろうか。
そこでこの Browser-Sync を使っていれば、全てのデバイスを同時に確認（もちろんMac / PCの各ブラウザ表示も！）できるので、全ての作業を並行して進めることができる。しかもいちいちブラウザをリロードする必要もない！これをうまく使えばデザインしながらコーディングなんてのももっと簡単になる！なんて楽チン！
これで今日は早く帰れるじゃないか！
さらなる高みへ
これだけでも充分に高機能なことはお分かりいただけたかと思うが、 Browser-Sync の真価はこれだけではない。
先ほどのpackage.jsonの記述にちょっと書き加える。
"start": "browser-sync start --server --files='./*.html, ./*.css' --tunnel"
この「–tunnel」の記述を書き加えてから再度「npm start」してみると、「External URL」のさらにひとつ下に「Tunnel URL」という表記が新しく加わっているのがわかる。
なんと、これは外部向けのURLが表示されている。つまり Browser-Sync の立ち上げたサーバから外部へ出力されているのだ。
なので、インターネットに接続してブラウザからサイトが見られるなら、このURL（すなわち Browser-Sync が立ち上げているサーバ）に どんなデバイスからもどこからでもアクセス（＝同期）可能 だ。
実際問題としてセキュリティや負荷のことなどを考慮すればこれが恒久的なサーバになることはありえないが、制作途中でちょっとクライアントに動きの確認を取りたい、あるいはデザインカンプと違うスタイルになっている部分の了承を取りたい…そんな希望が簡単に叶えられる。
外部からのアクセスに対してもライブリロードや操作の同期は可能だが、回線速度に大きく左右されるため、そこに関してはあまり過度な期待はできない。とは言え、わざわざテストサーバなど用意しなくても ローカルでの制作途中で外部に表示できる メリットは計り知れない。
この機能が利用出来るだけで、世間のディレクターの苦労の3割くらいは減らせるのではないだろうか。
これで今日は早く帰れるじゃないか！
ちょっと注意点
ここで見ているサイトはあくまでも「node.jsが立ち上げたサーバ」なので、そのままではphpは動かない。すると次の段階として「Vagrantが…」という話しになって行くのだが、それはまた別の機会に。是非こちらの記事も参考にしてほしい。
まとめ
かなりざっくりとではあるが、 Browser-Sync の主な機能3つをご紹介した。僕自身がマークアップエンジニアなのでその目線からの内容にはなっているが、デザイナー・エンジニア・ディレクターいずれの立場であっても充分活用できることがお分かりいただけたのではないだろうか。それぞれの立場でそれぞれが必要な機能を使えばみんながラクをできるし、最初に説明したとおりタスクランナーと連携させればさらに強力なツールとなって制作環境を助けてくれることは間違いない。
タスクランナーもこの Browser-Sync も、最初の導入時には少々コストがかかるかもしれない。が、いまこれだけ使われている背景には 機械にできる部分は機械にやらせる、単純作業・繰り返しの作業は自動化する ということがある。そこで生まれた時間をもっと有効に利用して、これまで以上にコンテンツを充実させたりすることに重点を置くことが可能になる。
もうほんとにいつやるの、いまでしょ！（古
さて、今回LTとは言えCSS Niteに登壇するということで、自分に話せることはいったい何かいろいろ考えたが全く思いつかず、当初は「情報収集の方法と取捨選択の条件」というテーマにしようと思ったものの5分ではあまりに薄っぺらい内容で終わってしまいそうで、だいぶ長い期間あれこれ迷走していた。
そこでふと思ったのが今年6月に来日したWordPressの創始者であるMatt Mullenwegの言葉で、「自分がどんなにつまらないことだと思っていても、それを知らなくて困っている人は必ずいるから、躊躇せずにアウトプットすることは大事だ」ということ。
今回のCSS Niteは「webクリエイターのための情報交換所」とのコラボレーションだったこともあって、来場者の多くは情報に敏感な人達でとっくに知っているような内容だったかもしれない。が、今回のテーマであった「2014年の技術トレンドを振り返る」という内容に最も沿った形で自分の話しをするとしたら Browser-Sync が今年僕にとって最もインパクトがあった、ということでこのテーマを選んだ。これが少しでもこの記事を読んでくださっている皆さんのお役に立てば幸いである。
最後に、今回の機会を作ってくださった後藤さんと鷹野さん、いろいろ貴重なアドバイスをいただいたうえに査読（という名の添削w）までしてくださった年中Tシャツの人にあらためて深くお礼申し上げます。
発表スライド
参照記事
書いてるうちに参照記事のただの焼き直しになってしまったのは内緒…(´；ω；｀)ｳｯ…