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

Knock!Knock! Webデザイントレンド 2016（2016.03.12）のショートセッション発表資料です。

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が便利 ほかに
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