Osc浜松 2014

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 浜松

ご清聴ありがとうございました