2018.8.6

BrowserSyncでライブコーディングをしよう

どうも、kuroro0319です。

Webサイトのブラウザチェックというのはとても重要ですが、とても面倒なものです。
例えば、コーディング時にいちいちブラウザをリロードして、確認するのは面倒です。
一つのWebサイトを完成させるまでに、いったい何回リロードをするのでしょうか？
私はリロード職人になる修行をしているのでしょうか？
そんな訳のわからない職業を空想してしまうほどに不毛な作業です。

また、絶対パスのサイトをローカルで確認するのも大変です。
PCのハードディスクのルート階層に毎回いちいち設置しますか？
それともサーバーにアップロードしますか？
サイトができる頃にはそのサイトが必要なくなってるかもしれません。

それから、各デバイスでの確認をするのにいちいちBasic認証を打ち込むなんて手間も面倒です。
Basic認証を覚えたり、紙に書いたり…
趣味でやってるんでなければ、もう止めませんか？
趣味なら止めませんが…趣味ならね。

今回はそんな手間を省いてくれるBrowserSyncというアプリケーションをメモがてら紹介します。
無駄な作業時間を減らして、時間を有効に使いましょう。

そして、空いた時間でFXでもなんでもやって、人生そのものを無駄にしてしまうがいいさ！

すいません、言い過ぎました。

自分の時間を確保して、有意義な時間（スマホゲームとか？SNS）を過ごしてください。

そもそもBrowserSyncって何？

BrowserSyncはNode.jsを利用したローカル環境でサーバーを動かすコマンドラインで動かすアプリケーションです。
また、監視するディレクトリ内のファイルを更新した時にブラウザを自動リロードする機能もあります。
それ以外にも同IP内のネットワークを使用している別のデバイスから接続することも可能です。
Basic認証なしで、スマホやタブレットで確認できるのもとても魅力です。

その他にも機能はありますが割愛します。
まずはBrowserSyncの公式サイトを見てみましょう。

BrowserSyncのインストール方法

npm install -g browser-sync

公式サイトに行くと、上記のようなものが書いてあります。
慣れない人にはわかりにくいかもしれませんが、これはMacのターミナル（Windowsだとコマンドプロンプト）で使うコマンドになります。
ただし、「npm」と先頭にあるので、Node.jsがインストールされている前提になっています。
Node.jsをインストールしていない人は、まずはNode.jsの公式サイトからNode.jsをインストールしましょう。
特にこだわりがなければ推奨版を選択しましょう。
ちなみに、インストールコマンドの意味は「npm（Node Package Manager）」で「browser-sync」を「-g（ローカルPCの一番上の環境）」に「install」という意味です。
権限の問題があるので、Macでは「sudo（Super Document User）」という最上位権限をnpmの前につけて実行した方がエラーが出にくいかもしれません。

BrowserSyncを使ってみよう！

/*
 |--------------------------------------------------------------------------
 | Browser-sync config file
 |--------------------------------------------------------------------------
 |
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 |
 | There are more options than you see here, these are just the ones that are
 | set internally. See the website for more info.
 |
 |
 */
module.exports = {
    "files": ["./**/**/*.html","./**/**/*.css","./**/**/*.js","./**/**/*.png","./**/**/*.gif","./**/**/*.jpg"], // 更新を監視するファイルを設定
    server: {
        baseDir: "httpdocs", // ルートとなるディレクトリを設定
    },
    startPath: "/xxxx/xxxx.html", // 起動した時に開くファイル
    "proxy": false, // プロキシを使うかどうか（基本使わない）
    "port": 3301, // ポート番号（複数開く場合は勝手に変更されるのでこのままで）
    "xip": false, // xipを使うかどうか（使わなくていい）
    "notify": true, // ブラウザのリロードを通知するかどうか（このままでいい）
    "minify": true, // ブラウザ上で動くBrowserSyncのscriptをminify化するかどうか（このままでいい）
};

BrowserSyncを使う時に、設定ファイルが必要になります。
これがないと、どこをどのように監視するかということをBrowserSyncが理解してくれないので、BrowserSyncが動きません。
私はいつも「bs-config.js」というファイル名で設置しています。
optionは上記だけでほぼ十分だと思います。
もっと追加したい場合はBrowserSyncのoption一覧を見ながら、追加してください。

#/bin/bash

browser-sync start --config bs-config.js

また、BrowserSyncを起動するのに上記コマンドが必要になります。
私はちょっと長くて、覚えるのが面倒なので、「bs.sh」というシェルファイルにしています。
「bs.sh」だけなら覚えるのも簡単なので便利です。

BrowserSyncのオススメの使い方

Gulpなどのタスクランナーと組み合わせるのもいいですが、
私はあまり導入していないので、だいたい以下のようなファイル構成にして使っています。
自分の好きな設定でアレンジして使ってみてください。

project
  |     
  +-httpdocs
  |
  +-bs-config.js
  +-bs.sh

Macだとprojectフォルダごとターミナルにドラッグドロップして、

sh bs.sh

上記コマンドを実行でBrowserSyncが立ち上がります。

BrowserSyncを使ってみての感想

超絶便利というか、もうこれがないと制作できませんレベルですね。
これがあれば、ご飯何杯でもいけるという、
訳のわからないことを言ってしまうくらいお世話になっています。
Git+ソースツリーと並んでMyベスト神器の一つです。
もうほんと、神棚に添えて毎日祈りを捧げたい気分です。
これがない時代は「よく制作できてたな〜」と思います。
「産業革命」並みの変革ですね。
これを教えてくれた、元いた制作会社の先輩と後輩の子に感謝です。