統合開発Yeoman(概要)
-
Upload
fumio-sagawa -
Category
Technology
-
view
4.794 -
download
3
description
Transcript of 統合開発Yeoman(概要)
![Page 1: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/1.jpg)
佐川 夫美雄@albatrosary 株式会社ゼノフィ
2014/6/9 HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 第二回 html5jウェブプラットフォーム部ナイトセミナー
![Page 2: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/2.jpg)
佐川 夫美雄
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 html5j Web Platform部 - メンバー knockoutjs Japan User Group Sencha UG CO-ORGANIZER AngularJS Japan User Group - メンバー
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
(Fumio SAGAWA)
![Page 3: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/3.jpg)
Xenophy CO.,LTDWebアプリケーション開発をトータルサポート
開発者の生産力向上 複数のプラットフォーム開発環境の提供 高品質なユーザーエクスペリエンスの提供 モバイル、タブレット、デスクトップへの対応
![Page 4: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/4.jpg)
Sencha Ext JSExt JS 3.0がリリースされました
![Page 5: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/5.jpg)
Sencha Touch
![Page 6: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/6.jpg)
SenchaにはSencha Architectというのがあるんです
The Ultimate HTML5 App Builder
![Page 7: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/7.jpg)
Sencha ArchitectBuild for Mobile and Desktop
Build apps using Sencha Architect 3 and reach more people on more platforms leveraging HTML5. Sencha Architect 3 is the fastest way to build HTML5 apps for the web and mobile devices.
![Page 8: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/8.jpg)
本日のテーマ
http://yeoman.io/
![Page 9: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/9.jpg)
YEOMAN
![Page 10: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/10.jpg)
いいところテンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
![Page 11: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/11.jpg)
エディターは何でも
Sublime Text
Vim
Emacs
![Page 12: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/12.jpg)
livereloadとか
WebSocketlisten to change
change occured/reset
![Page 13: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/13.jpg)
YEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
![Page 14: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/14.jpg)
面倒なことをタスク化し
仕事をさぼろう!
![Page 15: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/15.jpg)
ことはじめMACユーザなら
改めてすることはないです
![Page 16: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/16.jpg)
ことはじめWindowsユーザなら
msysgitを入れよう
個人的におすすめです
![Page 17: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/17.jpg)
ことはじめubuntuユーザなら
いっ、いいと思います!
![Page 18: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/18.jpg)
使い始めるのは簡単!
![Page 19: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/19.jpg)
これは必要必須事項です。これ入れないと何もできません。
node.js
nodeはnodebrewがおすすめ
![Page 20: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/20.jpg)
$ npm install -g yo
![Page 21: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/21.jpg)
出来上がり!
![Page 22: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/22.jpg)
YEOMANはYEOMANはyoとbowerとgruntから成り立ってます
yo bower grunt
![Page 23: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/23.jpg)
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
![Page 24: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/24.jpg)
具体的には
$ npm install -g generator-hoge
$ yo hoge (※$ bower installも実行してます)
$ grunt serve
$ grunt build
![Page 25: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/25.jpg)
なぁ、黒い画面好きだろう?
![Page 26: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/26.jpg)
ちなみに入れる場合があります
ruby
comapss
![Page 27: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/27.jpg)
yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.
![Page 28: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/28.jpg)
scaffoldingツール
多くのgenerator
![Page 29: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/29.jpg)
OFFICIAL GENERATORS 20
COMMUNITY GENERATORS 782
![Page 30: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/30.jpg)
Bower
![Page 31: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/31.jpg)
Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
![Page 32: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/32.jpg)
パッケージマネージャ
Twitter, opne-source community
bower.jsonで設定管理
![Page 33: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/33.jpg)
Bower Packages 13,178
![Page 34: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/34.jpg)
Grunt
![Page 35: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/35.jpg)
!
Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
![Page 36: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/36.jpg)
JavaScriptラスクランナー
package.jsonで設定管理
Gruntfile.jsでタスクを定義
![Page 37: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/37.jpg)
Grunt plugin 2,990
![Page 38: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/38.jpg)
gruntのおすすめおすすめのgruntプラグイン
grunt-contrib-yuidoc JavaScriptのドキュメント化 grunt-codo CoffeeScriptのドキュメント化 grunt-styleguide SASSのドキュメント化 grunt-text-replace ファイルの内容を変える grunt-easymock モックAPIサーバ grunt-stubby モックAPIサーバ grunt-connect-proxy プロキシサーバ
![Page 39: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/39.jpg)
構成(概要)
generator
bower.jsonGruntfile.json
package.json
Node Packager Managergithub
![Page 40: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/40.jpg)
YEOMANとwebapp
$ npm install -g generator-webapp
$ mkdir webapp && cd webapp
$ yo webapp
![Page 41: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/41.jpg)
YEOMANとangular
$ npm install -g generator-anglar
$ mkdir anglar && cd anglar
$ yo anglar
![Page 42: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/42.jpg)
YEOMANとember
$ npm install -g generator-ember
$ mkdir ember && cd ember
$ yo ember
![Page 43: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/43.jpg)
YEOMANとbackbone
$ npm install -g generator-backbone
$ mkdir backbone && cd backbone
$ yo backbone
![Page 44: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/44.jpg)
YEOMANとThree.js
$ npm install -g generator-threejs
$ mkdir threejs && cd threejs
$ yo threejs
![Page 45: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/45.jpg)
YEOMANとgit.gitignoreの中身
node_modules dist .tmp .sass-cache bower_components test/bower_components
![Page 46: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/46.jpg)
bowerの使い方bowerの使い方のひとつ
$ bower install
backbone.localStorage ̶save
bower.jsonに定義を追加
![Page 47: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/47.jpg)
gruntの使い方gruntの使い方のひとつ
$ npm install
grunt-contrib-yuidoc ̶save-dev
package.jsonに定義を追加
![Page 48: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/48.jpg)
使ってみます!
![Page 49: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/49.jpg)
まとめ
環境構築の煩わしさから解放
スムーズな開発初動
多様なツール郡
![Page 50: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/50.jpg)
取扱注意!
YEOMANを触っていると
面白くて仕事になりません
![Page 51: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/51.jpg)
Sencha Architectもよろしくね
![Page 52: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/52.jpg)
Thanks
![Page 53: 統合開発Yeoman(概要)](https://reader034.fdocuments.net/reader034/viewer/2022051411/540dcd5c8d7f72747e8b4b72/html5/thumbnails/53.jpg)
Webアプリケーション開発はゼノフィ http://www.xenophy.com/