Post on 08-Sep-2014
description
佐川 夫美雄@albatrosary 株式会社ゼノフィ
2014/6/9 HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣) 第二回 html5jウェブプラットフォーム部ナイトセミナー
佐川 夫美雄
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)
Xenophy CO.,LTDWebアプリケーション開発をトータルサポート
開発者の生産力向上 複数のプラットフォーム開発環境の提供 高品質なユーザーエクスペリエンスの提供 モバイル、タブレット、デスクトップへの対応
Sencha Ext JSExt JS 3.0がリリースされました
Sencha Touch
SenchaにはSencha Architectというのがあるんです
The Ultimate HTML5 App Builder
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.
本日のテーマ
http://yeoman.io/
YEOMAN
いいところテンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
エディターは何でも
Sublime Text
Vim
Emacs
livereloadとか
WebSocketlisten to change
change occured/reset
YEOMANというのは
Web開発のscaffolding
scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
面倒なことをタスク化し
仕事をさぼろう!
ことはじめMACユーザなら
改めてすることはないです
ことはじめWindowsユーザなら
msysgitを入れよう
個人的におすすめです
ことはじめubuntuユーザなら
いっ、いいと思います!
使い始めるのは簡単!
これは必要必須事項です。これ入れないと何もできません。
node.js
nodeはnodebrewがおすすめ
$ npm install -g yo
出来上がり!
YEOMANはYEOMANはyoとbowerとgruntから成り立ってます
yo bower grunt
yo 雛形作成ツール
bower フロントエンドパッケージマネージャ
grunt タスクランナー
具体的には
$ npm install -g generator-hoge
$ yo hoge (※$ bower installも実行してます)
$ grunt serve
$ grunt build
なぁ、黒い画面好きだろう?
ちなみに入れる場合があります
ruby
comapss
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.
scaffoldingツール
多くのgenerator
OFFICIAL GENERATORS 20
COMMUNITY GENERATORS 782
Bower
Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
パッケージマネージャ
Twitter, opne-source community
bower.jsonで設定管理
Bower Packages 13,178
Grunt
!
Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
JavaScriptラスクランナー
package.jsonで設定管理
Gruntfile.jsでタスクを定義
Grunt plugin 2,990
gruntのおすすめおすすめのgruntプラグイン
grunt-contrib-yuidoc JavaScriptのドキュメント化 grunt-codo CoffeeScriptのドキュメント化 grunt-styleguide SASSのドキュメント化 grunt-text-replace ファイルの内容を変える grunt-easymock モックAPIサーバ grunt-stubby モックAPIサーバ grunt-connect-proxy プロキシサーバ
構成(概要)
generator
bower.jsonGruntfile.json
package.json
Node Packager Managergithub
YEOMANとwebapp
$ npm install -g generator-webapp
$ mkdir webapp && cd webapp
$ yo webapp
YEOMANとangular
$ npm install -g generator-anglar
$ mkdir anglar && cd anglar
$ yo anglar
YEOMANとember
$ npm install -g generator-ember
$ mkdir ember && cd ember
$ yo ember
YEOMANとbackbone
$ npm install -g generator-backbone
$ mkdir backbone && cd backbone
$ yo backbone
YEOMANとThree.js
$ npm install -g generator-threejs
$ mkdir threejs && cd threejs
$ yo threejs
YEOMANとgit.gitignoreの中身
node_modules dist .tmp .sass-cache bower_components test/bower_components
bowerの使い方bowerの使い方のひとつ
$ bower install
backbone.localStorage ̶save
bower.jsonに定義を追加
gruntの使い方gruntの使い方のひとつ
$ npm install
grunt-contrib-yuidoc ̶save-dev
package.jsonに定義を追加
使ってみます!
まとめ
環境構築の煩わしさから解放
スムーズな開発初動
多様なツール郡
取扱注意!
YEOMANを触っていると
面白くて仕事になりません
Sencha Architectもよろしくね
Thanks
Webアプリケーション開発はゼノフィ http://www.xenophy.com/