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

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

はい！その通り！

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

はい！その通り！

簡単です！

ほんと？

HTML5は簡単？
HTML
CSS
JavaScript
image

HTML5は簡単？
HTML
CSS
Sass
JavaScript
image
Compass

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

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

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

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

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

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

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

どこがCSSでしょうか？

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

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

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

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

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

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

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

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

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;
}

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

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

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

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

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

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

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

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

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

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

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

yo
雛形作成ツール
$ yo backbone

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

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

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

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

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": {}
}

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

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

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

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

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

{
"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"
}
}

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

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

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

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

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
}],

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'
]
},
},
},
},

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

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

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

簡単Single-page Application開発！

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

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

続きはWebで！

続きはWeb306教室で！

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