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

of

デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 1 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 2 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 3 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 4 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 5 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 6 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 7 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 8 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 9 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 10 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 11 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 12 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 13 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 14 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 15 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 16 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 17 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 18 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 19 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 20 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 21 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 22 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 23 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 24 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 25 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 26 デザイナーさんでもできる Browsersync からはじめる作業効率化・春 Slide 27
Upcoming SlideShare
デザイナーさんでもできる Browsersync からはじめる作業効率化
Next

1 Like

Share

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

Knock!Knork! Webデザイントレンド2016(2016年3月12日開催)の発表資料です。

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

デザイナーさんでもできる 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
  • wakakohiramatsu

    Apr. 6, 2016

Knock!Knork! Webデザイントレンド2016(2016年3月12日開催)の発表資料です。

Views

Total views

1,493

On Slideshare

0

From embeds

0

Number of embeds

819

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×