エフスタ 春のit祭り
DESCRIPTION
TRANSCRIPT
業務アプリケーションにおける これからのWeb開発
!
~ HTML5は簡単か ~
Profile:
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
佐川 夫美雄
HTML5はただのテキストファイル
はい!その通り!
エディターがあれば何でもできる!
はい!その通り!
簡単です!
ほんと?
HTML CSS
JavaScript
image
HTML5は簡単?
HTML CSS
JavaScript
Sass Compass
image
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
Compass
image
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image
Yuidoc
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
Yuidoc
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
HTML5は簡単?
HTML CSS
JavaScript
Sass
CoffeeScript
backboneunderscore
jQueryrequire
Compass
image imagemin
htmlmincssmin
jsmin
mocha chaiテスト
Yuidoc
HTML5は簡単?
easymock
想像以上に技術要素ないですか?
どこが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 !
って何???
ベンダープレフィックスっす!
ちょっと大変じゃない。。。
まだ考えることがあります
WebStorage
Indexed Database API
ブラウザ
Geolocation
Application CacheWebWorker
Web標準技術
まだまだ考えることがあります
JavaScriptフレームワークは何を使いますか?
Single-page Applicationですか?
altJSは何を使いますか?
ユニットテストツールは何を使いますか?
Pre Processorは何を使いますか?
セキュリティは考えてますか?
JavaScriptでビジネスロジック書けますか?
OOCSSでカスケードスタイルシート書けますか?
レスポンシブデザインを理解してますか?
UI/UXを理解してますか?
開発ツールは何を使いますか?
いまの要員でSingle-page Application作れますか?
以上を考慮して業務アプリケーションを作ります
これでもHTML5で業務アプリケーションを作る 技術要素の一部分にすぎません
開発環境のお話です
開発環境のおはなし
http://yeoman.io/
多くのアーキテクチャをどうやって開発するか
Yeoman とは
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
MODERN WORKFLOWS FOR MODERN WEBAPPS
開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
http://yeoman.io/
これはですね。。
Javaのmavenみたいなもんです もうちょっと高機能かも
インストールは簡単
使ってみる
$ npm install -g yo
generator はどのくらいある? http://yeoman.io/community-generators.html
yo雛形作成ツール
カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View !
!
サーバサイドのアプリケーションと連動するための RESTful JSON など
View
ejs Collection Model
HTML
Single-page Application(SPA)
単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用
events
renderchange
AjaxStorage
get
setModel
TemplateViewDOM
$ yo backbone
yo雛形作成ツール
これだけで概ねの環境ができてしまう!
yo
$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee
yoテンプレートを作成する
bowerTwitter社が作ったパッケージマネージャ
bower components はどのくらいあるか? http://bower.io/search/
bower
依存関係およびライブラリの情報を管理するためのファイル
bower.jsonとは?
bowerbackbonejsを作るときに必要なコンポーネント
{ "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が必要
gruntpackage.jsonとは?
必要なタスクプラグインを管理するためのファイル
gruntpackage.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" }, "engines": { "node": ">=0.8.0" } }
grunt使い方は
$ npm install --save-dev [プラグイン名] !
新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます
gruntGruntfile.jsとは?
タスクを定義したファイルです
gruntGruntfile.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
connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }],
Gruntfile.js
grunt-easymockの構築
$ npm install grunt-easymock --save-dev
grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, },
Gruntfile.js
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を作ろう
結構大変だけどね。。
ご清聴ありがとうございました