統合開発ツール
YEOMAN
佐川 夫美雄
@albatrosary
株式会社ゼノフィ
佐川 夫美雄
HTML5Expert.jpコントリビュータ
HTML5 fun
!
html5jエンタープライズ部 副部長
html5j Web Platform部
knockoutjs Japan UG(仮)
Sencha UG CO-ORG...
開発環境のおはなし
http://yeoman.io/
多くのアーキテクチャをどうやって開発するか
Yeoman とは
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
MODERN WORKFLOWS FOR MODERN WEBAPPS
開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
http://yeoman.io/
これはですね。。
Javaのmavenみたいなもんです
もうちょっと高機能かも
インストールは簡単
使ってみる
$ npm install -g yo
generator はどのくらいある?
http://yeoman.io/community-generators.html
yo
雛形作成ツール
カスタムイベントを備えた Model
Model のイテレーションである Collection
イベントをハンドリングする View
!
!
サーバサイドのアプリケーションと連動するため
の RESTful JSON など
View
ejs
C...
Single-page Application(SPA)
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
events
render
change
Ajax...
$ yo backbone
yo
雛形作成ツール
これだけで概ねの環境ができてしまう!
yo
$ yo backbone:view view名 --coffee
$ yo backbone:model model名 --coffee
$ yo backbone:collection collection名 --coffee
$ yo back...
bower
Twitter社が作ったパッケージマネージャ
bower components はどのくらいあるか?
http://bower.io/search/
bower
依存関係およびライブラリの情報を管理するためのファイル
bower.jsonとは?
bower
backbonejsを作るときに必要なコンポーネント
{
"name": "backbone-app",
"version": "0.0.0",
"dependencies": {
"sass-bootstrap": " 3.0.0...
bower
$ bower install
!
このコマンドでbower.jsonに定義しているコンポーネントをダ
ウンロードします
使い方
bower
$ bower install --save-dev [パッケージ名]
!
新しいコンポーネントをダウンロードしbower.jsonにその情
報を書き込みます
使い方
grunt
タスクランナー
grunt で登録されているプラグインは?
http://gruntjs.com/plugins
grunt
タスクランナー
gruntにはpackage.jsonとGruntfile.jsが必要
grunt
package.jsonとは?
必要なタスクプラグインを管理するためのファイル
grunt
package.jsonとは?
{
"name": "backbone-app",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": " 0....
grunt
使い方は
$ npm install --save-dev [プラグイン名]
!
新しいプラグインをダウンロードしpackage.jsonにその情報
を書き込みます
grunt
Gruntfile.jsとは?
タスクを定義したファイルです
grunt
Gruntfile.jsとは?
コマンドがいろいろ定義していますが
$ grunt serve
$ grunt build
$ grunt test
これにモックアップ開発用に
$ grunt mock
モック開発で効率よく
http://albatrosary.hateblo.jp/entry/2014/02/06/155004
grunt-connect-proxyの構築
$ npm install grunt-connect-proxy --save-dev
connect: {
options: {
port: SERVER_PORT,
hostname: 'lo...
grunt-easymockの構築
$ npm install grunt-easymock --save-dev
grunt.initConfig({
yeoman: yeomanConfig,
/* easymockの設定 */
easymoc...
grunt-easymockの構築
ここで「easymock」の次の「mockapi」キーワードが重要
これとproxyで定義したcontextを一致させる
!
期待するURLは
/mockapi/users/1
です。
grunt-easymockの構築
easymockをタスクに登録
grunt.task.run([
'clean:server',
'coffee:dist',
'createDefaultTemplate',
'handlebars',
'c...
grunt-easymockの構築
モックサーバを構築するとめんどうなAPIサーバを構築しなくていい
簡単Single-page Application開発!
Thanks.
Upcoming SlideShare
Loading in...5
×

統合開発Yeoman

1,355

Published on

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

No Downloads
Views
Total Views
1,355
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

統合開発Yeoman

  1. 1. 統合開発ツール YEOMAN 佐川 夫美雄 @albatrosary 株式会社ゼノフィ
  2. 2. 佐川 夫美雄 HTML5Expert.jpコントリビュータ HTML5 fun ! html5jエンタープライズ部 副部長 html5j Web Platform部 knockoutjs Japan UG(仮) Sencha UG CO-ORGANIZER AngularJS Japan User Group http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ (Fumio SAGAWA)
  3. 3. 開発環境のおはなし http://yeoman.io/ 多くのアーキテクチャをどうやって開発するか
  4. 4. Yeoman とは Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) MODERN WORKFLOWS FOR MODERN WEBAPPS
  5. 5. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/
  6. 6. これはですね。。 Javaのmavenみたいなもんです もうちょっと高機能かも
  7. 7. インストールは簡単 使ってみる $ npm install -g yo
  8. 8. generator はどのくらいある? http://yeoman.io/community-generators.html yo 雛形作成ツール
  9. 9. カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! ! サーバサイドのアプリケーションと連動するため の RESTful JSON など View ejs Collection Model HTML
  10. 10. Single-page Application(SPA) 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 events render change Ajax Storage get set Model TemplateViewDOM
  11. 11. $ yo backbone yo 雛形作成ツール
  12. 12. これだけで概ねの環境ができてしまう! yo
  13. 13. $ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee yo テンプレートを作成する
  14. 14. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/
  15. 15. bower 依存関係およびライブラリの情報を管理するためのファイル bower.jsonとは?
  16. 16. bower backbonejsを作るときに必要なコンポーネント { "name": "backbone-app", "version": "0.0.0", "dependencies": { "sass-bootstrap": " 3.0.0", "jquery": " 1.9.0", "underscore": " 1.4.3", "backbone": " 1.0.0", "requirejs": " 2.1.5", "requirejs-text": " 2.0.5", "modernizr": " 2.6.2", "backbone.localStorage": " 1.1.7" }, "devDependencies": {} }
  17. 17. bower $ bower install ! このコマンドでbower.jsonに定義しているコンポーネントをダ ウンロードします 使い方
  18. 18. bower $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます 使い方
  19. 19. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins
  20. 20. grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要
  21. 21. grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル
  22. 22. grunt package.jsonとは? { "name": "backbone-app", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": " 0.4.1", "grunt-contrib-copy": " 0.4.0", "grunt-contrib-concat": " 0.3.0", "grunt-contrib-coffee": " 0.7.0", "grunt-contrib-jst": " 0.5.0", "grunt-contrib-uglify": " 0.2.0", "grunt-contrib-compass": " 0.5.0", "grunt-contrib-jshint": " 0.6.3", "grunt-contrib-cssmin": " 0.6.0", "grunt-contrib-connect": " 0.3.0", "grunt-contrib-clean": " 0.5.0", "grunt-contrib-htmlmin": " 0.1.3", "grunt-contrib-imagemin": " 0.2.0", "grunt-contrib-watch": " 0.5.2", "grunt-mocha": " 0.4.1", "grunt-usemin": " 0.1.10", "grunt-bower-requirejs": " 0.7.0", "grunt-requirejs": " 0.4.0", "grunt-rev": " 0.1.0", "grunt-open": " 0.2.0", "load-grunt-tasks": " 0.1.0", "connect-livereload": " 0.2.0", "time-grunt": " 0.2.1", "jshint-stylish": " 0.1.3" }, "engines": { "node": ">=0.8.0" } }
  23. 23. grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードしpackage.jsonにその情報 を書き込みます
  24. 24. grunt Gruntfile.jsとは? タスクを定義したファイルです
  25. 25. grunt Gruntfile.jsとは? コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
  26. 26. モック開発で効率よく http://albatrosary.hateblo.jp/entry/2014/02/06/155004
  27. 27. grunt-connect-proxyの構築 $ npm install grunt-connect-proxy --save-dev connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }], Gruntfile.js
  28. 28. grunt-easymockの構築 $ npm install grunt-easymock --save-dev grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, }, Gruntfile.js
  29. 29. grunt-easymockの構築 ここで「easymock」の次の「mockapi」キーワードが重要 これとproxyで定義したcontextを一致させる ! 期待するURLは /mockapi/users/1 です。
  30. 30. grunt-easymockの構築 easymockをタスクに登録 grunt.task.run([ 'clean:server', 'coffee:dist', 'createDefaultTemplate', 'handlebars', 'compass:server', 'configureProxies', 'connect:livereload', 'open', 'easymock', 'watch' ]);
  31. 31. grunt-easymockの構築 モックサーバを構築するとめんどうなAPIサーバを構築しなくていい
  32. 32. 簡単Single-page Application開発!
  33. 33. Thanks.
  1. A particular slide catching your eye?

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

×