• TOP
  • ブログ
  • Browsersync で快適なブラウザチェック環境を作る

ブログ

2016/09/07

Browsersync で快適なブラウザチェック環境を作る

はじめに

こんにちは、技術グループの丸永です。
今回は WEB サイトを制作する時に私が使用しているツールをご紹介します。

WEB サイトを制作するにあたり、避けて通れないのがブラウザチェックですよね。

WEB制作会社の私たちにとってブラウザチェックは必須の作業ですが、企業の WEB 担当の皆さんにとっても大事な担務のひとつではないでしょうか。

PC だけでも Chrome、Firefox、Safari、Microsoft Edge、Internet Explorer（バージョン毎に！）などのブラウザがある上に、タブレット、スマートフォンが普及してからは iPad、iPhone、Android（のタブレットも！）と求められる動作環境は増える一途をたどり、ブラウザチェックだけでもかなりの手間がかかります。

さて、みなさんはどんな方法でブラウザチェックをされていますか？ .html ファイルをそのままブラウザにドラッグ＆ドロップして表示（file: プロトコルで表示）させたり、リモートのテスト環境にアップロードしたりすることが多いかもしれませんね。

私の場合は、自分自身の端末内（ローカル）上で WEB サーバを起動してファイルを表示し、ブラウザチェックおこなうようにしています。なぜかというと、

  1. なるべく本番に近い環境でチェックするようにするため。

    ファイル内でサーバのドキュメントルートからの相対指定（href="/hoge/" など）となっているリンクが意図したように動作しないため。

    file: プロトコルの場合、CDN で //cdn.example.com などの指定で配信されているライブラリをそのままで読み込めないため。（参考： jQueryライブラリをCDNで読み込んでローカルで動作確認する時に注意すべきこと）

  2. スマートフォン実機でのブラウザチェックができないため。
  3. 1. 2. を解決するために都度 FTP でリモートの WEB サーバにデータをアップロードするのは効率が悪いため。

といった理由があるためです。

「ローカルで WEB サーバを立ち上げる」方法は様々ありますが、Mac の場合は標準で PHP や Python がインストールされているので、

php -S 192.168.1.xx:8000

や、

python -m SimpleHTTPServer 8000

などのコマンドで簡易的な WEB サーバを起動するのがお手軽です。
より本番に近い環境が必要であれば XAMPP などを使って、LAMP と同等なものを準備したり、Vagrant で仮想マシンを用意する方法もあるでしょう。

今回はそういった方法の中から、デバッグや、複数の端末でのブラウザチェックをおこなう際に使える便利な機能が詰まった、Browsersync というツールをご紹介したいと思います。

導入方法

まずは Node.js が使用できる環境が整っていることが前提です。
Mac であれば nodebrew、Windows であれば nodist を使用して、バージョン 4.x 系を導入することをお勧めします。（この記事では Mac の使用を前提にしています）

準備が整ったら、作業用のディレクトリを作成してその中で作業をおこないます。

mkdir -p /path/to/browsersync
cd /path/to/browsersync

作業用ディレクトリに移動したら、Node.js のパッケージ管理に使用する package.json というファイルを作成します。手動で作成することもできますが、以下のコマンドを使えば簡単に作成できます。

npm init --yes

作成されたファイルは以下のような内容になるかと思います。

