SlideShare a Scribd company logo
1 of 35
Download to read offline
自動化のことはじめ
第12回HTML5ビギナーズ

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

マークアップエンジニア

ブログ: KOJIKA17

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

必ず漏れやミスが起きやすい
検索・置換
Web制作では、
どんな作業を自動化できるか
Web制作の作業
• ブラウザで更新ボタンを押す
• スマートフォンなどの実機確認
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, CoffeeScriptなど)
• LiveReload, Browsersync
• スマートフォンなどの実機確認
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, CoffeeScriptなど)
Web制作の作業
• LiveReload, Browsersync
• Browsersync
• 後方互換のための記述(ベンダープレフィックスなど)
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, CoffeeScriptなど)
Web制作の作業
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, CoffeeScriptなど)
Web制作の作業
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル(Sass, CoffeeScriptなど)
Web制作の作業
• 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/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
自動化して定時に帰りましょう。
ありがとうございました。

More Related Content

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


Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Hideki Akiba
 
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)Hiroshi Kawada
 
【オンライン】.NET 6 移行祭り! C# Tokyo イベント
【オンライン】.NET 6 移行祭り! C# Tokyo イベント【オンライン】.NET 6 移行祭り! C# Tokyo イベント
【オンライン】.NET 6 移行祭り! C# Tokyo イベントTatsuya Ishikawa
 
お手軽作業自動化入門
お手軽作業自動化入門お手軽作業自動化入門
お手軽作業自動化入門高見 知英
 
退屈なブラウザ作業をpuppeteerにやらせたいお話
退屈なブラウザ作業をpuppeteerにやらせたいお話退屈なブラウザ作業をpuppeteerにやらせたいお話
退屈なブラウザ作業をpuppeteerにやらせたいお話Tadashi Nemoto
 
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみたFirefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみたNobuhiro Ueda
 
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよプロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよYoshiki Kojima
 
Web API のすすめ
Web API のすすめWeb API のすすめ
Web API のすすめYuji Shimada
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発tomo_masakura
 
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話Kaoru Kitauchi
 
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜kusukawa
 
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上Tatsuya Ishikawa
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない ZYasufumi Nishiyama
 
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編Kenji Fukumoto
 
Power Automateを使ってみた
Power Automateを使ってみたPower Automateを使ってみた
Power Automateを使ってみたMakoto Nishimura
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかYoichi Toyota
 
【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?ごろう 野村
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化高見 知英
 

Similar to 自動化のことはじめ - 第12回HTML5ビギナーズ
 (20)

Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
 
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
 
【オンライン】.NET 6 移行祭り! C# Tokyo イベント
【オンライン】.NET 6 移行祭り! C# Tokyo イベント【オンライン】.NET 6 移行祭り! C# Tokyo イベント
【オンライン】.NET 6 移行祭り! C# Tokyo イベント
 
Chrome 拡張のご紹介
Chrome 拡張のご紹介Chrome 拡張のご紹介
Chrome 拡張のご紹介
 
お手軽作業自動化入門
お手軽作業自動化入門お手軽作業自動化入門
お手軽作業自動化入門
 
SIMD.js(ECMAScript 7)
SIMD.js(ECMAScript 7)SIMD.js(ECMAScript 7)
SIMD.js(ECMAScript 7)
 
退屈なブラウザ作業をpuppeteerにやらせたいお話
退屈なブラウザ作業をpuppeteerにやらせたいお話退屈なブラウザ作業をpuppeteerにやらせたいお話
退屈なブラウザ作業をpuppeteerにやらせたいお話
 
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみたFirefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
Firefox os勉強会 2nd WEB屋さんがWEBアプリを作ってみた
 
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよプロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
 
Web API のすすめ
Web API のすすめWeb API のすすめ
Web API のすすめ
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
 
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話
 
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜
小さな自動化から始める快適お仕事生活〜ラズパイ+Node-REDでローコードに自動化しよう〜
 
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
 
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
FriendlyによるWindowsアプリテスト自動化手法 基礎技術編
 
Power Automateを使ってみた
Power Automateを使ってみたPower Automateを使ってみた
Power Automateを使ってみた
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?【提案】(それぐらい)運用側で保守してもらえませんか?
【提案】(それぐらい)運用側で保守してもらえませんか?
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化
 

More from 知己 久保

ラクするCSSツール
ラクするCSSツールラクするCSSツール
ラクするCSSツール知己 久保
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ知己 久保
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則知己 久保
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015知己 久保
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS知己 久保
 
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~知己 久保
 

More from 知己 久保 (7)

L
LL
L
 
ラクするCSSツール
ラクするCSSツールラクするCSSツール
ラクするCSSツール
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
 
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
 

Recently uploaded

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 

Recently uploaded (7)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 

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