業務アプリケーションにおけるモダン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の中身を覗いてみる

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


-webkit -moz -ms -o !

って何？？？


-webkit -moz -ms -o !

って何？？？

ベンダープレフィックスっす！

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

開発環境のおはなし

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


ここで「easymock」の次の「mockapi」キーワードが重要これとproxyで定義したcontextを一致させる !

期待するURLは

/mockapi/users/1

です。


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


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

簡単Single-page Application開発！

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

Yeomanを使って効率良くHTML5を作ろう

結構大変だけどね。。

続きはWebで！

続きはWeb306教室で！

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

業務アプリケーションにおけるモダンweb開発の現状ーhtml5開発って簡単なの？...

Technology