業務アプリケーションにおけるこれからのWeb開発@OSC.名古屋

7,731 views
7,423 views

Published on

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

No Downloads
Views
Total views
7,731
On SlideShare
0
From Embeds
0
Number of Embeds
192
Actions
Shares
0
Downloads
40
Comments
0
Likes
35
Embeds 0
No embeds

No notes for slide

業務アプリケーションにおけるこれからのWeb開発@OSC.名古屋

  1. 1. 佐川 夫美雄@albatrosary 2014/7/5(土) オープンソースカンファレンス@名古屋
  2. 2. 佐川 夫美雄 HTML5 Experts.jp コントリビュータ html5jエンタープライズ部(副部長) html5j Web Platform部(メンバー) AngularJS Japan User Group(メンバー) Sencha UG(CO-ORGANIZER) http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ (Fumio SAGAWA)
  3. 3. 業務Webアプリケーション http://html5experts.jp/albatrosary/3191/
  4. 4. HTML5が2014年に正式勧告
  5. 5. 歴史 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年
  6. 6. 空白の時代 Webアプリケーションを リッチにしてきたもの
  7. 7. Rich Internet Application
  8. 8. Rich Internet Application 表現力の高さ デスクトップアプケーションと同等なUI ユーザーエクスペリエンス
  9. 9. 2010年 Steve JobsがFlashを批判 2011年 Silverlight後退/ モバイルFlash開発中止
  10. 10. プロプライエタリより オープン性のあるHTML5
  11. 11. Webのプラットフォーム化
  12. 12. HTML5の方向性 Webのプラットフォーム化 Elements Offline Web Application Application Cache Web Strage Indexed Database File API Network WebSocket SPDY Web Workers マルチメディア対応 video audio canvas SVG WebGL
  13. 13. elements HTML4 HTML5
  14. 14. inputタイプの種類 カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻 検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
  15. 15. マルチメディア プラグイン無し!
  16. 16. audio オーディオを再生する controls オーディオコントロールの表示 autoplay 自動再生 loop 繰り返し実行 source メディアリソース src リソース type メディア型
  17. 17. SVG Scalable Vector Graphics SVGはHTML5とは独自企画 HTML5普及と共にサポート
  18. 18. D3.js Data Driven Decument http://d3js.org/
  19. 19. Canvas グラフを書く 写真を合成する アニメーション
  20. 20. WebGL 3DCGプログラミングを実現
  21. 21. WebGLは難しい WebGLを利用するための手順 3DCGプログラミングの基礎知識 行列やベクトルといった知識 学習コストが高い
  22. 22. 重要な要素 シーン 作成する3Dの世界 カメラ シーンの状態を撮影する 光源 光の当て方 物体 撮影するもの
  23. 23. シーン
  24. 24. カメラ fov 画角 aspect 撮影結果の縦横比 near ニアークリップ:nearより近い領域は表示されない far ファークリップ:farより遠い領域は表示されない
  25. 25. 光源
  26. 26. 物体 ジオメトリー(形状)とマテリアル(表面素材)を用意した上で、 メッシュ(物体)を作成
  27. 27. 完成
  28. 28. Three.js WebGLのラッパーライブラリ http://threejs.org/
  29. 29. WebGLプログラミング http://html5experts.jp/yomotsu/5225/
  30. 30. Webなのに Offline Web Application
  31. 31. Application Cache Web Storage Indexed Database API File API
  32. 32. ここまでのまとめ Webを標準化することで 難しい技術が扱いやすくなる
  33. 33. 業務アプリケーションの開発は?
  34. 34. 技術要素 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 通信技術 バックエンド
  35. 35. モダンWebアプリケーション Controller Browser HTML JavaScript アプリケーションサーバ RDBMS Business Logic O/R POJO 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで サーバへ送信 3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示
  36. 36. Old Web vs Multi-Deviace Architectures Page Display Page Generation Logic & State Data Integration User Interface Interface Management Logic & State Data Integration APIs Native & HTML5 Browser App Server
  37. 37. Interface Elements Server I/O Logic & Data View System Basic Widgets buttons, bars, test fields… Containers panels, cards, modals… Layout Manager absolute, flexible Templationg iterations, conditionals Compound Widgets trees, grids, gauges… Themes Visualizations charts, infographics Styles Visual Effects animations, filters… Localization RTL, local libraries Accessibility focus manager, ARIA… Interactions gestures, drag & drop Drawing vector, bitmap Theming computed styles State Manager history, undo, routes Data Objects queues, hoshtables Data Models & Stores group, sort, validate Persistent Data cache & sync Mulitimedia 3D, audio, video Data Binding 1-way, 2-way Modularity components, modules Testing IOC, test hooks Server Calls asynch, conversion Server Method Invocation 2-Way Data Server Notifications
  38. 38. Single-page Application 単一ページによるWebアプリケーション ページはDOMの操作による切替え サーバとのやりとりはRESTやWebSocket等
  39. 39. HTML CSS JavaScript image
  40. 40. HTML CSS JavaScript Sass Compass image
  41. 41. HTML CSS JavaScript Sass CoffeeScript Compass image
  42. 42. HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image
  43. 43. HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image Yuidoc
  44. 44. HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin Yuidoc
  45. 45. HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai テスト Yuidoc
  46. 46. HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai テスト Yuidoc easymock
  47. 47. http://yeoman.io/
  48. 48. YEOMAN http://yeoman.io/
  49. 49. YEOMANワークフロー
  50. 50. いいところ テンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれる まだまだ色々あります
  51. 51. yo 雛形作成ツール bower フロントエンドパッケージマネージャ grunt タスクランナー
  52. 52. つまりYEOMANというのは Web開発のscaffolding scaffoldingとは、1(建築現場などの)足場/2[集合的に] 足場材料
  53. 53. 使い始めるのは簡単! 1. nodejsをインストール 2. npm install -g yo git/ruby/compassを入れておくといいよ
  54. 54. scaffoldingツール 多くのgenerator
  55. 55. OFFICIAL GENERATORS 20 COMMUNITY GENERATORS 782
  56. 56. パッケージマネージャ Twitter, opne-source community bower.jsonで設定管理
  57. 57. Bower Packages 13,178
  58. 58. JavaScriptラスクランナー package.jsonで設定管理 Gruntfile.jsでタスクを定義
  59. 59. Grunt plugin 2,990
  60. 60. generator bower.json Gruntfile.json package.json Node Packager Manager github
  61. 61. これだけ覚える $ npm install -g generator-hoge $ mkdir my-hoge-app && cd $_ $ yo hoge $ grunt serve $ grunt build
  62. 62. イカしてるだろ?
  63. 63. AngularJS https://angularjs.org/
  64. 64. 特徴 ・双方向バインディング ・テンプレートとしてのHTML ・再利用可能なコンポーネント ・ビューとルーティング ・テストとテストのしやすさ
  65. 65. 得意なところ ・CRUD系のアプリケーション ・管理画面、マイページ ・1ページで完結するアプリケーション
  66. 66. 不得意なところ ・モバイル向けアプリケーション ・ゲームなどで使うグラフィック系、エフェクト系
  67. 67. Model View Whatever
  68. 68. Angular UI http://angular-ui.github.io/
  69. 69. Onsen UI http://onsenui.io/
  70. 70. html5jエンタープライズ部 AngularJS+bootstrap+Application Cache http://www.html5biz.org/
  71. 71. と、色々お話しましたが
  72. 72. どうでもいいから とにかく触ってみようぜ! by Angularな人たち
  73. 73. 続きは展示会場で!
  74. 74. Thanks

×