2014/3/22 オープンソースカンファレンス in 浜松
2014/3/22 オープンソースカンファレンス in 浜松
!
!
佐川 夫美雄
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
Profile:
2014/3/22 オープンソースカンファレンス in 浜松
Single-page Application(SPA)
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
何か最近話題だよね?!でもSPAって書くとお風呂になっちゃうんだよ
2014/3/22 オープンソースカンファレンス in 浜松
こんなの簡単さ!
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
image
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass Compass
image
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
SPAを開発するには?
2014/3/22 オープンソースカンファレンス in 浜松
ちょっと大変じゃない。。。
2014/3/22 オープンソースカンファレンス in 浜松
どーやって開発するの? ┐(‾ヘ‾)┌
2014/3/22 オープンソースカンファレンス in 浜松
そこで統合開発ツールの登場です!
2014/3/22 オープンソースカンファレンス in 浜松
開発環境のおはなし
http://yeoman.io/
面倒なことは全部このおっさんにやらせちゃえばいいんだよ
2014/3/22 オープンソースカンファレンス in 浜松
Yeoman とは
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
MODERN WORKFLOWS FOR MODERN WEBAPPS
Javaのmavenみたいなもんです もうちょっと高機能かも
2014/3/22 オープンソースカンファレンス in 浜松
開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
2014/3/22 オープンソースカンファレンス in 浜松
これはですね。。
Javaのmavenみたいなもんです もうちょっと高機能かも
2014/3/22 オープンソースカンファレンス in 浜松
インストールは簡単
使ってみる
$ npm install -g yo
2014/3/22 オープンソースカンファレンス in 浜松
generator はどのくらいある? http://yeoman.io/community-generators.html
yo雛形作成ツール
2014/3/22 オープンソースカンファレンス in 浜松
$ yo backbone
yoこれだけで使いたい環境ができてしまう!
AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ!
2014/3/22 オープンソースカンファレンス in 浜松
$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee
yoモジュールのテンプレートが作成できる
2014/3/22 オープンソースカンファレンス in 浜松
bowerTwitter社が作ったパッケージマネージャ
bower components はどのくらいあるか? http://bower.io/search/
2014/3/22 オープンソースカンファレンス in 浜松
bower
依存関係およびライブラリの情報を管理するためのファイル
bower.jsonとは?
2014/3/22 オープンソースカンファレンス in 浜松
bower
$ bower install --save-dev [パッケージ名] !
新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます
使い方
2014/3/22 オープンソースカンファレンス in 浜松
gruntタスクランナー
grunt で登録されているプラグインは? http://gruntjs.com/plugins
2014/3/22 オープンソースカンファレンス in 浜松
gruntタスクランナー
gruntにはpackage.jsonとGruntfile.jsが必要
2014/3/22 オープンソースカンファレンス in 浜松
gruntpackage.jsonとは?
必要なタスクプラグインを管理するためのファイル
2014/3/22 オープンソースカンファレンス in 浜松
grunt使い方は
$ npm install --save-dev [プラグイン名] !
新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます
2014/3/22 オープンソースカンファレンス in 浜松
gruntGruntfile.jsとは?
タスクを定義したファイルです
2014/3/22 オープンソースカンファレンス in 浜松
gruntGruntfile.jsとは?
いろんなタスクがあります $ grunt serve $ grunt build $ grunt test
grunt serveってやるとnodeサーバが立ち上がるんだぜぃ
2014/3/22 オープンソースカンファレンス in 浜松
Yeomanを使って効率良くSingle-page Applicationを作ろう!
結構大変だけどね。。
イカしてるだろ
2014/3/22 オープンソースカンファレンス in 浜松
続きは展示ブースにて!
2014/3/22 オープンソースカンファレンス in 浜松
ご清聴ありがとうございました