佐川 夫美雄@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/