デザイナーさんでもできる Browsersync からはじめる作業効率化

デザイナーさんでもできる 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