業務アプリケーションにおける これからの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を作ろう

結構大変だけどね。。

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