Your SlideShare is downloading. ×
Yeoman RIAビルドツール超入門
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 RIAビルドツール超入門

5,012
views

Published on

Published in: Technology

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

No Downloads
Views
Total Views
5,012
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
19
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. YeomanRIAビルドツール超入門 第6回HTML5など勉強会 2013.3.21 Bathtimefish 村岡 正和
  • 2. 自己紹介むらおか まさかず村岡正和 @bathtimefishWebアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティングHTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など HTML5-WEST.jpHTML5 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/
  • 24. い ざ と い う と き の 際 立 っ た 働 きYeoman s service デキるオッサン
  • 25. こんな人にモロに刺さります。• 制作テンプレ持ってない。つーか作るのメンドイ• 最近JavaScript書いてない。Coffee依存症• 最適化・軽量化に細かいこだわりはない。いい感じ にやってほしい• Sass最高ヒャッハー! こんなの• もうCompassでいいです• もうBootstrapでいいです
  • 26. セットアップ
  • 27. 黒い画面で、
  • 28. npm install -g yo grunt-cli bower
  • 29. ...と、そのまえに入れておくもの。 node.js (>=0.8.0) ruby compass※ grunt0.3以前をインストールしている場合、アンインストールしておく。
  • 30. Yeomanを構成するツール•yo scaffolding project•bower package manager•grunt task runner
  • 31. Yo•Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaffoldingが可能。 HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
  • 32. Bower•JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
  • 33. Grunt•JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神!
  • 34. 実際につかってみる。
  • 35. とりあえずコーディングはじめる前のじゅもんyo webappnpm install && bower installgrunt server
  • 36. リリースの呪文grunt build orgrunt server:dist
  • 37. RIA開発の作業効率がアップすると思います
  • 38. ニーズがあるならそのうち勉強会やるかも。興味あったら教えてください。
  • 39. happy
  • 40.  coding.
  • 41. Thanks.

×