デザイナーさんでもできる
Browsersyncからはじめる作業効率化
2016.01.23 Dorpamine vol.1 qumiko totoco (@oratnin)
Ŏ

自己紹介
• 静岡県西部を中心に活動しているWeb系おかん
• デザイナー兼マークアップエンジニア
• 趣味はフィルム写真と映画鑑賞
• Webアクセシビリティ興味のある方お友達になりましょう
qumiko totoco
トトコトデザイン
@oratnin

本日の
ターゲット

コーディングもこなす
デザイナーさん
早く家に帰りたい
マークアッパーさん

ところで
コーディングするとき
1日何回ブラウザをリロードしていますか？
指、疲れるよ…ね？

そこで
本日のお題

それ、
Browsersync
で解決しちゃいましょう

ファイルの変更を検知して
ブラウザをリロードしてくれる
便利なツール

使うもの
Node.js黒い画面 Browsersync
…と、少しのやる気
今日はMacの場合で説明します。

DEMO
デモファイルのダウンロード
https://github.com/oratnin/dorpamine01_demo

環境を
作ってみよう

STEP 1 Node.jsをインストール
https://nodejs.org/

STEP 2 npm の設定ファイルを作る
package.json
$ cd ~/project-name
$ npm init

STEP 3 Browsersyncをインストール
$ npm install browser-sync
https://www.browsersync.io/Browsersync

STEP 4
package.jsonにリロード対象と
起動するための設定を追記する
package.json
"scripts":{
"start":"browser-sync start --server --files='./*'"
}
• ここでは package.json と同階層（~/project-name）のファイ
ルに変更があったとき、リロードするようにしています。

STEP 5 起動してみよう！
$ npm start

STEP 6 ブラウザが起動して
localhost:3000 が表示される
ファイルを修正して保存すると…
リロードされた！

たったの、これだけ！
できそうな気が…しませんか？

こんなこともできる
• 複数のブラウザで同時にリロードや
スクロール、ページ遷移も同期
• 同じネットワーク(Wi-Fi)内のモバイル端末や
PCでも動作の確認が可能
• 他のツールを組み合わせで出来ることが広がる

まとめ

小さな自動化の積み重ねで
時間と気持ちにゆとりを！
1. 日々の小さな作業は自動化ができる
3. ツールの組み合わせで出来ることが広がる
2. Browsersync はファイル変更を検知・リロード
Browsersyncの詳しい設定方法は、追ってブログで公開予定です。
http://totoco.org/

Browsersync から
作業効率化はじめよう！

ご清聴ありがとうございました！
Thank You

All photographs taken by me.
https://creativemarket.com/pixelbazaar/
Thanks to
FLATILICIOUS by Pixel Bazaar
and
https://www.eyeem.com/u/fotoco_org