Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Cfdeb7e141681ce7d2dcdedc1d2ab736?s=128

ShimiKumi

March 12, 2016
Tweet

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