html5 in-nagoya-11th

HTML5勉強会#11 in 名古屋


!

!

佐川　夫美雄

HTML5Expert.jpコントリビュータ html5jエンタープライズ部副部長 Angularユーザ会スタッフ Sencha UG CO-ORGANIZER

@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

Profile:


Single-page Application(SPA)

単一ページによるWebアプリケーション

ページはDOMの操作により切り替える

サーバとのやりとりはAjaxやWebSocket等を利用

何か最近話題だよね？！でもSPAって書くとお風呂になっちゃうんだよ


こんなの簡単さ！


HTML CSS

JavaScript

image

SPAを開発するには？


HTML CSS

JavaScript

Sass Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image

Yuidoc



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

Yuidoc



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

mocha chaiテスト

Yuidoc



ちょっと大変じゃない。。。


どーやって開発するの？ ┐(‾ヘ‾）┌


そこで統合開発ツールの登場です！


開発環境のおはなし

http://yeoman.io/

面倒なことは全部このおっさんにやらせちゃえばいいんだよ


Yeoman とは

Google社が作成した総合開発ツール群

yo(雛形作成ツール)

grunt(タスクランナー)

bower(フロントエンドパッケージマネージャ)

MODERN WORKFLOWS FOR MODERN WEBAPPS

Javaのmavenみたいなもんですもうちょっと高機能かも


インストールは簡単

使ってみる

$ npm install -g yo


$ yo backbone

yoこれだけで使いたい環境ができてしまう！

AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ！


$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee

yoモジュールのテンプレートが作成できる


bower

依存関係およびライブラリの情報を管理するためのファイル

bower.jsonとは？


bower

$ bower install --save-dev [パッケージ名] !

新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます

使い方


gruntタスクランナー

gruntにはpackage.jsonとGruntfile.jsが必要


gruntpackage.jsonとは？

必要なタスクプラグインを管理するためのファイル


gruntGruntfile.jsとは？

タスクを定義したファイルです


gruntGruntfile.jsとは？

いろんなタスクがあります $ grunt serve $ grunt build $ grunt test

grunt serveってやるとnodeサーバが立ち上がるんだぜぃ


完璧だ！！　さー開発しよう！


ちょっと待って！


そう言えばAjaxってAPIサーバ必要なんだけど・・


よし！全員APIサーバ構築しろ！！


Σ(ﾟдﾟ;) ﾇｵｫ!?


モック開発で効率良くgruntタスクに追加するんだよ


grunt-connect-proxyの構築

connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }],

Gruntfile.jsを少し書き換えろ！$ npm install grunt-connect-proxy --save-dev

モック開発で効率良く


grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, },

$ npm install grunt-easymock --save-dev

モック開発で効率良くgrunt-easymockの構築

Gruntfile.jsを少し書き換えろ！


モックサーバを構築するとめんどうなAPIサーバを構築しなくていい


Yeoman



http://albatrosary.hateblo.jp/entry/2014/02/06/155004

詳しくはこちら


Yeomanを使って効率良くSingle-page Applicationを作ろう！

結構大変だけどね。。

イカしてるだろ


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

html5 in-nagoya-11th

Technology