Yeoman
ではじめる爆速Webアプリ開発
Sencha UG 勉強会 #19@大阪
2014.4.18
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
H...
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
著
今日のおはなし
HTML5でイマドキっぽい
WebサイトやWebアプリをつ
くるときにいろいろメンドイ
ことがあって、
メンドイことがいい感じに
自動的になったりしたらめ
んどくなくていいんだけど
ナンかいいのない?
それ、Yeomanでできるよ。
Web制作の準備はいろいろめんどくさい
コード書く前の準備いろいろ
• ディレクトリ構成 js/ styles/ images/ ...
• 制作用Webサーバー
• いいかんじのライブラリとかプラグインさがすの
• いい感じのHTML5ページのテンプレート
• 支援ツール altJ...
このオッサンが全部用意します。
Yeoman
http://yeoman.io/
Yeoman s service
デキるオッサン
い ざ と い う と き の 際 立 っ た 働 き
こんな人にモロ刺さります。
• 制作テンプレ持ってない。つーか作るのメンドイ
• 最初っからレスポンシブのテンプレがいい。
• 最適化・軽量化に細かいこだわりはない。いい感じ
にやってほしい
• JSライブラリさがすのだるい
• Sass最高ヒ...
セットアップ
黒い画面で、
npm install -g yo
...と、そのまえに入れておくもの。
node.js
ruby (optional)
compass (optional)
※ compass はgemで、node.jsは nodebrewが個人的にオススメ
http://compass-st...
npm install -g generator-webapp
webappの作成
yo webapp
yo webapp --coffee
CoffeeScriptを使う場合
サーバーの起動
grunt server
リリース前のビルド
grunt build
実際にやってみる
Yeomanを構成するツール
yo grunt bower
scaffolding preview, build, test package management
Yo
•Yeomanのプロジェクトを生成する
$ yo webapp
angular, backbone, ember, chromeapp...
様々なフレームワークのscaffoldingが可能。
HTML5 Boilerplate, Gru...
Bower
•JSライブラリのパッケージマネージャ
$ bower install underscore
install, search, list, update...
JSライブラリ、jQueryプラグインなどを検索してapp/
compo...
Grunt
•JSベースの作業自動化ツール
$ grunt server
server, build, test, clean...
様々な作業を自動化、ローカルWebサーバー起動、フ
ァイル更新監視、リリースビルド、テストetc...
制作時...
実際につかってみるとわかるけど、
裏ではGruntが
相当がんばっている!
コーディング中にお世話になるのはほとんどGrunt
Gruntfile.js
詳しくは公式で学びましょう
http://gruntjs.com/
あと実は最初、、、
Bower要らないと思ってました
サーセン!
トリも食ってみるとウマかったです
component を検索してみよう
http://sindresorhus.com/bower-components/
bower install underscore.number --save
grunt bowerInstall
bower install したライブラリを依存ライブラリとともに
webページに追加してくれる
webappでのJSライブラリ...
まずはこれだけ覚えよう!
$ yo webapp
$ grunt server
はじめる前のじゅもん リリースのじゅもん
$ grunt build
or
$ grunt server:dist
まずは Designing in the Bro...
いろんなgeneratorをつかってみよう!
http://yeoman.io/official-generators.html
応用編
1. YeomanでAMD
Asynchronous Module Definition
RequireJS入りwebapp
https://github.com/popox/generator-webapp-rjs
RequireJSをインクルードしてwebappを生成すると、
JSはモジュール化されたファイル構成で出力される。
•main.js
•app.js
モジュールの読み込み、依存関係を記述する
(require)
モジュール本体(define)
A...
RequireJSをとはつまり、
C言語の import とか
Rubyの require みたいに
JavaScriptで外部JavaScriptファイル
の読み込みを実現するライブラリ
main.js
モジュールのパスを指定
モジュールの依存関係を定義
モジュールを利用
した処理を記述
app.js
モジュールの処理を記述
http://www.slideshare.net/bathtimefish/amd-basic-and-practice
Webページごとに別々のモジュール構成を持つJS
を書くと、開発時には動いてるが、build後に動か
なくなる。
※ webappでAMDを使う場合の注意点
grunt buildではr.jsを使ったJSファイルのマージ、圧縮が行われる。このと...
ちゃんと動く設定例書きました。
https://github.com/bathtimefish/yeoman-webapp-rjs-multipage-example
http://bathtimefish.hatenablog.com/entry...
2.モジュール化した
Coffeeをグローバルに
コンパイルする
YeomanはCoffeeScriptを自動的にコンパイルする。
便利なんだけど、CoffeeScriptはデフォルトで即時関数
化するので複数のCoffeeファイル間でグローバル空間
を利用するようなプログラムはコンパイル後に動かな
くなる。
※ ...
Coffee -> JSはいつもこんなかんじ
これはこれでいいことだけど複数Coffeeファイル間でオブジェクトをグローバ
ルで共有してラフに楽をしたい場合とかちょっとアレ。
Gruntfile.js coffee:dist ブロックにオプションを追加する
参考: https://github.com/gruntjs/grunt-contrib-coffee#readme
optionsについてはgrunt-contri...
3.REST API サーバーを
同時に開発する
Yeomanはプレビュー用localhostサーバーを立てる。
便利なんだけど、JSONベースのREST APIサーバーを
同時に開発する場合は別サーバーを立てないといけな
い。その場合クロスオリジンになるのでそのまんまだ
とajax通信ができ...
やり方
長いのでブログに書きました。
http://goo.gl/SojUc
そしたら、
@kamiyamさんがもっと便利なの書いてくれた
http://bit.ly/13r1xj5
ぜったいこっちをつかうべき!
こうが、、、
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...
Yo, Grunt, Bower, (node.js) の相互依存
性が低いので工夫次第でいくらでも便利
にカスタマイズできる。:)
これかなり重要!!
http://yeoman.io/generators.html#writing-your-first-generator
カスタムGeneratorを作成する
とりあえずつくってみてます。
頓挫中 orz
むしゃくしゃしたのでやった
https://github.com/bathtimefish/generator-webapp-typescript
TypeScript 1.0 リリース記念
ビール飲みながらつくった。
HTMLをモジュール化してAjaxで取得できるWebApp サンプル
https://github.com/bathtimefish/webapp-handlebars-ajax
御社制作ワークフローのため
のgenerator開発いたします。
企業のみなさまへ、
通常見積もり価格 3割増 のところを、
今ならなんと20%引き!!
Call	 Now!!
generator hackation
やりたいです。
まとめ
Yeomanを使うと、
Webアプリ開発効率が
アップすると思います。
ぜひ使ってみてください!
happy
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Upcoming SlideShare
Loading in...5
×

