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からはじめる作業効率化
2016.01.23 Dorpamine vol.1 qumiko totoco (@oratnin)
Ŏ
自己紹介
• 静岡県西部を中心に活動しているWeb系おかん
• デザイナー兼マークアップエンジニア
• 趣味はフィルム写真と映画鑑賞
• Webアクセシビリティ興味のある方お友達になりましょう
qumiko totoco
トトコトデザイン
@o...
本日の
ターゲット
コーディングもこなす
デザイナーさん
早く家に帰りたい
マークアッパーさん
ところで
コーディングするとき
1日何回ブラウザをリロードしていますか?
指、疲れるよ…ね?
そこで
本日のお題
それ、
Browsersync
で解決しちゃいましょう
ファイルの変更を検知して
ブラウザをリロードしてくれる
便利なツール
使うもの
Node.js黒い画面 Browsersync
…と、少しのやる気
今日はMacの場合で説明します。
DEMO
デモファイルのダウンロード
https://github.com/oratnin/dorpamine01_demo
環境を
作ってみよう
STEP 1 Node.jsをインストール
https://nodejs.org/
STEP 2 npm の設定ファイルを作る
package.json
$ cd ~/project-name
$ npm init
STEP 3 Browsersyncをインストール
$ npm install browser-sync
https://www.browsersync.io/Browsersync
STEP 4
package.jsonにリロード対象と
起動するための設定を追記する
package.json
"scripts":{
 "start":"browser-sync start --server --files='./*'"
}...
STEP 5 起動してみよう!
$ npm start
STEP 6 ブラウザが起動して
localhost:3000 が表示される
ファイルを修正して保存すると…
リロードされた!
たったの、これだけ!
できそうな気が…しませんか?
こんなこともできる
• 複数のブラウザで同時にリロードや         
スクロール、ページ遷移も同期
• 同じネットワーク(Wi-Fi)内のモバイル端末や    
PCでも動作の確認が可能
• 他のツールを組み合わせで出来ることが広がる
まとめ
小さな自動化の積み重ねで
時間と気持ちにゆとりを!
1. 日々の小さな作業は自動化ができる
3. ツールの組み合わせで出来ることが広がる
2. Browsersync はファイル変更を検知・リロード
Browsersyncの詳しい設定方法は、追...
Browsersync から
作業効率化はじめよう!
ご清聴ありがとうございました!
Thank You
All photographs taken by me.
https://creativemarket.com/pixelbazaar/
Thanks to
FLATILICIOUS by Pixel Bazaar
and
https://ww...
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
Upcoming SlideShare
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

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

Download to read offline

2016年1月23日 Dorpamine Vol.1 「みんなの開発環境」LT スライド

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からはじめる作業効率化 2016.01.23 Dorpamine vol.1 qumiko totoco (@oratnin) Ŏ
  2. 2. 自己紹介 • 静岡県西部を中心に活動しているWeb系おかん • デザイナー兼マークアップエンジニア • 趣味はフィルム写真と映画鑑賞 • Webアクセシビリティ興味のある方お友達になりましょう qumiko totoco トトコトデザイン @oratnin
  3. 3. 本日の ターゲット
  4. 4. コーディングもこなす デザイナーさん 早く家に帰りたい マークアッパーさん
  5. 5. ところで コーディングするとき 1日何回ブラウザをリロードしていますか? 指、疲れるよ…ね?
  6. 6. そこで 本日のお題
  7. 7. それ、 Browsersync で解決しちゃいましょう
  8. 8. ファイルの変更を検知して ブラウザをリロードしてくれる 便利なツール
  9. 9. 使うもの Node.js黒い画面 Browsersync …と、少しのやる気 今日はMacの場合で説明します。
  10. 10. DEMO デモファイルのダウンロード https://github.com/oratnin/dorpamine01_demo
  11. 11. 環境を 作ってみよう
  12. 12. STEP 1 Node.jsをインストール https://nodejs.org/
  13. 13. STEP 2 npm の設定ファイルを作る package.json $ cd ~/project-name $ npm init
  14. 14. STEP 3 Browsersyncをインストール $ npm install browser-sync https://www.browsersync.io/Browsersync
  15. 15. STEP 4 package.jsonにリロード対象と 起動するための設定を追記する package.json "scripts":{  "start":"browser-sync start --server --files='./*'" } • ここでは package.json と同階層(~/project-name)のファイ ルに変更があったとき、リロードするようにしています。
  16. 16. STEP 5 起動してみよう! $ npm start
  17. 17. STEP 6 ブラウザが起動して localhost:3000 が表示される ファイルを修正して保存すると… リロードされた!
  18. 18. たったの、これだけ! できそうな気が…しませんか?
  19. 19. こんなこともできる • 複数のブラウザで同時にリロードや          スクロール、ページ遷移も同期 • 同じネットワーク(Wi-Fi)内のモバイル端末や     PCでも動作の確認が可能 • 他のツールを組み合わせで出来ることが広がる
  20. 20. まとめ
  21. 21. 小さな自動化の積み重ねで 時間と気持ちにゆとりを! 1. 日々の小さな作業は自動化ができる 3. ツールの組み合わせで出来ることが広がる 2. Browsersync はファイル変更を検知・リロード Browsersyncの詳しい設定方法は、追ってブログで公開予定です。 http://totoco.org/
  22. 22. Browsersync から 作業効率化はじめよう!
  23. 23. ご清聴ありがとうございました! Thank You
  24. 24. All photographs taken by me. https://creativemarket.com/pixelbazaar/ Thanks to FLATILICIOUS by Pixel Bazaar and https://www.eyeem.com/u/fotoco_org
  • syuichitsuji

    Jan. 24, 2016

2016年1月23日 Dorpamine Vol.1 「みんなの開発環境」LT スライド

Views

Total views

1,073

On Slideshare

0

From embeds

0

Number of embeds

150

Actions

Downloads

2

Shares

0

Comments

0

Likes

1

×