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

デザイナーさんでもできる Browsersyncからはじめる作業効率化・春 Knock!Knock! Webデザイントレンド 2016 / 2016.03.12 sat SHIMIZU Kumiko

自己紹介 • 浜松市を中心に活動しているWeb系おかん • デザイナー兼マークアップエンジニア • Web制作会社12年、現在フリーランス1年生 • 趣味はフィルム写真と映画鑑賞と猫 •
Webアクセシビリティ興味のある方、お友達になりましょう清水久美子 SHIMIZU Kumiko トトコトデザイン @oratnin jiumei32 Photo by @wbyn Photo by Hironobu Matsumura

本日のターゲット

コーディングもこなすデザイナーさんもっと早く帰りたいマークアッパーさん

本日のお題

ところでコーディングするとき 1日何回ブラウザをリロードしていますか？指、疲れるよ…ね？

そのお悩みで解決しちゃいましょう URGGFWR

ファイルの変更を検知してブラウザをリロードしてくれる便利なツール。無料。 Windowsでも、Macでも。 https:/ /www.browsersync.io/

なにができる？

なにができる？ファイルの更新を検知してブラウザを自動でリロードその1

なにができる？スクロールやクリックページ遷移などをブラウザ間で同期その2

なにができる？同じWi-Fi内のモバイル端末や PCで動作確認ができるその3

なにができる？ • モバイル端末のデバッグ • 低速回線のシミュレート • CSSの可視化 • グリッドの表示　など Responsive
Web Design Testerが便利ほかに

マルチデバイス時代の強い味方！

でも… 難しいんでしょう? 槄׳נ؊ طٷ׼ؤּ

それが案外簡単なんですよ䲢 ؇ ؞ ؃ ש ا
ק ؆ 獑

用意するもの 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 からはじめる作業効率化・春

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

ShimiKumi

More Decks by ShimiKumi

Other Decks in Programming

Featured

Transcript