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.
自動化のことはじめ
第12回HTML5ビギナーズ

目指せ脱初心者!現場で使われている実践スキルとは?
Tomoki Kubo
株式会社まぼろし

マークアップエンジニア

ブログ: KOJIKA17

Adobe Creative Stationにて、Emmetの連載中
Web制作で注目されている
自動化ツール
The JavaScript Task Runner
ですが!
自動化とは?
自動化とは?
人手による作業を、機械(コンピューター)の
自動によるように変えること。
反復作業が自動化に向いている
でも、なんか難しそう…
身近で機械に任せてること
文字の置き換えを手でやった場合
• 「目視で確認」「選択」「置き換え」
• 置き換えの数が多かったり、複雑になると、

必ず漏れやミスが起きやすい
検索・置換
Web制作では、
どんな作業を自動化できるか
Web制作の作業
• ブラウザで更新ボタンを押す
• スマートフォンなどの実機確認
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコン...
• LiveReload, Browsersync
• スマートフォンなどの実機確認
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコ...
• LiveReload, Browsersync
• Browsersync
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイ...
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, Coffee...
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, Coffee...
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• minifyツール
• 結合ツール(concat)
• Sass, CoffeeScript
Web制作の作業
たくさんのツールを
動かす方が大変
The JavaScript Task Runner
コマンド1つで、
好きな作業を
自動化するツール
gulp.jsを利用する手順
1. Node.js
2. package.json
3. gulpfile.js
ターミナル
コマンドプロンプト
PowerShell
バージョン管理ツールを使いましょう
Mac

- nodebrew
Windows

- nodist
gulpの詳しい使い方
反復作業は
機械に任せよう
自動化のメリット
• 複雑な作業手順の単純化
• 時間の短縮
• ヒューマンエラー・品質の向上
Credits Image
• Photo by: cloch hands | Flickr - Photo Sharing! 

https://www.flickr.com/photos/normanlowery/4694429893/in/...
自動化して定時に帰りましょう。
ありがとうございました。
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

Upcoming SlideShare
Loading in …5
×

自動化のことはじめ - 第12回HTML5ビギナーズ


1,470 views

Published on

目指せ脱初心者!現場で使われている実践スキルとは?

Published in: Technology
  • Be the first to comment

自動化のことはじめ - 第12回HTML5ビギナーズ


  1. 1. 自動化のことはじめ 第12回HTML5ビギナーズ
 目指せ脱初心者!現場で使われている実践スキルとは?
  2. 2. Tomoki Kubo 株式会社まぼろし
 マークアップエンジニア
 ブログ: KOJIKA17
 Adobe Creative Stationにて、Emmetの連載中
  3. 3. Web制作で注目されている 自動化ツール
  4. 4. The JavaScript Task Runner
  5. 5. ですが!
  6. 6. 自動化とは?
  7. 7. 自動化とは? 人手による作業を、機械(コンピューター)の 自動によるように変えること。
  8. 8. 反復作業が自動化に向いている でも、なんか難しそう…
  9. 9. 身近で機械に任せてること
  10. 10. 文字の置き換えを手でやった場合 • 「目視で確認」「選択」「置き換え」 • 置き換えの数が多かったり、複雑になると、
 必ず漏れやミスが起きやすい
  11. 11. 検索・置換
  12. 12. Web制作では、 どんな作業を自動化できるか
  13. 13. Web制作の作業 • ブラウザで更新ボタンを押す • スマートフォンなどの実機確認 • 後方互換のための記述(ベンダープレフィックスなど) • CSS, JSファイルをminify • CSS, JSファイルを1ファイル結合 • メタ言語のコンパイル(Sass, CoffeeScriptなど)
  14. 14. • LiveReload, Browsersync • スマートフォンなどの実機確認 • 後方互換のための記述(ベンダープレフィックスなど) • CSS, JSファイルをminify • CSS, JSファイルを1ファイル結合 • メタ言語のコンパイル(Sass, CoffeeScriptなど) Web制作の作業
  15. 15. • LiveReload, Browsersync • Browsersync • 後方互換のための記述(ベンダープレフィックスなど) • CSS, JSファイルをminify • CSS, JSファイルを1ファイル結合 • メタ言語のコンパイル(Sass, CoffeeScriptなど) Web制作の作業
  16. 16. • LiveReload, Browsersync • Browsersync • autoprefixer • CSS, JSファイルをminify • CSS, JSファイルを1ファイル結合 • メタ言語のコンパイル(Sass, CoffeeScriptなど) Web制作の作業
  17. 17. • LiveReload, Browsersync • Browsersync • autoprefixer • CSS, JSファイルをminify • CSS, JSファイルを1ファイル結合 • メタ言語のコンパイル(Sass, CoffeeScriptなど) Web制作の作業
  18. 18. • LiveReload, Browsersync • Browsersync • autoprefixer • minifyツール • 結合ツール(concat) • Sass, CoffeeScript Web制作の作業
  19. 19. たくさんのツールを 動かす方が大変
  20. 20. The JavaScript Task Runner
  21. 21. コマンド1つで、 好きな作業を 自動化するツール
  22. 22. gulp.jsを利用する手順 1. Node.js 2. package.json 3. gulpfile.js
  23. 23. ターミナル コマンドプロンプト PowerShell
  24. 24. バージョン管理ツールを使いましょう Mac
 - nodebrew Windows
 - nodist
  25. 25. gulpの詳しい使い方
  26. 26. 反復作業は 機械に任せよう
  27. 27. 自動化のメリット • 複雑な作業手順の単純化 • 時間の短縮 • ヒューマンエラー・品質の向上
  28. 28. Credits Image • Photo by: cloch hands | Flickr - Photo Sharing! 
 https://www.flickr.com/photos/normanlowery/4694429893/in/photolist-9nSkbp-bAh7oK-5myxh7-7K8qWk-2jpkcW-89Qbsr-7mzwVH- dRHg9G-89R8Mo-dR19JG-e7aAgt-5jRRKF-5AQ3aC-5AKLsR-4v5TD8-hZ4s3-ee7hoD-aWH2Ex-pL3MwS-pKYLFp-bnE619-76Z1LN-76V4AP-85bQJY- e8Z6dG-5MMLHK
  29. 29. 自動化して定時に帰りましょう。 ありがとうございました。

×