業務アプリケーションにおけるこれからのWeb開発
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 906 views

 

Statistics

Views

Total Views
906
Views on SlideShare
906
Embed Views
0

Actions

Likes
4
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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