Yeomanではじめる爆速webアプリ開発

32,562

Published on

Published in: Technology
1 Comment
106 Likes
Statistics
Notes
  • hello, my name is miss lynda i am a single girl i like to make new friends please contact me by my Email address > weahlynda@hotmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
32,562
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
88
Comments
1
Likes
106
Embeds 0
No embeds

No notes for slide

Yeomanではじめる爆速webアプリ開発

  1. 1. Yeoman ではじめる爆速Webアプリ開発 Sencha UG 勉強会 #19@大阪 2014.4.18 Bathtimefish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimefish
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. Firefox OSの 薄い本書きました。 http://goo.gl/mA8ebW 好評発売中! 開発に、「もえあがる」のはつきものだ 第一話 がいあハックス (Gaia開発環境の構築とデバッグ) 著
  5. 5. 今日のおはなし
  6. 6. HTML5でイマドキっぽい WebサイトやWebアプリをつ くるときにいろいろメンドイ ことがあって、
  7. 7. メンドイことがいい感じに 自動的になったりしたらめ んどくなくていいんだけど ナンかいいのない?
  8. 8. それ、Yeomanでできるよ。
  9. 9. Web制作の準備はいろいろめんどくさい
  10. 10. コード書く前の準備いろいろ • ディレクトリ構成 js/ styles/ images/ ... • 制作用Webサーバー • いいかんじのライブラリとかプラグインさがすの • いい感じのHTML5ページのテンプレート • 支援ツール altJS, js/css圧縮, Test ... etc...
  11. 11. このオッサンが全部用意します。
  12. 12. Yeoman
  13. 13. http://yeoman.io/
  14. 14. Yeoman s service デキるオッサン い ざ と い う と き の 際 立 っ た 働 き
  15. 15. こんな人にモロ刺さります。 • 制作テンプレ持ってない。つーか作るのメンドイ • 最初っからレスポンシブのテンプレがいい。 • 最適化・軽量化に細かいこだわりはない。いい感じ にやってほしい • JSライブラリさがすのだるい • Sass最高ヒャッハー! • つーかWeb制作めんどくさい • つーか仕事めんどくさい。生きるのもめんどい こんなの
  16. 16. セットアップ
  17. 17. 黒い画面で、
  18. 18. npm install -g yo
  19. 19. ...と、そのまえに入れておくもの。 node.js ruby (optional) compass (optional) ※ compass はgemで、node.jsは nodebrewが個人的にオススメ http://compass-style.org/ https://github.com/hokaccha/nodebrew
  20. 20. npm install -g generator-webapp
  21. 21. webappの作成
  22. 22. yo webapp
  23. 23. yo webapp --coffee CoffeeScriptを使う場合
  24. 24. サーバーの起動
  25. 25. grunt server
  26. 26. リリース前のビルド
  27. 27. grunt build
  28. 28. 実際にやってみる
  29. 29. Yeomanを構成するツール yo grunt bower scaffolding preview, build, test package management
  30. 30. Yo •Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaffoldingが可能。 HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
  31. 31. Bower •JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
  32. 32. Grunt •JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神!
  33. 33. 実際につかってみるとわかるけど、 裏ではGruntが 相当がんばっている! コーディング中にお世話になるのはほとんどGrunt
  34. 34. Gruntfile.js 詳しくは公式で学びましょう http://gruntjs.com/
  35. 35. あと実は最初、、、 Bower要らないと思ってました サーセン! トリも食ってみるとウマかったです
  36. 36. component を検索してみよう http://sindresorhus.com/bower-components/
  37. 37. bower install underscore.number --save grunt bowerInstall bower install したライブラリを依存ライブラリとともに webページに追加してくれる webappでのJSライブラリの追加
  38. 38. まずはこれだけ覚えよう! $ yo webapp $ grunt server はじめる前のじゅもん リリースのじゅもん $ grunt build or $ grunt server:dist まずは Designing in the Browserを快適に楽しんでみるといいよ!
  39. 39. いろんなgeneratorをつかってみよう! http://yeoman.io/official-generators.html
  40. 40. 応用編
  41. 41. 1. YeomanでAMD Asynchronous Module Definition
  42. 42. RequireJS入りwebapp https://github.com/popox/generator-webapp-rjs
  43. 43. RequireJSをインクルードしてwebappを生成すると、 JSはモジュール化されたファイル構成で出力される。 •main.js •app.js モジュールの読み込み、依存関係を記述する (require) モジュール本体(define) AMDについては以下を読むといい http://requirejs.org/docs/why.html http://requirejs.org/docs/whyamd.html
  44. 44. RequireJSをとはつまり、 C言語の import とか Rubyの require みたいに JavaScriptで外部JavaScriptファイル の読み込みを実現するライブラリ
  45. 45. main.js モジュールのパスを指定 モジュールの依存関係を定義 モジュールを利用 した処理を記述
  46. 46. app.js モジュールの処理を記述
  47. 47. http://www.slideshare.net/bathtimefish/amd-basic-and-practice
  48. 48. Webページごとに別々のモジュール構成を持つJS を書くと、開発時には動いてるが、build後に動か なくなる。 ※ webappでAMDを使う場合の注意点 grunt buildではr.jsを使ったJSファイルのマージ、圧縮が行われる。このと きデフォルトの設定だとページごとのJSがひとつのファイルにマージ&圧 縮されてモジュール構成が破壊されるため。
  49. 49. ちゃんと動く設定例書きました。 https://github.com/bathtimefish/yeoman-webapp-rjs-multipage-example http://bathtimefish.hatenablog.com/entry/2013/11/03/185340 参考記事
  50. 50. 2.モジュール化した Coffeeをグローバルに コンパイルする
  51. 51. YeomanはCoffeeScriptを自動的にコンパイルする。 便利なんだけど、CoffeeScriptはデフォルトで即時関数 化するので複数のCoffeeファイル間でグローバル空間 を利用するようなプログラムはコンパイル後に動かな くなる。 ※ RequireJSとか使ってうまいことやらない場合のお話です。
  52. 52. Coffee -> JSはいつもこんなかんじ これはこれでいいことだけど複数Coffeeファイル間でオブジェクトをグローバ ルで共有してラフに楽をしたい場合とかちょっとアレ。
  53. 53. Gruntfile.js coffee:dist ブロックにオプションを追加する 参考: https://github.com/gruntjs/grunt-contrib-coffee#readme optionsについてはgrunt-contrib-coffeeを参照 https://github.com/gruntjs/grunt-contrib-coffee
  54. 54. 3.REST API サーバーを 同時に開発する
  55. 55. Yeomanはプレビュー用localhostサーバーを立てる。 便利なんだけど、JSONベースのREST APIサーバーを 同時に開発する場合は別サーバーを立てないといけな い。その場合クロスオリジンになるのでそのまんまだ とajax通信ができなくて不便。
  56. 56. やり方 長いのでブログに書きました。 http://goo.gl/SojUc
  57. 57. そしたら、 @kamiyamさんがもっと便利なの書いてくれた http://bit.ly/13r1xj5 ぜったいこっちをつかうべき!
  58. 58. こうが、、、 Web Browser Yoman Preview Server (localhost:9000) API Server (localhost:3000) ✘ajax request
  59. 59. こうなるイメージ Web Browser Yeoman Preview Server (localhost:9000) API Server (localhost:3000) Proxy Server (localhost:8000) ajax request
  60. 60. Yo, Grunt, Bower, (node.js) の相互依存 性が低いので工夫次第でいくらでも便利 にカスタマイズできる。:) これかなり重要!!
  61. 61. http://yeoman.io/generators.html#writing-your-first-generator カスタムGeneratorを作成する
  62. 62. とりあえずつくってみてます。 頓挫中 orz
  63. 63. むしゃくしゃしたのでやった https://github.com/bathtimefish/generator-webapp-typescript TypeScript 1.0 リリース記念
  64. 64. ビール飲みながらつくった。 HTMLをモジュール化してAjaxで取得できるWebApp サンプル https://github.com/bathtimefish/webapp-handlebars-ajax
  65. 65. 御社制作ワークフローのため のgenerator開発いたします。 企業のみなさまへ、 通常見積もり価格 3割増 のところを、 今ならなんと20%引き!! Call Now!!
  66. 66. generator hackation やりたいです。
  67. 67. まとめ
  68. 68. Yeomanを使うと、 Webアプリ開発効率が アップすると思います。
  69. 69. ぜひ使ってみてください!
  70. 70. happy
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×