2015年10月31日に東京で開催された WordCamp Tokyo 2015 で、gulp.js を使うための基礎のハンズオンに登壇してきました。
【ハンズオン】まだタスクランナー使っていないって本当（マジ）？仕事に対する効率化意識向上のためのgulpハンズオン
先日も、一度エントリーは書いていますが、今回はフォローアップの内容にて。
WordCamp Tokyo 2015 ハンズオンに登壇してきました
制作における、何度も何度も行うような作業を自動化してくれるためのツール「gulp.js」について、今回のハンズオンでは、使い方の便利な機能あれこれ的な話ではなく、基礎的な部分のどうやって使うのか、タスクを登録していくのかという部分に焦点をあてて90分という短い時間でしたがハンズオンをしてきました。
開催されてすでに２週間近くたってしまったのですが、細々と基礎のエントリーをまとめていたら、そこそこ時間かかってしまいました。遅くなりましたがフォローアップとしてまとめようと思います。
(´ ;ム; ` ) < 遅くなったー
別エントリーにまとめました
gulp の使い方については、別エントリーに基礎の一通りをまとめました。
当日お話できなかった部分などを盛り込んでみています（といっても BrowserSync についてはさらに別エントリーを書こうと思うので、まとまっていませんが。。。）
gulp.js を今一度キチンと！gulp.js 導入基礎 - HAM MEDIA MEMO
ボリュームある内容になってしまったのですが、最後まで読んでもらえたら嬉しいです。
表記は lowercase の「gulp」
基礎のエントリー最後にも書いたのですが、これまで gulp の最初の文字は小文字の g なのか 大文字の G なのか、どっちなのか！？と迷っていたのですが、ちゃんと明記されているのを見つけました。
gulp is always lowercase. The only exception is in the gulp logo where gulp is capitalized.
引用元：GitHub : gulp/FAQ.md at master · gulpjs/gulp
ロゴの場合は大文字のだけど、ロゴ以外は lowercase だから gulp って表記するのが正しいようです。今後の参考として。
森川さん（tecking）のスライド
ハンズオンの前の導入として、森川さんにお話いただいた導入スライドも共有しておきます。
ついでに私のスライドも
私も利用したスライドを、当日のから必要部分に絞って公開しておきます。
補足：私の作業手順
私の作業は WordPress にかぎらず、静的HTMLでの納品を求められるケースが多いため、直接テーマファイルに書いて作成を進めるのではなく、静的ファイル前提で一度作成をしてしまいます。当日の会場にいた他の世話役の皆さんなどは、直接テーマファイルを作成して進めるとのことなので、私のようなワークフローをとるケースは少ないのかもしれません。
作業フローごとに制作担当者が別でも入れるように、分業できる形のスタイルをとっていることもあって、上記のようなワークフローになっています。分業できることのメリットとして専門の分野に特化できるというのもあります。一人でデザインからテーマ作成までしてしまうようなケースには必要のないフローかもしれませんが、システムにいれないと確認ができないという状況を出来る限り少なく確認にかける時間を短くするためにも一度静的で作成することを個人的には推奨しています。
そんなフローをとっていることもあり、テーマファイル作成や他のCMSのテンプレート作成前に、静的HTMLを作成する作業を楽にするため、スライドにも入れてた静的HTMLジェネレータを使って、共通部分を分けて進めています。
このフローをとっていると、WordPress の固定ページで用意しなければならない場合でもスムーズに進めることができます。
静的HTMLで作成 → コピペだけで固定ページの登録
繰り返し部分やテーマになることを考慮したHTML
静的HTMLの作成を必ず挟むワークフローをとっていると、直接テーマにマークアップから入れている人によく言われることとして「繰り返しなどの部分で手間になるデザイナーが多い」ということをよく聞いたりします。確かにその通りで、テーマにしづらい・手間になるコーディングをしてしまうフロントの人が多い印象です。また、文字数が伸びる・少なくなるということも考慮できていなかったりなど。
その点については、私や私と一緒に仕事をしているコーディング担当はその辺まで考慮して制作をしているため、自信を持って分業を主として静的HTML作成部分の作業を受けています。
分業できるようにしておくメリット
尚、分業して進められるようにしておくメリットとして、作業時間短縮や作業時間が突如取れなくなるなどリソース不足になった場合に、別の人に引き継ぎやすくなるということがあげられます。
HTMLの作業は早いんだけど、テーマ作成がまだ遅いというようなケースでも、逆にテーマ作成は得意だけどHTMLの作業が遅いなどという場合にもぱっと他に作業をふるということができるようになります。後者のケースの場合は、テーマ作成前提のコーディングができる人に回しておかないと面倒になるケースもあったりしますが、分業する際に、注意点やチェックポイントをドキュメントなどで共有しておくことで、問題になる状態を極力減らしながら進められたりします（うまくいくかは技術力次第でもありますが）。
以上、当日話をしてのワークフローの違いをスライドに入れ忘れたためにポカーンとしてしまった部分の補足でした。皆さんのHTMLのコーディングからテーマ作成のワークフローはいかがでしょうか？
最後に
今回の WordCamp Tokyo 2015 にハンズオンセッションで参加するにあたって、準備進行してくださったスタッフの皆さん、ありがとうございました。中でも、担当してくださった 齋木さん、事前準備やら打ち合わせなどなど、大変お世話になりました。
そして、当日のハンズオンセッションで世話役だった森川さん、Toro_Unitさん、北島さん、くっくるさん、皆さんからたくさんのフォローいただきありがとうございました。今回皆さんと進行することができて、本当によかったです。ハンズオン最中ではバージョン違いやらコチラの想定していないエラーなどなどありましたが、無事に進められたのはみなさんのお陰です。本当にありがとうございました。
ハンズオンでは、今回のエントリーでも書いたような基礎部分しかお伝えすることはできなかったり、進行にうまくいかない部分があったりと、大変失礼いたしました。特に WordPress との組み合わせの部分は、事前にインストールしてきてねと伝えたのに触れる時間を取れなかったりとしてしまって申し訳なかったです。代わりといってはなんですが、当日お話したことや本エントリーなどを機会にちょっとでも触れてみて、活用できるところがあれば積極的に取り入れてもらい、効率化の意識の向上に繋げられたら嬉しいです。
最初に書いたように、別エントリーにまとめた基礎部分をまずは確認をしてください。
そして、もっとこんな情報が欲しいや、ここに躓いた！などの問題があれば、その際はコメントやダイレクトメッセージなどを利用して是非私までご一報ください。全てをフォローできるかわかりませんが、できる範囲ではお答えしたいと思います。
