Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 27 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

Recently uploaded (20)

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

  1. 1. デザイナーさんでもできる Browsersyncからはじめる作業効率化・春 Knock!Knock! Webデザイントレンド 2016 / 2016.03.12 sat SHIMIZU Kumiko
  2. 2. 自己紹介 • 浜松市を中心に活動しているWeb系おかん • デザイナー兼マークアップエンジニア • Web制作会社12年、現在フリーランス1年生 • 趣味はフィルム写真と映画鑑賞と猫 • Webアクセシビリティ興味のある方、お友達になりましょう 清水久美子 SHIMIZU Kumiko トトコトデザイン @oratnin jiumei32 Photo by @wbyn Photo by Hironobu Matsumura
  3. 3. 本日の ターゲット
  4. 4. コーディングもこなす デザイナーさん もっと早く帰りたい マークアッパーさん
  5. 5. 本日のお題
  6. 6. ところで コーディングするとき 1日何回ブラウザをリロードしていますか? 指、疲れるよ…ね?
  7. 7. そのお悩み で解決しちゃいましょう
  8. 8. ファイルの変更を検知して ブラウザをリロードしてくれる 便利なツール。無料。 Windowsでも、Macでも。 https://www.browsersync.io/
  9. 9. なにが できる?
  10. 10. なにができる? ファイルの更新を 検知してブラウザを 自動でリロード その1
  11. 11. なにができる? スクロールやクリック ページ遷移などを ブラウザ間で同期 その2
  12. 12. なにができる? 同じWi-Fi内の モバイル端末や PCで動作確認ができる その3
  13. 13. なにができる? • モバイル端末のデバッグ • 低速回線のシミュレート • CSSの可視化 • グリッドの表示 など Responsive Web Design Testerが便利 ほかに
  14. 14. マルチデバイス時代の 強い味方!
  15. 15. DEMO
  16. 16. でも… 難しいん でしょう?
  17. 17. それが案外 簡単 なんですよ
  18. 18. 用意するもの Browsersync …と、少しの英語力とやる気 Node.js黒い画面 コマンドプロンプト ターミナル
  19. 19. 導入の手順 STEP 1 Node.jsをインストール STEP 2 npm の設定ファイルを作る STEP 3 Browsersyncをインストール STEP 4 起動のための設定をする
  20. 20. たったの、これだけ! できそうな気が…しませんか?
  21. 21. DEMO 本日のお試し用デモファイル https://github.com/oratnin/browsersync_demo
  22. 22. まとめ
  23. 23. 導入は明日からでも、 年度末で忙しい人は 新年度 からでも! 1. 日々の小さな作業は自動化できる 3. 導入は 意外 と 簡単! Browsersyncの詳しい設定方法は、追ってブログで公開予定です。 2. Browsersync はファイル変更を検知・リロード
  24. 24. Browsersync から 作業効率化、はじめてみよう!
  25. 25. ご清聴ありがとうございました! Thank You @oratnin jiumei32 http://totoco.org/ All Photographs by SHIMIZU Kumiko
  26. 26. Thank You All Photographs by SHIMIZU Kumiko https://creativemarket.com/pixelbazaar/ Thanks to FLATILICIOUS by Pixel Bazaar

×