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

Transcript

1. デザイナーさんでもできる Browsersyncからはじめる作業効率化・春 Knock!Knock! Webデザイントレンド 2016 / 2016.03.12 sat SHIMIZU Kumiko

2. 自己紹介 • 浜松市を中心に活動しているWeb系おかん • デザイナー兼マークアップエンジニア • Web制作会社12年、現在フリーランス1年生 • 趣味はフィルム写真と映画鑑賞と猫 •

   Webアクセシビリティ興味のある方、お友達になりましょう 清水久美子 SHIMIZU Kumiko トトコトデザイン @oratnin jiumei32 Photo by @wbyn Photo by Hironobu Matsumura

3. 本日の ターゲット

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

5. 本日のお題

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

7. そのお悩み で解決しちゃいましょう URGGFWR

8. ファイルの変更を検知して ブラウザをリロードしてくれる 便利なツール。無料。 Windowsでも、Macでも。 https:/ /www.browsersync.io/

9. なにが できる？

10. なにができる？ ファイルの更新を 検知してブラウザを 自動でリロード その1

11. なにができる？ スクロールやクリック ページ遷移などを ブラウザ間で同期 その2

12. なにができる？ 同じWi-Fi内の モバイル端末や PCで動作確認ができる その3

13. なにができる？ • モバイル端末のデバッグ • 低速回線のシミュレート • CSSの可視化 • グリッドの表示　など Responsive

    Web Design Testerが便利 ほかに
14. None

15. マルチデバイス時代の 強い味方！

16. DEMO

17. でも… 難しいん でしょう? 槄׳נ؊ طٷ׼ؤּ

18. それが案外 簡単 なんですよ 䲢 ؇ ؞  ؃ ש ا

    ק ؆ 獑

19. 用意するもの Browsersync …と、少しの英語力とやる気 Node.js 黒い画面 コマンドプロンプト ターミナル

20. 導入の手順 STEP 1 Node.jsをインストール STEP 2 npm の設定ファイルを作る STEP 3

    Browsersyncをインストール STEP 4 起動のための設定をする

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

22. DEMO 本日のお試し用デモファイル https:/ /github.com/oratnin/browsersync_demo ؚ ׶ ؋  嵇 ׳

    ؂ ؛ ؂

23. まとめ

24. 導入は明日からでも、 年度末で忙しい人は 新年度 からでも！ 1. 日々の小さな作業は自動化できる 3. 導入は 意外 と

    簡単！ Browsersyncの詳しい設定方法は、追ってブログで公開予定です。 2. Browsersync はファイル変更を検知・リロード

25. Browsersync から 作業効率化、 はじめてみよう！

26. ご清聴ありがとうございました！ Thank You @oratnin jiumei32 http://totoco.org/ All Photographs by SHIMIZU

    Kumiko

27. Thank You All Photographs by SHIMIZU Kumiko https:/ /creativemarket.com/pixelbazaar/ Thanks

    to FLATILICIOUS by Pixel Bazaar