1. Yeoman
RIAビルドツール超入門
第6回HTML5など勉強会
2013.3.21
Bathtimefish 村岡 正和

2. 自己紹介
むらおか まさかず
村岡正和 @bathtimefish
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス
ティバル実行委員など
HTML5-WEST.jp
HTML5 JavaScript
Python
中国拳法 主夫になりたい
炊事 Google Apps
http://html5-west.jp/

3. ブログはじめました。
http://bathtimefish.hatenablog.com/
スターつけてもらったり
リツイートされたりすると結構うれしいもんですね :)

4. まずは余談から

5. 昨日までのおはなし
いままでyeoman0.9をつかって仕
事してきてます。
ほんで先日「そろそろスライドつく
らなー」と思って本家みたら、、、

6. 昨日までのおはなし
いつのまにか1.0 betaリリース

7. 大幅に仕様かわっとる！

8. ( .. ;)φ 再修行...
なんとか間に合いました

9. 今日は1.0betaのお話です。

10. 昨日までのおはなし
0.9以前つかってる人は migrate guideを
読みましょう。

11. 今日のおはなし
RIAとかイマドキっぽいWebサイト
制作のときにいろいろメンドイこと
があって、

12. 今日のおはなし
それを自動化してくれるビルドツー
ルつかったらいいんじゃね？

13. 今日のおはなし
で、Yeomanがよくね？という
おはなし。
Yoemanつかったことない人向けに
カンタンな紹介をします。

14. おはなしの流れ
•制作でめんどうなこと
•Yeomanの紹介
•セットアップ
•とりあえず使えるコマンド
•実際に使ってみる
•まとめ

15. つくりたいってなったら、

16. さっさと集中したい、

17. テキトーな準備で。

18. あったらいいなあ、でも下準備めんど
いなあと思ういろいろ。
• ディレクトリ構成
• ローカルWebサーバー
• CoffeeとかSassとか使う場合のコンパイル設定
• クロスプラットフォームなページのスケルトン。
ベストプラクティスなやつ。
• 最適化、軽量化
• いいかんじのライブラリとかプラグインさがすの
etc...

19. 全部テキトーに
やってくれる

20. だれが？

21. このオッサンが。

22. Yeoman

23. http://yeoman.io/

25. い ざ と い う と き の 際 立 っ た 働 き
Yeoman s service
デキるオッサン

26. こんな人にモロに刺さります。
• 制作テンプレ持ってない。つーか作るのメンドイ
• 最近JavaScript書いてない。Coffee依存症
• 最適化・軽量化に細かいこだわりはない。いい感じ
にやってほしい
• Sass最高ヒャッハー！ こんなの
• もうCompassでいいです
• もうBootstrapでいいです

27. セットアップ

28. 黒い画面で、

29. npm install -g yo grunt-cli bower

30. ...と、そのまえに入れておくもの。
node.js (>=0.8.0)
ruby
compass
※ grunt0.3以前をインストールしている場合、アンインストールしておく。

31. Yeomanを構成するツール
•yo scaffolding project
•bower package manager
•grunt task runner

32. Yo
•Yeomanのプロジェクトを生成する
$ yo webapp
angular, backbone, ember, chromeapp...
様々なフレームワークのscaffoldingが可能。
HTML5 Boilerplate, Gruntfile.js, component.json,
node_modulesの自動配置。

33. Bower
•JSライブラリのパッケージマネージャ
$ bower install underscore
install, search, list, update...
JSライブラリ、jQueryプラグインなどを検索してapp/
componentsに自動インストール。既存ライブラリの管
理に便利。

34. Grunt
•JSベースの作業自動化ツール
$ grunt server
server, build, test, clean...
様々な作業を自動化、ローカルWebサーバー起動、フ
ァイル更新監視、リリースビルド、テストetc...
制作時の中核的ツール。はっきりいって神！

35. 実際につかってみる。

36. とりあえずコーディングはじめる前の
じゅもん
yo webapp
npm install && bower install
grunt server

37. リリースの呪文
grunt build
or
grunt server:dist

38. RIA開発の作業効率が
アップすると思います

39. ニーズがあるならそのうち勉強会やる
かも。興味あったら教えてください。

40. happy

41. coding.

42. Thanks.