eyecatch

【追記・訂正あり】【試してみた】BrowserSyncが2.0.1にバージョンアップしてた【超絶進化が止まらない】


2015.2.21 追記

Facebook上でこの投稿をしたのが2/17だったのですが、今日(まだその4日後ですよ…)見たらバージョンが2.2.1になっていましたw

事程左様にものすごく頻繁にバージョンアップが行われています。バグフィックスもありますが、機能追加も含めてどんどん仕様も変化しますので、ケースによってはバージョンアップ後に動作しなくなる可能性もあります。その時は焦らずに

npm install browser-sync@2.0.1 --save-dev

のようにバージョンを指定してインストールすることが可能ですのでお試しください(package.jsonからインストールしている場合はpackage.jsonの記述を書き換えましょう)。


2015.2.12 追記

souさんから

正式にはBrowserSync(ハイフンなし)だよって某氏が突っ込んでましたw

というツッコミをいただいたので表記を訂正しました。公開時には「Browser-Sync」表記でしたorz


CPI x CSS Nite x 優クリエイト「After Dark」(17)「webクリエイターのための情報交換所 スペシャル」以降すっかり BrowserSync づいている、固め打ちが得意なショートホープです。残念ながらまだ全然ツール類を使いこなすレベルには達していないんですが、こういうことができる環境がある今の自分は幸せだなぁと日々感じています(底が浅いけど

BrowserSync

いまさら説明するまでもないとは思うが、 BrowserSync はネットワーク上での同期表示などを可能にするソフトウェアだ。Web制作(特にコーディング作業)において手間のかかる、言ってみればちょっと面倒なところを自動化してラクする助けをしてくれる、最近のツール群のうちのひとつだ。

先ほども書いたCPI x CSS Nite x 優クリエイト「After Dark」(17)「webクリエイターのための情報交換所 スペシャル」BrowserSync を使ったデモをした内容はこちらの記事にまとめてあるが、「 BrowserSync が2.0.1にバージョンアップした」という情報を手に入れたので早速そちらを試してみることにした。

まずは公式ページを読む

こんな BrowserSync みたいな新しいツールの紹介記事を書いていると「デキる人」とよく間違われるwwのだが、実はそんなことはなくてあちこち引っかかり引っかかり、詳しい人に泣きついてwなんとか動くようになった、というのが正直なところだ。

そんな中でひとつ自分が得た教訓があって、それは「 とにかく公式ページをちゃんと読む 」ということだ。こういったツールの場合、公式ページはほぼ100%英語で書かれている。その時点でまずちょっと挫けそうになるのだが、そこをぐっとこらえて辞書を片手に読む。なぜかといえば、公式ページに全部書いてあるからwww

当たり前のことだけれど、「英語だ…」というだけで敬遠してしまって公式ページをろくに読まずに手を出してしまい、その結果うまくいかないということが何度もあった(そのたびに助けてくださった皆さま(といってもほぼほぼ約一名)本当にありがとうございましたm(_ _)m )。

BrowserSync の公式ページはこちら

変更箇所は?

トップページを開くとまずタイトルの下にインストールの手順のページヘのリンクと動画が並んでいる。

20150211_bs01

スクロールしていくと概要などのトピックが続く。

20150211_bs02

ざっと読んでいくと「 try it on a tablet to create a second-screen control panel. 」の一文が。

ほほーう。「別画面でコントロールパネルが表示される」ということのようだ。そこで設定を切り替えればすぐに反映されて、「黒い画面」にいちいち戻る必要すらないということらしい。これは期待できる…。

ドキュメントを読むと、

  • 「UI」オプションが新たに追加された。
  • デフォルトでtrue。
  • ポートの変更も可能。

ということのようだ。よし、早速試そうw

BrowserSync を立ち上げる。

手順はこちらの記事のままなので、そのとおりにやれば BrowserSync が立ち上がるはずだ。

前回と違っている条件は

20150211_bs03

node.jsのバージョンがこれもやはりつい先日リリースされたばかりのv.0.12.0だということ。ただ、これはv.0.10.35でも動作は確認済み(こもりさん、情報ありがとうございます)。この辺りの要件は公式サイトで探そうw


2015.2.12 追記

大都会岡山のヌシ様から

bsのpackage.json見てみたら

"engines": {
    "node": ">= 0.8.0"
},

とありましたので、0.8.0以上なら動くってことですかね。

というコメントをいただいた。であればv.0.10.xなら大丈夫。
設定ファイルもちゃんと読め、ってことでorz
貴重な情報ありがとうございました!


もうひとつは BrowserSync のバージョンがv.2.0.1だという2点だ。

で、軽くおさらいしながら手順を説明すると

1.index.htmlとstyle.cssが入ったディレクトリを用意する。
2.ターミナルでそのディレクトリに移動して「npm init」。

20150211_bs04

3.続けて「npm install browser-sync –save-dev」。

20150211_bs05

4.package.jsonの「scripts」に追記をしてから「npm start」。

ちなみに追記するscirptsも全く一緒で下記のとおり。

"start": "browser-sync start --server --files='./*.html, ./*.css'"

この時のターミナルの画面はこんな表示になっていて、「Access URLs」に BrowserSync 起動後の「UI」用のURL表示が追加されている。

20150211_bs06

これでデフォルトのブラウザが「localhost:3000」で立ち上がって、index.htmlとstyle.cssの変更が反映される。

これも念のためということで、上記の手順で作成した「package.json」は下記。これを最初から入れておけば「npm init」と「npm install browser-sync –save-dev」が不要で、代わりに「npm install」だけでいいのも以前の記事のとおり。

じゃあ新機能を試そう!

いよいよ新機能を試す。特に「UI画面を開く」的なリンクとかボタンは見当たらなかった(当たり前?)ので、別ウィンドウを開いて「localhost:3001」を入力。

20150211_bs07

おおおおおおおぉぉぉぉぉぉぉぉぉ

これ、スゴいな…。まさに「UIビュー」が開く。サブウィンドウ内では左カラムにメニュー、メインカラムに各項目の詳細が並んでいる。ヘッダー部分のナビゲーションはだいたい機能が想像つくと思うので説明は割愛w

最初の画面「Overview」は概要。全体設定表示のようなもの。

20150211_bs08

  1. Local
    ローカルでのURL(localhost:xxxx)と「NEW TAB」、「SYNC ALL」のボタンが並ぶ。
    「NEW TAB」をクリックすればこのURLが新規タブで開く。
    「SYNC ALL」では、このURLで開いている各ブラウザ(または各デバイス)が一斉にリロードする。

  2. External
    外部向けのURL(ただし同一ネットワーク内)が表示される。ボタンの機能は「Local」と一緒。

  3. Serving files from
    rootの表記。下層のページを表示してたらここにrootまでのpathが出るのかな?ちょっとここは未確認。

  4. Current Connections
    いま同期して接続しているブラウザが表示される。

「Sync Options」は同期する操作内容を細かく選択

20150211_bs09

サイト制作時に使う・使わない同期の機能を選んで、すぐ切り替え可能になっている。これまでは個々の設定はできなかった(はず)。

「History」

20150211_bs10

今回は残念ながら内容を確認できていないのだが、公式ページの説明を読むと「テストしたページの履歴が残るので、直前ないしは少し前に確認していたページがすぐに表示できる」ということのようだ。これ、たぶん地味に便利。例えばメニューにはページヘのリンクがまだ入ってないけどそれぞれの下層ページを表示確認したいとき、毎回ブラウザの履歴かURLを手打ちかコピペしてた…。


 いつものように、情報の最前線を行く髪を切ってちょっとスッキリしたTシャツの人こんな動画をシェアしている。

 この動画はご本人によるものだが、この中で履歴が残っている様子を見ることができる。
 やること早い…。つい先日のイベントの時もTシャツ一枚だった人にとっては、きっと特別なことじゃなくて当たり前なんだろう。

 やっぱり何周も先を行っている人はどんどん進んでいるようだ。


「Remote Debug」

これが今回のバージョンアップの目玉だろう、という超絶便利な機能。 BrowserSync のこれまでの機能でも充分に普段の業務に活用できたが、これはちょっとスゴかった。実はこれまで他にもこういったツールはあったのかもしれないが残念ながら僕は知らなかったので、ちょっとした衝撃だった。

20150211_bs11

1.Remote Debugger
同期している『 実機 』でデバッグできる。超絶便利。これでAndroidのレイアウト崩れに泣いていた制作者はかなり負担が減るのではないだろうか。だって、まずそれ自体が結構トラップだったシミュレータ不要ですよ?(実機揃えないといけないけどw)

20150211_bs12

20150211_bs13

1枚目の画像のハイライトしているトグルボタンのすぐ右下の「Access remote debugger」と書いてある赤いテキストリンクをクリックすると、2枚目の画像のとおりポート8080で管理画面が開く。「Targets」では、「Overview > Current Connections」に表示される、いま同期している機器がテキストリンクで選択できる。これで開きたいデバイスの「Targets」をクリックすると見慣れたデベロッパツールが開く。

20150211_bs14

同期している状態はこんな感じ。だいぶ見づらい画像になってしまって申し訳ないが、 BrowserSync 上でのデベロッパーツールでハイライトしているタイトル部分が 実機でも ハイライトしているのがご覧いただけるだろうか。あまりにスゴすぎて、最初確認した時に一人で大笑いしてしまったw

2.CSS Outlining
 CSSのブロックを色分けして表示。変に入り組んで構築してしまっている場合など、すぐに目視できて便利な機能。

20150211_bs15

3.CSS Depth Outlining
 こっちはCSSの「深さ」で色分け(深いほうが暗い)されているようだ。もっと複雑なサイトを見てみればよかった(´・ω・`)

20150211_bs16

4.Latency
 これも機能自体を試せていないが、「レイテンシ」という名前から察するに「実際の表示の際の遅延をエミュレートする」ものだと思う。スライダで遅延する時間を設定できるようだ。

マジで超絶進化してた

本当にさわりだけをちょっと試してみただけだが、びっくりするくらい新機能満載だった…。

UI機能が追加されてかなりGUIで操作できる要素が増えたこともあって、これまで以上に一気に敷居が低くなったのを強く感じた。これならデザイナーも気軽に触ってみようという気になるのではないだろうか。もちろん最低限の基礎の知識は必要だと思うが、簡単に・直感的に操作できるようになったのは大きいと思う。

そしてなにより「 Remote Debugger 」だ。本当に笑っちゃうほどびっくりした。技術の進歩って素晴らしい…。これを無料で公開している制作者には本当に感謝だ。ありがたく使わせていただくm(_ _)m

あ、そういえばTunnelにも新機能があるっぽいの確認するの忘れた…orz

One thought on “【追記・訂正あり】【試してみた】BrowserSyncが2.0.1にバージョンアップしてた【超絶進化が止まらない】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です