業務アプリケーションにおける これからのWeb開発

2014/5/24 オープンソースカンファレンス・沖縄Fumio SAGAWA@albatrosary

佐川　夫美雄

HTML5Expert.jpコントリビュータ HTML5 fun !html5jエンタープライズ部 副部長 html5j Web Platform部 KnockoutJS Japan User Group Sencha UG CO-ORGANIZER AngularJS Japan User Group

http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

(Fumio SAGAWA)

HTML5が2014年に正式勧告

SGML(standard Generalized Markup Language) 1986年

HTML(HyperText Markup Language) 1989年

HTML 4.0(HyperText Markup Language) 1997年

XML(eXtensible Markup Language) 1998年

XHTML(eXtensible HyperText Markup Language) 2000年

HTML 5.0(HyperText Markup Language) 2012年

CSS 1 1996年

CSS 2 1998年

CSS 2.1 2004年

CSS 3 2011年

HTTP 1.1 1999年

HTTP 1.0 1996年

HTTP 0.9 1993年

SPDY 2011年

XHTML 2.0(eXtensible HyperText Markup Language) 2010年

HTTP 2(draft) 2012年

Webの歴史

タグの話

HTML4 HTML5

どう変わるか

カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻

inputタイプの種類

検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス

ブラウザはどうなっているか

http://html5test.com/

ブラウザ

HTML5と通信

より早く双方向に

クライアントとサーバが接続し続ける 双方向通信

WebSocket

既存のHTTPを拡張 複数のリクエストを送受信することが可能

Geolocation

Geolocation

Geolocation APIによる位置情報通知

Geolocation

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ja

Webなのに Offline Web Application

Application Cache Web Strage Indexed Databace API File API

キーと値でブラウザにデータを保持 するデータベース

Indexed Database API

クッキーを巨大にしたkey/Valueの入れ物

WebStorage

Application Cache

ユーザーがオフラインのときでもサイトにアクセス

HTML5が注目される訳

Rich Internet Applicationの衰退

2010年 Steve JobsがFlashを激しく批判

プロプライエタリよりオープン性のあるHTML5を推進!

2011年 MicrosoftはWeb開発者に対するSilverlight戦略を後退

　　　 AdobeもモバイルFlashの開発を中止

2014年 HTML5正式勧告

Rich Internet Applicationに求められたもの

表現力の高さ：動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の再生機能

を備える デスクトップアプケーションと同等なUI：画面をリフレッシュすることなく、バック

エンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面の情報が

操作に応じて随時変化するようなインタラクティブな操作性を実現

HTML5を使えばRIAと同等のユーザビリティが可能

Javaで対応

次世代型のWebアプリケーションでは、基本的にはJavaScriptで多くの処理を行い、次のような通信技術を利用して、データのみをサーバとやり取りします。 !

JSON 1.0 JAX-RS 2.0 WebSocket 1.0

Controller

JSP

Browser

HTML JavaScript

アプリケーションサーバ RDBMS

Business Logic O/RPOJO

従来型のWebアプリケーション

1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得（登録・更新） 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得

次世代型のWebアプリケーション

1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONでサーバへ送信

3. サーバでは受け取った情報（JSON）をPOJOへ変換し登録・更新などの処理を行う

4. 表示データはJSONでクライアントへ画面へ表示

Controller

Browser

HTML JavaScript

アプリケーションサーバ RDBMS

Business Logic O/RPOJO

Java

RIASingle-page Application

Single-page Application(SPA)

単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用

events

renderchange

Ajax

get

setModel

TemplateViewDOM

HTML5をどう利用するか

SPAに必要な技術

JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 Webアプリケーションなどのバックエンド技術

JavaScriptフレームワーク

http://backbonejs.org/

http://angularjs.org/

http://www.sencha.com/

すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ

http://knockoutjs.com/

altJS

http://coffeescript.org/2009年

http://www.typescriptlang.org/2012年

http://html5experts.jp/clockmaker/2183/

altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決

CSS Preprocessor

http://sass-lang.com/http://compass-style.org/

http://lesscss.org/

http://learnboost.github.io/stylus/

膨大なCSSをどう整理するか

開発環境

http://yeoman.io/

http://www.sencha.com/products/sencha-cmd/download

多くのアーキテクチャをどうやって開発するか

https://www.microsoft.com/ja-jp/dev/default.aspx

SPAに必要なフロントエンド技術

具体的な実例

http://html5experts.jp/albatrosary/3191/

これで安心？

開発環境のおはなし - YEOMAN

http://yeoman.io/

多くのアーキテクチャをどうやって開発するか

Yeoman とは

Webアプリケーションのための総合開発ツール群

yo(雛形作成ツール)

grunt(タスクランナー)

bower(フロントエンドパッケージマネージャ)

MODERN WORKFLOWS FOR MODERN WEBAPPS

開発の大まかな流れ

1. yo [generator] によるひな形

2. grunt server を使用しアプリケーション開発

3. grunt build によるリリースビルド

これはですね。。

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

$ 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

モック開発で効率よく

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' ]);

モックサーバを構築すると 面倒なAPIサーバを構築しなくていい

色々と便利！

SPAの難しいところ

パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足

Thanks.