Html5 in-nagoya-11th
-
Upload
fumio-sagawa -
Category
Technology
-
view
869 -
download
0
description
Transcript of Html5 in-nagoya-11th
![Page 1: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/1.jpg)
HTML5勉強会#11 in 名古屋
![Page 2: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/2.jpg)
HTML5勉強会#11 in 名古屋
!
!
佐川 夫美雄
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
Profile:
![Page 3: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/3.jpg)
HTML5勉強会#11 in 名古屋
Single-page Application(SPA)
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
何か最近話題だよね?!でもSPAって書くとお風呂になっちゃうんだよ
![Page 4: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/4.jpg)
HTML5勉強会#11 in 名古屋
こんなの簡単さ!
![Page 5: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/5.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
image
SPAを開発するには?
![Page 6: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/6.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass Compass
image
SPAを開発するには?
![Page 7: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/7.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
SPAを開発するには?
![Page 8: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/8.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
SPAを開発するには?
![Page 9: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/9.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
SPAを開発するには?
![Page 10: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/10.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
SPAを開発するには?
![Page 11: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/11.jpg)
HTML5勉強会#11 in 名古屋
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
SPAを開発するには?
![Page 12: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/12.jpg)
HTML5勉強会#11 in 名古屋
ちょっと大変じゃない。。。
![Page 13: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/13.jpg)
HTML5勉強会#11 in 名古屋
どーやって開発するの? ┐(‾ヘ‾)┌
![Page 14: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/14.jpg)
HTML5勉強会#11 in 名古屋
そこで統合開発ツールの登場です!
![Page 15: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/15.jpg)
HTML5勉強会#11 in 名古屋
開発環境のおはなし
http://yeoman.io/
面倒なことは全部このおっさんにやらせちゃえばいいんだよ
![Page 16: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/16.jpg)
HTML5勉強会#11 in 名古屋
Yeoman とは
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
MODERN WORKFLOWS FOR MODERN WEBAPPS
Javaのmavenみたいなもんです もうちょっと高機能かも
![Page 17: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/17.jpg)
HTML5勉強会#11 in 名古屋
インストールは簡単
使ってみる
$ npm install -g yo
![Page 18: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/18.jpg)
HTML5勉強会#11 in 名古屋
$ yo backbone
yoこれだけで使いたい環境ができてしまう!
AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ!
![Page 19: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/19.jpg)
HTML5勉強会#11 in 名古屋
$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee
yoモジュールのテンプレートが作成できる
![Page 20: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/20.jpg)
HTML5勉強会#11 in 名古屋
bower
依存関係およびライブラリの情報を管理するためのファイル
bower.jsonとは?
![Page 21: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/21.jpg)
HTML5勉強会#11 in 名古屋
bower
$ bower install --save-dev [パッケージ名] !
新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます
使い方
![Page 22: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/22.jpg)
HTML5勉強会#11 in 名古屋
gruntタスクランナー
gruntにはpackage.jsonとGruntfile.jsが必要
![Page 23: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/23.jpg)
HTML5勉強会#11 in 名古屋
gruntpackage.jsonとは?
必要なタスクプラグインを管理するためのファイル
![Page 24: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/24.jpg)
HTML5勉強会#11 in 名古屋
gruntGruntfile.jsとは?
タスクを定義したファイルです
![Page 25: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/25.jpg)
HTML5勉強会#11 in 名古屋
gruntGruntfile.jsとは?
いろんなタスクがあります $ grunt serve $ grunt build $ grunt test
grunt serveってやるとnodeサーバが立ち上がるんだぜぃ
![Page 26: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/26.jpg)
HTML5勉強会#11 in 名古屋
完璧だ!! さー開発しよう!
![Page 27: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/27.jpg)
HTML5勉強会#11 in 名古屋
ちょっと待って!
![Page 28: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/28.jpg)
HTML5勉強会#11 in 名古屋
そう言えばAjaxってAPIサーバ必要なんだけど・・
![Page 29: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/29.jpg)
HTML5勉強会#11 in 名古屋
よし!全員APIサーバ構築しろ!!
![Page 30: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/30.jpg)
HTML5勉強会#11 in 名古屋
Σ(゚д゚;) ヌオォ!?
![Page 31: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/31.jpg)
HTML5勉強会#11 in 名古屋
モック開発で効率良くgruntタスクに追加するんだよ
![Page 32: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/32.jpg)
HTML5勉強会#11 in 名古屋
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
モック開発で効率良く
![Page 33: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/33.jpg)
HTML5勉強会#11 in 名古屋
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を少し書き換えろ!
![Page 34: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/34.jpg)
HTML5勉強会#11 in 名古屋
モックサーバを構築するとめんどうなAPIサーバを構築しなくていい
モック開発で効率良く
Yeoman
![Page 35: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/35.jpg)
HTML5勉強会#11 in 名古屋
モック開発で効率良く
http://albatrosary.hateblo.jp/entry/2014/02/06/155004
詳しくはこちら
![Page 36: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/36.jpg)
HTML5勉強会#11 in 名古屋
Yeomanを使って効率良くSingle-page Applicationを作ろう!
結構大変だけどね。。
イカしてるだろ
![Page 37: Html5 in-nagoya-11th](https://reader034.fdocument.pub/reader034/viewer/2022052618/54b74f7e4a79592b5b8b45b3/html5/thumbnails/37.jpg)
HTML5勉強会#11 in 名古屋
ご清聴ありがとうございました