2. Profile:
!
佐川 夫美雄
@albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5Expert.jpコントリビュータ
html5jエンタープライズ部 副部長
Angularユーザ会 スタッフ
Sencha UG CO-ORGANIZER

3. HTML5はただのテキストファイル

4. はい！その通り！

5. エディターがあれば何でもできる！

6. はい！その通り！

7. 簡単です！

8. ほんと？

9. HTML5は簡単？
HTML
CSS
JavaScript
image

10. HTML5は簡単？
HTML
CSS
Sass
JavaScript
image
Compass

11. HTML5は簡単？
HTML
CSS
Sass
JavaScript CoffeeScript
image
Compass

12. HTML5は簡単？
HTML
CSS
Sass
JavaScript CoffeeScript
image
backbone
underscore
jQuery
require
Compass

13. HTML5は簡単？
HTML
CSS
Sass
JavaScript CoffeeScript
image
Yuidoc
backbone
underscore
jQuery
require
Compass

14. HTML5は簡単？
cssmin
htmlmin
jsmin
Yuidoc
CSS
Sass
Compass
image
HTML
imagemin
JavaScript CoffeeScript
backbone
underscore
jQuery
require

15. HTML5は簡単？
cssmin
htmlmin
jsmin
Yuidoc
CSS
Sass
Compass
image
HTML
imagemin
JavaScript CoffeeScript
backbone
underscore
jQuery
require
テスト
mocha
chai

16. HTML5は簡単？
cssmin
htmlmin
jsmin
Yuidoc
CSS
Sass
Compass
image
HTML
imagemin
JavaScript CoffeeScript
backbone
underscore
easymock
jQuery
require
テスト
mocha
chai

17. 想像以上に技術要素ないですか？

18. どこがCSSでしょうか？

19. どこがCSSでしょうか？
この色

20. どこがCSSでしょうか？
フォン
トサイズ
この色

21. どこがCSSでしょうか？
フォン
トサイズ
フォント
の色
この色

22. どこがCSSでしょうか？
フォン
トサイズ
フォント
の色
丸まって
るところ
この色

23. どこがCSSでしょうか？
丸まって
るところ
フォント
の色
フォン
トサイズ
丸まって
るところ
この色

24. どこがCSSでしょうか？
丸まって
るところ
フォント
の色
フォン
トサイズ
丸まって
るところ
このメニュー
この色

25. こんな風にもなる
なにこれ・・
縮めてみた

26. こんな風にもなる
なにこれ・・
縮めてみた
メニューだった
りします

27. CSSの中身を覗いてみる
.modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}

28. CSSの中身を覗いてみる
-webkit
-moz
-ms
-o
!
って何？？？

29. CSSの中身を覗いてみる
-webkit
-moz
-ms
-o
!
って何？？？
ベンダープレ
フィックスっす！

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

31. 開発環境のおはなし
多くのアーキテクチャをどうやって開発するか
http://yeoman.io/

32. Yeoman とは
MODERN WORKFLOWS FOR MODERN WEBAPPS
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)

33. 開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
http://yeoman.io/

34. これはですね。。
Javaのmavenみたいなもんです
もうちょっと高機能かも

35. 使ってみる
インストールは簡単
$ npm install -g yo

36. yo
雛形作成ツール
generator はどのくらいある？
http://yeoman.io/community-generators.html

37. HTML
カスタムイベントを備えた Model
Model のイテレーションである Collection
イベントをハンドリングする View
!
View
!
ejs
Collection
Model
サーバサイドのアプリケーションと連動するため
の RESTful JSON など

38. Single-page Application(SPA)
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
change
DOM
events
render
View
Template
get
set
Model
Ajax
Storage

39. yo
雛形作成ツール
$ yo backbone

40. yo
これだけで概ねの環境ができてしまう！

41. yo
テンプレートを作成する
$
$
$
$
yo
yo
yo
yo
backbone:view view名 --coffee
backbone:model model名 --coffee
backbone:collection collection名 --coffee
backbone:router router名 --coffee

42. bower
Twitter社が作ったパッケージマネージャ
bower components はどのくらいあるか？
http://bower.io/search/

43. bower
bower.jsonとは？
依存関係およびライブラリの情報を管理するためのファイル

