業務アプリケーションにおける
これからのWeb開発
2014/5/24 オープンソースカンファレンス・沖縄
Fumio SAGAWA@albatrosary
佐川 夫美雄
HTML5Expert.jpコントリビュータ
HTML5 fun
!
html5jエンタープライズ部 副部長
html5j Web Platform部
KnockoutJS Japan User Group
Sencha UG C...
HTML5が2014年に正式勧告
SGML(standard Generalized Markup Language)
1986年
HTML(HyperText Markup Language)
1989年
HTML 4.0(HyperText Markup Language)...
タグの話
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開発者に対するSilverligh...
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/R
POJO
従来型のWebアプリケーション
1. リクエストをサーバへ送りController...
次世代型のWebアプリケーション
1. HTMLで作成された画面を表示
2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで
サーバへ送信
3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な
...
Java
RIA
Single-page Application
Single-page Application(SPA)
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用
events
render
change
Ajax...
HTML5をどう利用するか
SPAに必要な技術
JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
通信技術
Webアプリケーションなどのバックエンド技術
JavaScriptフレームワーク
http://backbonejs.org/
http://angularjs.org/
http://www.sencha.com/
すでにJavaScriptフレームワークは数十種類ある
自分のプロジェク...
altJS
http://coffeescript.org/
2009年
http://www.typescriptlang.org/
2012年
http://html5experts.jp/clockmaker/2183/
altJSの言語の...
CSS Preprocessor
http://sass-lang.com/
http://compass-style.org/
http://lesscss.org/
http://learnboost.github.io/stylus/
膨...
開発環境
http://yeoman.io/
http://www.sencha.com/products/sencha-cmd/download
多くのアーキテクチャをどうやって開発するか
https://www.microsoft.com/...
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
C...
$ yo backbone
yo
雛形作成ツール
これだけで概ねの環境ができてしまう!
yo
$ yo backbone:view view名 --coffee
$ yo backbone:model model名 --coffee
$ yo backbone:collection collection名 --coffee
$ yo back...
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...
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とは?
必要なタスクプラグインを管理するためのファイル
grunt
package.jsonとは?
{
"name": "backbone-app",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": " 0....
grunt
使い方は
$ npm install --save-dev [プラグイン名]
!
新しいプラグインをダウンロードし
package.jsonにその情報を書き込みます
grunt
Gruntfile.jsとは?
タスクを定義したファイルです
grunt
Gruntfile.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: 'lo...
grunt-easymockの構築
$ npm install grunt-easymock --save-dev
grunt.initConfig({
yeoman: yeomanConfig,
/* easymockの設定 */
easymoc...
grunt-easymockの構築
ここで「easymock」の次の「mockapi」キーワードが重要
これとproxyで定義したcontextを一致させる
!
期待するURLは
/mockapi/users/1
です。
grunt-easymockの構築
easymockをタスクに登録
grunt.task.run([
'clean:server',
'coffee:dist',
'createDefaultTemplate',
'handlebars',
'c...
モックサーバを構築すると
面倒なAPIサーバを構築しなくていい
色々と便利!
SPAの難しいところ
パフォーマンス
メモリリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足
Thanks.
Upcoming SlideShare
Loading in...5
×

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

1,246

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,246
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

  1. 1. 業務アプリケーションにおける これからのWeb開発 2014/5/24 オープンソースカンファレンス・沖縄 Fumio SAGAWA@albatrosary
  2. 2. 佐川 夫美雄 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)
  3. 3. HTML5が2014年に正式勧告
  4. 4. 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の歴史
  5. 5. タグの話
  6. 6. HTML4 HTML5 どう変わるか
  7. 7. カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻 inputタイプの種類 検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
  8. 8. ブラウザはどうなっているか
  9. 9. http://html5test.com/ ブラウザ
  10. 10. HTML5と通信
  11. 11. より早く双方向に
  12. 12. クライアントとサーバが接続し続ける 双方向通信 WebSocket
  13. 13. 既存のHTTPを拡張 複数のリクエストを送受信することが可能
  14. 14. Geolocation
  15. 15. Geolocation Geolocation APIによる位置情報通知
  16. 16. Geolocation https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ja
  17. 17. Webなのに Offline Web Application
  18. 18. Application Cache Web Strage Indexed Databace API File API
  19. 19. キーと値でブラウザにデータを保持 するデータベース Indexed Database API
  20. 20. クッキーを巨大にしたkey/Valueの入れ物 WebStorage
  21. 21. Application Cache ユーザーがオフラインのときでも サイトにアクセス
  22. 22. HTML5が注目される訳
  23. 23. Rich Internet Applicationの衰退 2010年 Steve JobsがFlashを激しく批判 プロプライエタリよりオープン性のあるHTML5を推進! 2011年 MicrosoftはWeb開発者に対するSilverlight戦略を後退     AdobeもモバイルFlashの開発を中止 2014年 HTML5正式勧告
  24. 24. Rich Internet Applicationに求められたもの 表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の再生機能 を備える デスクトップアプケーションと同等なUI:画面をリフレッシュすることなく、バック エンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス:ユーザーの操作が即座にレスポンスされ、表示される画面の情報が 操作に応じて随時変化するようなインタラクティブな操作性を実現
  25. 25. HTML5を使えばRIAと同等のユーザビリティが可能
  26. 26. Javaで対応 次世代型のWebアプリケーションでは、基本的にはJavaScript で多くの処理を行い、次のような通信技術を利用して、データ のみをサーバとやり取りします。 ! JSON 1.0 JAX-RS 2.0 WebSocket 1.0
  27. 27. Controller JSP Browser HTML JavaScript アプリケーションサーバ RDBMS Business Logic O/R POJO 従来型のWebアプリケーション 1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得
  28. 28. 次世代型のWebアプリケーション 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで サーバへ送信 3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示 Controller Browser HTML JavaScript アプリケーションサーバ RDBMS Business Logic O/R POJO
  29. 29. Java RIA Single-page Application
  30. 30. Single-page Application(SPA) 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 events render change Ajax get set Model TemplateViewDOM
  31. 31. HTML5をどう利用するか
  32. 32. SPAに必要な技術 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 Webアプリケーションなどのバックエンド技術
  33. 33. JavaScriptフレームワーク http://backbonejs.org/ http://angularjs.org/ http://www.sencha.com/ すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ http://knockoutjs.com/
  34. 34. altJS http://coffeescript.org/ 2009年 http://www.typescriptlang.org/ 2012年 http://html5experts.jp/clockmaker/2183/ altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決
  35. 35. CSS Preprocessor http://sass-lang.com/ http://compass-style.org/ http://lesscss.org/ http://learnboost.github.io/stylus/ 膨大なCSSをどう整理するか
  36. 36. 開発環境 http://yeoman.io/ http://www.sencha.com/products/sencha-cmd/download 多くのアーキテクチャをどうやって開発するか https://www.microsoft.com/ja-jp/dev/default.aspx
  37. 37. SPAに必要なフロントエンド技術
  38. 38. 具体的な実例
  39. 39. http://html5experts.jp/albatrosary/3191/
  40. 40. これで安心?
  41. 41. 開発環境のおはなし - YEOMAN http://yeoman.io/ 多くのアーキテクチャをどうやって開発するか
  42. 42. Yeoman とは Webアプリケーションのための総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) MODERN WORKFLOWS FOR MODERN WEBAPPS
  43. 43. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド
  44. 44. これはですね。。 Javaのmavenみたいなもんです もうちょっと高機能かも
  45. 45. インストールは簡単 使ってみる $ npm install -g yo
  46. 46. generator はどのくらいある? http://yeoman.io/community-generators.html yo 雛形作成ツール
  47. 47. カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! ! サーバサイドのアプリケーションと連動するため の RESTful JSON など View ejs Collection Model HTML
  48. 48. $ yo backbone yo 雛形作成ツール
  49. 49. これだけで概ねの環境ができてしまう! yo
  50. 50. $ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee yo テンプレートを作成する
  51. 51. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/
  52. 52. bower 依存関係およびライブラリの情報を 管理するためのファイル bower.jsonとは?
  53. 53. 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": {} }
  54. 54. bower $ bower install ! このコマンドでbower.jsonに定義しているコン ポーネントをダウンロードします 使い方
  55. 55. bower $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードし bower.jsonにその情報を書き込みます 使い方
  56. 56. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins
  57. 57. grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要
  58. 58. grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル
  59. 59. 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" }, "engines": { "node": ">=0.8.0" } }
  60. 60. grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードし package.jsonにその情報を書き込みます
  61. 61. grunt Gruntfile.jsとは? タスクを定義したファイルです
  62. 62. grunt Gruntfile.jsとは? コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
  63. 63. モック開発で効率よく
  64. 64. 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
  65. 65. 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
  66. 66. grunt-easymockの構築 ここで「easymock」の次の「mockapi」キーワードが重要 これとproxyで定義したcontextを一致させる ! 期待するURLは /mockapi/users/1 です。
  67. 67. grunt-easymockの構築 easymockをタスクに登録 grunt.task.run([ 'clean:server', 'coffee:dist', 'createDefaultTemplate', 'handlebars', 'compass:server', 'configureProxies', 'connect:livereload', 'open', 'easymock', 'watch' ]);
  68. 68. モックサーバを構築すると 面倒なAPIサーバを構築しなくていい
  69. 69. 色々と便利!
  70. 70. SPAの難しいところ パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足
  71. 71. Thanks.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×