YeomanHTML5 Webアプリ開発を効率化するツールの紹介

Chrome+HTML5 Developers Live Japan #42013.4.25

Bathtimefish 村岡 正和

つかってみよう！

join this live!

http://goo.gl/DXK5L

マークアップ部発足！

html5j.org

初代 部長になりました。

マークアップも楽しいですよケロ！

今日のおはなし

HTML5でイマドキっぽいWebサイトやWebアプリをつくるときにいろいろメンドイことがあって、

今日のおはなし

メンドイことがいい感じに自動的になったりしたらめんどくなくていいんだけどナンかいいのない？

今日のおはなし

それ、Yeomanでできるよ。というおはなし。

Yoemanつかったことない人向けにカンタンな紹介をします。あと、実用的なTipsも少々。

おはなしの流れ

•制作でめんどうなこといろいろあるよね•セットアップ•Yeomanを構成するツール•実際に使ってみる •とりあえず覚えておくコマンド•応用編 Tips

制作でめんどうなこといろいろあるよね？

コード書く前の準備いろいろ

• ディレクトリ構成• ローカルWebサーバー• クロスプラットフォームなページのスケルトン。ベストプラクティスなやつ。

• いいかんじのライブラリとかプラグインさがすの

etc...

コード書き中のいろいろ

• Save Reload Save Reload Save Reload...• CoffeeとかSassとかのコンパイル• テストの実行• 最適化、軽量化• ライブラリやフレームワークのアップデート

etc...

このオッサンがテキトーにやります。

Yeoman

http://yeoman.io/

Yeoman’s service

デキるオッサン

い ざ と い う と き の 際 立 っ た 働 き

こんな人にモロ刺さります。

• 制作テンプレ持ってない。つーか作るのメンドイ• 最近JavaScript書いてない。Coffee依存症• 最適化・軽量化に細かいこだわりはない。いい感じにやってほしい

• Sass最高ヒャッハー！• もうCompassでいいです• もうBootstrapでいいです

こんなの

セットアップ

黒い画面で、

npm install -g yo grunt-cli bower

※ grunt0.3以前をインストールしている場合、アンインストールしておく。

...と、そのまえに入れておくもの。

node.js (>=0.8.0)

ruby

compass

※ compass はgemで、node.jsは nodebrewが個人的にオススメhttp://compass-style.org/https://github.com/hokaccha/nodebrew

Yeomanを構成するツール

yo grunt bower

scaffolding preview, build, test package management

Yo

•Yeomanのプロジェクトを生成する$ yo webapp

angular, backbone, ember, chromeapp...様々なフレームワークのscaffoldingが可能。HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。

Bower

•JSライブラリのパッケージマネージャ$ bower install underscore

install, search, list, update...JSライブラリ、jQueryプラグインなどを検索してapp/componentsに自動インストール。既存ライブラリの管理に便利。

Grunt

•JSベースの作業自動化ツール$ grunt server

server, build, test, clean...様々な作業を自動化、ローカルWebサーバー起動、ファイル更新監視、リリースビルド、テストetc...

制作時の中核的ツール。はっきりいって神！

v0.9以前をお使いの方へ

v1.0 betaになってからすごく変わったのでmigrating guideを読みましょう。

コマンドの変更

yeoman init ➜ yoyeoman build ➜ grunt [build]yeoman server ➜ grunt serveryeoman test ➜ grunt test

yeoman install ➜ bower installyeoman uninstall ➜ bower uninstallyeoman update ➜ bower updateyeoman list ➜ bower listyeoman search ➜ bower searchyeoman lookup ➜ bower lookup

実際につかってみる。

実際につかってみるとわかるけど、

裏ではGruntが相当がんばっている！

崇めようイノシシ神

Gruntfile.js

詳しくは公式で学びましょうhttp://gruntjs.com/

あと実は最初、、、

Bower要らないと思ってました

サーセン！

トリも食ってみるとウマかったです

component を検索してみよう

http://sindresorhus.com/bower-components/

まずはこれだけ覚えよう！

$ yo webapp

$ grunt server

はじめる前のじゅもん リリースのじゅもん

$ grunt build

or

$ grunt server:dist

まずは Designing in the Browserを快適に楽しんでみるといいよ！

応用編

RequireJSをインクルードしてwebappを生成すると、JSはモジュール化されたファイル構成で出力される。

•main.js•app.js

モジュールの読み込み、依存関係を記述する（require）

モジュール本体（define）

AMDについては以下を読むといいhttp://requirejs.org/docs/why.htmlhttp://requirejs.org/docs/whyamd.html

main.js

モジュールのパスを指定

モジュールの依存関係を定義

モジュールを利用した処理を記述

app.js

モジュールの処理を記述

app.js を変更してjqueryを使えるようにする

2.モジュール化したCoffeeをグローバルにコンパイルする

YeomanはCoffeeScriptを自動的にコンパイルする。便利なんだけど、CoffeeScriptはデフォルトで即時関数化するので複数のCoffeeファイル間でグローバル空間を利用するようなプログラムはコンパイル後に動かなくなる。

※ RequireJSとか使ってうまいことやらない場合のお話です。

Gruntfile.js coffee:dist ブロックにオプションを追加する

参考: https://github.com/gruntjs/grunt-contrib-coffee#readme

以前ブログに書きました Yeoman v0.9時点の話だけど。http://goo.gl/hc4Em

3.REST API サーバーを同時に開発する

Yeomanはプレビュー用localhostサーバーを立てる。便利なんだけど、JSONベースのREST APIサーバーを同時に開発する場合は別サーバーを立てないといけない。その場合クロスオリジンになるのでそのまんまだとajax通信ができなくて不便。

やり方

長いのでブログに書きました。http://goo.gl/SojUc

こうが、、、

Web Browser

Yoman Preview Server(localhost:9000)

API Server(localhost:3000)

✘ajax request

こうなるイメージ

Web Browser

Yeoman Preview Server(localhost:9000)

API Server(localhost:3000)

Proxy Server(localhost:8000)

ajax request

Yo, Grunt, Bower, (node.js) の相互依存性が低いので工夫次第でいくらでも便利にカスタマイズできそう。:)

まとめ

Yeomanを使うと、 Webアプリ開発効率がアップすると思います。

ぜひ使ってみてください！

happy����������� ������������������  coding����������� ������������������  :)

Thanks.