44. bower
backbonejsを作るときに必要なコンポーネント
{
"name": "backbone-app",
"version": "0.0.0",
"dependencies": {
"sass-bootstrap": " 3.0.0",
"jquery": " 1.9.0",
"underscore": " 1.4.3",
"backbone": " 1.0.0",
"requirejs": " 2.1.5",
"requirejs-text": " 2.0.5",
"modernizr": " 2.6.2",
"backbone.localStorage": " 1.1.7"
},
"devDependencies": {}
}

45. bower
使い方
$ bower install
!
このコマンドでbower.jsonに定義しているコンポーネントをダ
ウンロードします

46. bower
使い方
$ bower install --save-dev [パッケージ名]
!
新しいコンポーネントをダウンロードしbower.jsonにその情
報を書き込みます

47. grunt
タスクランナー
grunt で登録されているプラグインは?
http://gruntjs.com/plugins

48. grunt
タスクランナー
gruntにはpackage.jsonとGruntfile.jsが必要

49. grunt
package.jsonとは？
必要なタスクプラグインを管理するためのファイル

50. {
"name": "backbone-app",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": " 0.4.1",
"grunt-contrib-copy": " 0.4.0",
"grunt-contrib-concat": " 0.3.0",
"grunt-contrib-coffee": " 0.7.0",
"grunt-contrib-jst": " 0.5.0",
"grunt-contrib-uglify": " 0.2.0",
"grunt-contrib-compass": " 0.5.0",
"grunt-contrib-jshint": " 0.6.3",
"grunt-contrib-cssmin": " 0.6.0",
"grunt-contrib-connect": " 0.3.0",
"grunt-contrib-clean": " 0.5.0",
"grunt-contrib-htmlmin": " 0.1.3",
"grunt-contrib-imagemin": " 0.2.0",
"grunt-contrib-watch": " 0.5.2",
"grunt-mocha": " 0.4.1",
"grunt-usemin": " 0.1.10",
"grunt-bower-requirejs": " 0.7.0",
"grunt-requirejs": " 0.4.0",
"grunt-rev": " 0.1.0",
"grunt-open": " 0.2.0",
"load-grunt-tasks": " 0.1.0",
"connect-livereload": " 0.2.0",
"time-grunt": " 0.2.1",
"jshint-stylish": " 0.1.3"
},
grunt
package.jsonとは？
"engines": {
"node": ">=0.8.0"
}
}

51. grunt
使い方は
$ npm install --save-dev [プラグイン名]
!
新しいプラグインをダウンロードしpackage.jsonにその情報
を書き込みます

52. grunt
Gruntfile.jsとは？
タスクを定義したファイルです

53. grunt
Gruntfile.jsとは？
コマンドがいろいろ定義していますが
$ grunt serve
$ grunt build
$ grunt test
これにモックアップ開発用に
$ grunt mock

54. モック開発で効率よく
http://albatrosary.hateblo.jp/entry/2014/02/06/155004

55. grunt-connect-proxyの構築
$ npm install grunt-connect-proxy --save-dev
Gruntfile.js
connect: {
options: {
port: SERVER_PORT,
hostname: 'localhost'
},
livereload: {
・・・
},
/* プロキシサーバの設定 */
proxies: [{
context: '/mockapi',
host: 'localhost',
port: '3000',
https: false,
changeOrigin: false
}],

56. grunt-easymockの構築
$ npm install grunt-easymock --save-dev
Gruntfile.js
grunt.initConfig({
yeoman: yeomanConfig,
/* easymockの設定 */
easymock: {
mockapi: {
options: {
port: 3000,
path: 'server/api-server',
config: {
routes: [
'/users/:id'
]
},
},
},
},

57. grunt-easymockの構築
ここで「easymock」の次の「mockapi」キーワードが重要
これとproxyで定義したcontextを一致させる
!
期待するURLは
/mockapi/users/1
です。

58. grunt-easymockの構築
easymockをタスクに登録
grunt.task.run([
'clean:server',
'coffee:dist',
'createDefaultTemplate',
'handlebars',
'compass:server',
'configureProxies',
'connect:livereload',
'open',
'easymock',
'watch'
]);

59. grunt-easymockの構築
モックサーバを構築するとめんどうなAPIサーバを構築しなくていい

60. 簡単Single-page Application開発！

61. なるべく簡単Single-page Application開発！

62. Yeomanを使って効率良くHTML5を作ろう
結構大変だけどね。。

63. 続きはWebで！

64. 続きはWeb306教室で！

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