Upload
masakazu-muraoka
View
10.683
Download
0
Embed Size (px)
DESCRIPTION
Yeomanの基礎からちょっとした応用までを紹介。 Chrome+HTML5 Developers Live Japan #4 https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g のライブ配信用スライドです。
Citation preview
YeomanHTML5 Webアプリ開発を効率化するツールの紹介
Chrome+HTML5 Developers Live Japan #42013.4.25
Bathtimefish 村岡 正和
つかってみよう!
マークアップ部発足!
html5j.org
初代 部長になりました。
マークアップも楽しいですよケロ!
今日のおはなし
HTML5でイマドキっぽいWebサイトやWebアプリをつくるときにいろいろメンドイことがあって、
今日のおはなし
メンドイことがいい感じに自動的になったりしたらめんどくなくていいんだけどナンかいいのない?
今日のおはなし
それ、Yeomanでできるよ。というおはなし。
Yoemanつかったことない人向けにカンタンな紹介をします。あと、実用的なTipsも少々。
おはなしの流れ
•制作でめんどうなこといろいろあるよね•セットアップ•Yeomanを構成するツール•実際に使ってみる •とりあえず覚えておくコマンド•応用編 Tips
制作でめんどうなこといろいろあるよね?
コード書く前の準備いろいろ
• ディレクトリ構成• ローカルWebサーバー• クロスプラットフォームなページのスケルトン。ベストプラクティスなやつ。
• いいかんじのライブラリとかプラグインさがすの
etc...
コード書き中のいろいろ
• Save Reload Save Reload Save Reload...• CoffeeとかSassとかのコンパイル• テストの実行• 最適化、軽量化• ライブラリやフレームワークのアップデート
etc...
このオッサンがテキトーにやります。
Yeoman
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が相当がんばっている!
崇めようイノシシ神
あと実は最初、、、
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通信ができなくて不便。
こうが、、、
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.