{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json が作成できたら、Browsersync 本体をインストールします。

npm install --save-dev browser-sync

エラーが出なければ導入完了です。
本体は、作業ディレクトリ内の ./node_modules にインストールされます。

使用方法

Browsersync のオプション は様々用意されており、色々な使い方ができます。
もっとも一般的な使用方法は、ローカルの特定のディレクトリをドキュメントルートとして WEB サーバを立ち上げ、ブラウザからアクセスできようにする方法です。

確認用として、先ほどのディレクトリ内に htdocs ディレクトリを作成し、その中に index.html を追加しておきます。

mkdir htdocs
echo "<html><head><meta charset="utf-8"><title>Browsersync</title></head><body><h1>Browsersync Trial</h1><body></html>" > htdocs/index.html

ファイルが用意できたら、まずは単純に WEB サーバとして起動してみます。

$(npm bin)/browser-sync start --server ./htdocs

ブラウザが自動で立ち上がり、「Browsersync Trial」と表示されたかと思います。
これは、Browsersync で htdocs をドキュメントルートにして WEB サーバを起動するという指定です。
次に、一旦 Ctrl + C で停止して、以下のコマンドで立ち上げてみます。

$(npm bin)/browser-sync start --server ./htdocs --files ./htdocs

ここまではほとんど同じですが、--files <ファイルパス> という指定を加えたことで、「<ファイルパス> に指定されたファイルが編集されたら、自動でブラウザをリロードする」という機能が有効になっています。
試しに index.html を編集してみます。

echo "<html><head><meta charset="utf-8"><title>Browsersync</title></head><body><h1>Browsersync Trial</h1><p>enable --files option</p><body></html>" > htdocs/index.html

ブラウザが自動でリロードされ enable --files option が追加されたでしょうか。
このように、ファイルの更新を検知して自動でリロードをおこなってくれます。

なお、Browsersync ではその名前の通り、同じ WEB ページを開いている複数のブラウザの動作を同期するという機能があるため、特に複数のデバイスやブラウザで検証をおこなっている時こそ、この効果を感じられるでしょう。
↓こんな風に自動でリロードされます。

post_browsersync_sync.gifその他、ローカルのサイトを https で表示して、公開サーバが SSL/TLS に対応しても問題がないか確認したり、

$(npm bin)/browser-sync start start --server ./htdocs --files ./htdocs --https

リモートのサイトのプロキシとして使用して、Movable Type や WordPress などのシステムに組み込まれた WEB サイトをデバッグしたり、

$(npm bin)/browser-sync start --proxy https://www.ingsnet.co.jp/blog/

といったことができたりします。

ブラウザから操作できるデバッグ機能

Browsersync では、ブラウザの画面から操作できるデバッグ機能も用意されています。
コマンド起動時にコンソールに表示される

[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.xx:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.xx:3001
 ------------------------------------

に記載されている、UI や UI External がそのデバッグツールの URL です。
これをブラウザのローケーションバーに入力すると以下のような画面が表示されます。

post_browsersync_ui.pngこの画面上では以下のようなことがおこなえます。

  • ブラウザの同期の設定の調整（複数ブラウザ間でスクロール位置を同期するか否か、など）
  • デバッグツールを持たないデバイスでも使えるリモートデバッグ（Webkit のようなデバッグツールが使える）
  • ネットワーク通信速度のシミュレーション（遅い回線での表示が確認できる）

特に、リモートデバッグの機能は便利で、IE や Android でも Chrome でおこなうようにデバッグツールから Javascript のエラーを確認したり、CSS を書き換えて表示を確認したりできるのでとても重宝しています。

また、ネットワーク通信速度のシミュレーション機能は、場所によって通信環境が変わるスマートフォン上での表示など、実際にユーザーが使っているシーンを想定した最適化を行う際にも役立ちます。

起動コマンドを package.json にまとめる

ここまではコマンドを直接打ち込んできましたが、ちょっと面倒ですよね。
Browsersync には --config <ファイルパス> というオプションで JavaScript で記述された設定ファイルを読み込みむ機能あるのですが、この記事ではその方法とは別に冒頭に出てきた package.json を利用する方法をご紹介します。

package.json を開いてみると scripts という項目があり、初期状態では test という項目が登録されているかと思います。これは Node.js のパッケージ管理ツール npm が使用する値で、ここに任意のコマンドを登録しておくことで npm run <項目名> というように独自のコマンドを呼び出すことができるようになります。

試しに package.json を編集して、はじめに入力したコマンドを以下のように登録してみます。なお、package.json にコマンドを登録する際は、今まで記述していた $(npm bin)/ の記述が不要になります。

{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server:static": "browser-sync start --server ./htdocs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.14.0"
  }
}

保存したら以下のコマンドを実行してください。
はじめに実行したように Browsersync が起動されるかと思います。

npm run server:static

このように、残しておきたい設定を追加していけば、覚えやすいコマンド名で実行できるようになります。ローカルで作業しているサイトごとにコマンドを定義して、Browsersync の設定はこのディレクトリで管理するというルールで運用すれば便利かなと思います。
↓例えばこんな風に。

{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server:static": "browser-sync start --server ./htdocs --files ./htdocs",
    "server:static:https": "browser-sync start --server ./htdocs --files ./htdocs --https",
    "server:proxy:ings:blog": "browser-sync start --proxy https://www.ingsnet.co.jp/blog/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.14.0"
  }
}

注意： この方法は、ディレクトリ内の ./node_modules にインストールされた Browsersync を package.json の指定で読み込んで使用するので、必ず package.json が設置されたディレクトリに移動して実行しなければなりません。

One more thing...

上記のような紹介を社内の情報共有ミーティングでおこなったものの、コマンドラインツールという点で抵抗があったのか、反応がいまひとつでした...ので、誰でも使えるように GUI ツールを作りました。

post_browsersync_app.pngダウンロード

以下のリンクからそれぞれのバージョンをダウンロードして、任意のディレクトリに設置してください。
（Windows 版は解凍後のファイル全てが実行に必要です）

ご注意

  • ※当アプリはご自身の責任においてご利用ください。
  • ※ご利用の際にセキュリティの設定変更などが必要なことがあります。

使い方

  1. 「ディレクトリ」欄をクリックすると表示されるファイル選択ダイアログ、またはドラッグ＆ドロップで Browsersync で表示させたいサイトのディレクトリを指定する。
  2. 「Browsersync を起動する」ボタンをクリック。
  3. 「ブラウザの自動起動の有効化」のチェックボックスを選択する。
  4. デフォルトのブラウザが起動し、サイトが表示される。

    Mac の場合ファイアーウォールを有効にしていると以下のようなメッセージが表示されますので、「許可」をクリックしてください。

    post_browsersync_firewall_alert.png

コード

以下は今回のソースコードです。

https://github.com/hidoo/electron-browser-sync-launcher

CSS や JavaScript など Web 制作の技術でアプリをつくることができる Electron を使用しています（UI には簡単にアプリっぽく見える Photon を利用）。Node.js が導入されている環境であれば比較的手軽に始められます。

ただ、調べてみるといろいろと怖い情報もあるので、実際の業務で何か作るにはまだまだ修行が必要そうです...（私の場合）

みなさんも Browsersync で快適なブラウザチェックを楽しんでみてはいかがでしょうか。

＜制作技術グループ　丸永英男＞ イングスへのWEB制作のご相談はこちらから。

前に戻る
一覧に戻る
次に進む