2016年1月23日 Dorpamine Vol.1 「みんなの開発環境」LT スライド

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

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

3. 本日の
ターゲット

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

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

6. そこで
本日のお題

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

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

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

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

11. 環境を
作ってみよう

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

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

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

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

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

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

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

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

20. まとめ

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

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

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

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