Your SlideShare is downloading. ×
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜

11,011
views

Published on

Yeomanの基礎からちょっとした応用までを紹介。 …

Yeomanの基礎からちょっとした応用までを紹介。
Chrome+HTML5 Developers Live Japan #4
https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g
のライブ配信用スライドです。

Published in: Technology

0 Comments
78 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,011
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
64
Comments
0
Likes
78
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. YeomanHTML5 Webアプリ開発を効率化するツールの紹介Chrome+HTML5 Developers Live Japan #42013.4.25Bathtimefish 村岡 正和つかってみよう!
  • 2. join this live!http://goo.gl/DXK5L
  • 3. マークアップ部発足!html5j.org初代 部長になりました。マークアップも楽しいですよケロ!
  • 4. 今日のおはなしHTML5でイマドキっぽいWebサイトやWebアプリをつくるときにいろいろメンドイことがあって、
  • 5. 今日のおはなしメンドイことがいい感じに自動的になったりしたらめんどくなくていいんだけどナンかいいのない?
  • 6. 今日のおはなしそれ、Yeomanでできるよ。というおはなし。Yoemanつかったことない人向けにカンタンな紹介をします。あと、実用的なTipsも少々。
  • 7. おはなしの流れ•制作でめんどうなこといろいろあるよね•セットアップ•Yeomanを構成するツール•実際に使ってみる•とりあえず覚えておくコマンド•応用編 Tips
  • 8. 制作でめんどうなこといろいろあるよね?
  • 9. コード書く前の準備いろいろ• ディレクトリ構成• ローカルWebサーバー• クロスプラットフォームなページのスケルトン。ベストプラクティスなやつ。• いいかんじのライブラリとかプラグインさがすのetc...
  • 10. コード書き中のいろいろ• Save Reload Save Reload Save Reload...• CoffeeとかSassとかのコンパイル• テストの実行• 最適化、軽量化• ライブラリやフレームワークのアップデートetc...
  • 11. このオッサンがテキトーにやります。
  • 12. Yeoman
  • 13. http://yeoman.io/
  • 14. Yeoman s serviceデキるオッサンい ざ と い う と き の 際 立 っ た 働 き
  • 15. こんな人にモロ刺さります。• 制作テンプレ持ってない。つーか作るのメンドイ• 最近JavaScript書いてない。Coffee依存症• 最適化・軽量化に細かいこだわりはない。いい感じにやってほしい• Sass最高ヒャッハー!• もうCompassでいいです• もうBootstrapでいいですこんなの
  • 16. セットアップ
  • 17. 黒い画面で、
  • 18. npm install -g yo grunt-cli bower※ grunt0.3以前をインストールしている場合、アンインストールしておく。
  • 19. ...と、そのまえに入れておくもの。node.js (>=0.8.0)rubycompass※ compass はgemで、node.jsは nodebrewが個人的にオススメhttp://compass-style.org/https://github.com/hokaccha/nodebrew
  • 20. Yeomanを構成するツールyo grunt bowerscaffolding preview, build, test package management
  • 21. Yo•Yeomanのプロジェクトを生成する$ yo webappangular, backbone, ember, chromeapp...様々なフレームワークのscaffoldingが可能。HTML5 Boilerplate, Gruntfile.js, component.json,node_modulesの自動配置。
  • 22. Bower•JSライブラリのパッケージマネージャ$ bower install underscoreinstall, search, list, update...JSライブラリ、jQueryプラグインなどを検索してapp/componentsに自動インストール。既存ライブラリの管理に便利。
  • 23. Grunt•JSベースの作業自動化ツール$ grunt serverserver, build, test, clean...様々な作業を自動化、ローカルWebサーバー起動、ファイル更新監視、リリースビルド、テストetc...制作時の中核的ツール。はっきりいって神!
  • 24. v0.9以前をお使いの方へv1.0 betaになってからすごく変わったのでmigrating guideを読みましょう。
  • 25. コマンドの変更yeoman init ➜ yoyeoman build ➜ grunt [build]yeoman server ➜ grunt serveryeoman test ➜ grunt testyeoman install ➜ bower installyeoman uninstall ➜ bower uninstallyeoman update ➜ bower updateyeoman list ➜ bower listyeoman search ➜ bower searchyeoman lookup ➜ bower lookup
  • 26. 実際につかってみる。
  • 27. 実際につかってみるとわかるけど、裏ではGruntが相当がんばっている!崇めようイノシシ神
  • 28. Gruntfile.js詳しくは公式で学びましょうhttp://gruntjs.com/
  • 29. あと実は最初、、、Bower要らないと思ってましたサーセン!トリも食ってみるとウマかったです
  • 30. component を検索してみようhttp://sindresorhus.com/bower-components/
  • 31. まずはこれだけ覚えよう!$ yo webapp$ grunt serverはじめる前のじゅもん リリースのじゅもん$ grunt buildor$ grunt server:distまずは Designing in the Browserを快適に楽しんでみるといいよ!
  • 32. 応用編
  • 33. RequireJSをインクルードしてwebappを生成すると、JSはモジュール化されたファイル構成で出力される。•main.js•app.jsモジュールの読み込み、依存関係を記述する(require)モジュール本体(define)AMDについては以下を読むといいhttp://requirejs.org/docs/why.htmlhttp://requirejs.org/docs/whyamd.html
  • 34. main.jsモジュールのパスを指定モジュールの依存関係を定義モジュールを利用した処理を記述
  • 35. app.jsモジュールの処理を記述
  • 36. app.js を変更してjqueryを使えるようにする
  • 37. 2.モジュール化したCoffeeをグローバルにコンパイルする
  • 38. YeomanはCoffeeScriptを自動的にコンパイルする。便利なんだけど、CoffeeScriptはデフォルトで即時関数化するので複数のCoffeeファイル間でグローバル空間を利用するようなプログラムはコンパイル後に動かなくなる。※ RequireJSとか使ってうまいことやらない場合のお話です。
  • 39. Gruntfile.js coffee:dist ブロックにオプションを追加する参考: https://github.com/gruntjs/grunt-contrib-coffee#readme以前ブログに書きましたYeoman v0.9時点の話だけど。http://goo.gl/hc4Em
  • 40. 3.REST API サーバーを同時に開発する
  • 41. Yeomanはプレビュー用localhostサーバーを立てる。便利なんだけど、JSONベースのREST APIサーバーを同時に開発する場合は別サーバーを立てないといけない。その場合クロスオリジンになるのでそのまんまだとajax通信ができなくて不便。
  • 42. やり方長いのでブログに書きました。http://goo.gl/SojUc
  • 43. こうが、、、Web BrowserYoman Preview Server(localhost:9000)API Server(localhost:3000)✘ajax request
  • 44. こうなるイメージWeb BrowserYeoman Preview Server(localhost:9000)API Server(localhost:3000)Proxy Server(localhost:8000)ajax request
  • 45. Yo, Grunt, Bower, (node.js) の相互依存性が低いので工夫次第でいくらでも便利にカスタマイズできそう。:)
  • 46. まとめ
  • 47. Yeomanを使うと、Webアプリ開発効率がアップすると思います。
  • 48. ぜひ使ってみてください!
  • 49. happy
  • 50.  coding
  • 51.  :)
  • 52. Thanks.