オープンソースで始めるオフラインアプリケーション開発入門

7,386 views

Published on

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

No Downloads
Views
Total views
7,386
On SlideShare
0
From Embeds
0
Number of Embeds
1,107
Actions
Shares
0
Downloads
75
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

オープンソースで始めるオフラインアプリケーション開発入門

  1. 1. ! オープン系セッション オープンソースで始める オフラインアプリケーション開発入門 #html5biz #html5bizB
  2. 2. Profile: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER #html5biz #html5bizB
  3. 3. 本日お話すること OSSで作るSingle-page Application Offline Web Application #html5biz #html5bizB
  4. 4. 業務系Webアプリケーション開発で何が起きているか http://html5experts.jp/albatrosary/3191/ #html5biz #html5bizB
  5. 5. ファイナンシャルプランナーとは 顧客である個人から、収支・負債・家族構成・資産 状況などのリソース提供を受け、それを基に住居・ 教育・老後など将来のライフプランニング(人生設 計計画)に即した資金計画やアドバイスを行う職種 #html5biz #html5bizB
  6. 6. ライフプランに必要な要素 教育資金計画 住宅取得資金計画 老後生活のための資金計画 税務 社会保険/公的年金/企業年金 キャッシュフロー表 / 個人バランスシートで表現する #html5biz #html5bizB
  7. 7. こんな感じで営業してます (みたいです) #html5biz #html5bizB
  8. 8. フロントシステムにはリッチクライアントが必要 #html5biz #html5bizB
  9. 9. RIAに求められたもの Rich Internet Application 表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の 再生機能を備える デスクトップアプケーションと同等なUI:画面をリフレッシュすることな く、バックエンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス:ユーザーの操作が即座にレスポンスされ、表示される画面 の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現 #html5biz #html5bizB
  10. 10. HTML5が解決してくれる! #html5biz #html5bizB
  11. 11. 従来型のWebアプリケーション Controller POJO HTML JavaScript Business Logic O/R JSP RDBMS アプリケーションサーバ Browser 1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得 #html5biz #html5bizB
  12. 12. 次世代型のWebアプリケーション HTML JavaScript Browser Controller Business Logic O/R POJO アプリケーションサーバ RDBMS 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで サーバへ送信 3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示 #html5biz #html5bizB
  13. 13. Single-page Application(SPA)とは 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 change DOM events render View Template get set Model Ajax Storage #html5biz #html5bizB
  14. 14. でもSingle-page Applicationは難しい #html5biz #html5bizB
  15. 15. SPAに必要な技術 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 バックエンド技術 - 通信 バックエンド技術 - Webアプリケーションサーバ #html5biz #html5bizB
  16. 16. JavaScriptフレームワーク すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ http://backbonejs.org/ http://www.sencha.com/ http://angularjs.org/ #html5biz #html5bizB
  17. 17. フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化 と アプリケーションの保守性を高めること にあります #html5biz #html5bizB
  18. 18. フレームワークを使ってロジックを整理する #html5biz #html5bizB
  19. 19. HTML カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! View ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など #html5biz #html5bizB
  20. 20. ROUTER ・画面の遷移を定義する HTML /#notes NotesView.render() /#list ListView.render() メンテナンス画面 Collection Model 処理 一覧画面 ejs URL 登録画面 View 画面 /#mente MenteView.render() class NotesRouter extends Backbone.Router # "": localhost:9000 の呼び出し # "notes": localhost:9000/#notes の呼び出し # "list": localhost:9000/#list の呼び出し routes: "": "mains" "notes": "mains" "list": "lists" #html5biz #html5bizB
  21. 21. View ・ejs を使ったレンダリング HTML View ejs Collection Model ・使用するDOM要素の定義 ・ビジネスロジック ・イベントの定義 class NotesView extends Backbone.View el: $ "#main" template: JST["app/scripts/templates/notes.ejs"] events: 'click #update': '_onClickUpdate' 'click #added': '_onClickAdded' 'click #deleteAll': '_onClickDeleteAll' render: -> $("#notes").html @template this #html5biz #html5bizB
  22. 22. HTML class NotesModel extends Backbone.Model defaults: id: '' title: 'title' View ejs Model ・View のデータバッファとして定義 ・バリデーションの定義 Collection Model contents: 'contents' validate: (attrs) -> return 'title is empty.' if _.isEmpty attrs.title return 'contents is empty.' if _.isEmpty attrs.contents #html5biz #html5bizB
  23. 23. HTML Collection ・使用するモデルを定義 ・Ajax ? or localStorage ? View class NotesCollection extends Backbone.Collection model: NotesModel ejs Collection Model #html5biz #html5bizB
  24. 24. localStorageを使うのも簡単 HTML bower.json { "dependencies": { "jquery": " 1.9.0", "requirejs": " 2.1.5", "backbone-amd": " 1.0.0", View "Backbone.localStorage": "1.1.7", ejs Collection Model "underscore-amd": " 1.4.4", }, "devDependencies": {} } $ bower install #html5biz #html5bizB
  25. 25. altJS altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決 http://coffeescript.org/ http://www.typescriptlang.org/ http://html5experts.jp/clockmaker/2183/ #html5biz #html5bizB
  26. 26. CSS Preprocessor 膨大なCSSをどう整理するか http://compass-style.org/ http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ #html5biz #html5bizB
  27. 27. モック開発で効率よく http://albatrosary.hateblo.jp/entry/2014/02/06/155004 #html5biz #html5bizB
  28. 28. package.jsonの一部 "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.1.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" } #html5biz #html5bizB
  29. 29. やること多いでしょ? #html5biz #html5bizB
  30. 30. 開発環境 多くのアーキテクチャをどうやって開発するか http://yeoman.io/ http://www.sencha.com/products/sencha-cmd/download http://git-scm.com/ https://github.com/ #html5biz #html5bizB
  31. 31. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) http://yeoman.io/ #html5biz #html5bizB
  32. 32. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/ #html5biz #html5bizB
  33. 33. yo 雛形作成ツール generator はどのくらいある? http://yeoman.io/community-generators.html #html5biz #html5bizB
  34. 34. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/ #html5biz #html5bizB
  35. 35. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins #html5biz #html5bizB
  36. 36. Yeomanをうまく使って効率良く開発しyo #html5biz #html5bizB
  37. 37. バックエンド技術 Ajaxでデータのやり取りをしている分には今までと変わらない。 しかし、WebSocketを使った場合は。。 WebSocketやSPDYを使って「より早く双方向」 スケールできるWebアプリケーションサーバ http://html5experts.jp/albatrosary/4939/ #html5biz #html5bizB
  38. 38. Java屋さん(バックエンドエンジニア)が頑張るところです! #html5biz #html5bizB
  39. 39. SPAを構築する上で考えるべきことのまとめ パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足 通信技術 バックエンド技術 http://blog.mitsuruog.info/2014/01/spa7.html #html5biz #html5bizB
  40. 40. Single-page Applicationを構築するにあたって メリット: ページを遷移させてもJavaScriptのグローバル環境が変わらない WebSocketが有効に使える デメリット: フルOSSでの開発が必要になる 技術要素が多すぎる 従来のWebアプリケーションに比べフロント開発が難しい #html5biz #html5bizB
  41. 41. いろいろ面倒と思うなら Sencha is All in One http://www.xenophy.com/ #html5biz #html5bizB
  42. 42. これだけではアプリケーションを利用している 営業さんは納得しません #html5biz #html5bizB
  43. 43. オンラインじゃないと使えないんでしょ? #html5biz #html5bizB
  44. 44. 営業活動を妨げるつもりですか? #html5biz #html5bizB
  45. 45. よしネイティブでやろう! #html5biz #html5bizB
  46. 46. じゃなくて #html5biz #html5bizB
  47. 47. Offline Web Applicationでやろう! #html5biz #html5bizB
  48. 48. Web ApplicationなのにOfflineって何のこと? #html5biz #html5bizB
  49. 49. いままでのキャッシング技術 アプリケーションサーバでのキャッシュ プロキシサーバでのキャッシュ ブラウザでのキャッシュ #html5biz #html5bizB
  50. 50. これとはまったく違います #html5biz #html5bizB
  51. 51. Offline Web Application Webアプリケーションを実行させるリソースをブラウザに保持 してネットワークが遮断された環境でも動かそうという機能 #html5biz #html5bizB
  52. 52. Application Cache これはなに? オフライン ブラウジング: ユーザーがオフラインのときでも、す べてのサイトにアクセスできる。 高速: キャッシュされたリソースはローカルなので、高速に読み込まれる。 サーバー負荷の軽減: ブラウザは、変更があったリソースのみを サーバーからダウンロードする。 #html5biz #html5bizB
  53. 53. Application Cache どうすればいいの? <html manifest="sample.appcache"> manifestファイル CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40 ! # キャッシュしたいリソース # このうち一つでもファイルが見つからないとエラーになりキャッシュされません。 CACHE: sample.html js/test.js css/test.css ! # 常にネットワーク上を参照して欲しい場合に使用 # 必ずオンラインアクセスを試みるリソース NETWORK: test.cgi ! # 代替エントリを宣言 # アクセスに失敗した場合に代わりに使用するリソース(NETWORK:と両方に指定すると動作しない) FALLBACK: online.png error.png #html5biz #html5bizB
  54. 54. Application Cache キャッシュクリアは意外と簡単 chrome://appcache-internals/ #html5biz #html5bizB
  55. 55. Application Cache FireFoxでは about:cacheで確認 削除は Cache Directoryの中をばさっと消す ※ Firefox 11 以前から Firefox 11 まで、ツール -> 最近の履歴を消去、あるいは、ツール -> オプション -> 詳細 -> ネットワー ク -> オフラインデータ -> 今すぐ消去 のどちらでもオフラインキャッシュ #html5biz #html5bizB
  56. 56. Application Cache View Entriesでキャッシュされているmanifestの内容が見れる Removeでキャッシュの内容が削除できる #html5biz #html5bizB
  57. 57. Application Cache もちろんデベロッパーツールでも見れます #html5biz #html5bizB
  58. 58. Application Cache 難しいところ manifestファイルが更新されていないとダメ リソースは必ずmanifestファイルに定義しないと動きが奇妙 #html5biz #html5bizB
  59. 59. Application Cache 難しいところ Application Cacheを使った場合、ファイルを定義しないと使われない main.cssをmanifestファイルでコメントアウトしてみた #html5biz #html5bizB
  60. 60. Application Cache 難しいところ manifestファイルには全部ちゃんと書く → ネットワークから取得したい場合はNETWORKに書く #html5biz #html5bizB
  61. 61. Application Cache 難しいところ NETWORKとCACHE両方に書いた場合はCACHE #html5biz #html5bizB
  62. 62. Application Cache 難しいところ ② ファイルのダウンロード ① 描画 Browser manifestファイルを更新してブラウザを実行してもキャッ シュしているファイルを使う 2回目でようやくダウンロードしたファイルを利用する #html5biz #html5bizB
  63. 63. Application Cache 難しいところ 関係ないファイルをmanifestに書いてもキャッシュされる #html5biz #html5bizB
  64. 64. Application Cache 意外と使えます #html5biz #html5bizB
  65. 65. WebStorage これはなに? key-value型のデータストア sessionStorage localStorage のストレージが用意されている(IE8から使える) • • length:保存されているデータ数 key(n):保存されているn番目のkey getItem(key):keyに対応するvalue setItem(key, value):keyとvalueのペアでデータを保存 removeItem(key):keyに対応するvalueを削除 clear():データをすべてクリア #html5biz #html5bizB
  66. 66. 比較してみる WebStorage 別ウィンドウの データ共有 クッキー session local ○ 指定期限まで有効 4KB サーバへのアク セスごと 別ウィンドウ/タブ を閉じるまで有効 ○ データの有効期限 サーバへのデー データ量の上限 タ送信 10MB jsにて 永続的に有効 10MB jsにて #html5biz #html5bizB
  67. 67. WebStorage ポイント とても扱いやすい トランザクションの概念がない #html5biz #html5bizB
  68. 68. WebStorage 普通に使えます #html5biz #html5bizB
  69. 69. オフラインファーストの思想と実践 http://www.slideshare.net/shumpei/thought-and-practice-of-offline-first #html5biz #html5bizB
  70. 70. さすがです!白石先生! #html5biz #html5bizB
  71. 71. Offline Web Application http://www.html5rocks.com/ja/tutorials/offline/quota-research/ #html5biz #html5bizB
  72. 72. さすがです!北村先生! #html5biz #html5bizB
  73. 73. Offline Web Application http://www.html5rocks.com/ja/tutorials/offline/quota-research/ #html5biz #html5bizB
  74. 74. 静的なリソースも動的なリソースもクライアントに保持 #html5biz #html5bizB
  75. 75. Single-page ApplicationでほとんどJavaScriptでの処理 #html5biz #html5bizB
  76. 76. アプリケーションサーバに問い合わせしないので Offine Web Applicationも作りやすい #html5biz #html5bizB
  77. 77. できればWeb StorageとAPIサーバの同期はWeb Workerで #html5biz #html5bizB
  78. 78. WebWorker これはなに? JavaScriptにスレッド機能を追加する機能 #html5biz #html5bizB
  79. 79. WebWorker どうやるの? var worker = new Worker( task.js'); ウェブ ワーカーは独立したスレッドで動作する ウェブ ワーカーによって実行されるコードは個別ファイル #html5biz #html5bizB
  80. 80. 次世代型のWebアプリケーション Single-page Applicationであたかもクライアントアプリ ケーションのように動くWebアプリケーション HTML Application Cache HTML JavaScript Controller Web Storage Browser Business Logic O/R POJO アプリケーションサーバ RDBMS #html5biz #html5bizB
  81. 81. 最後に Java Single-page Application RIA JavaScriptフレームワーク WebSocket altJS CSS Preprocessor Ajax SPDY HTTP 2.0 Web Worker Offline Web Application Yeoman #html5biz #html5bizB
  82. 82. このあと OSC Tokyo/Spring ! 2/28-3/1 306教室にてブース展示 3/1 10:00 203教室にて登壇 #html5biz #html5bizB
  83. 83. Special Thanks http://www.html5biz.org/ http://www.xenophy.com/ http://html5experts.jp/ http://www.gxp.co.jp/ http://html5j.org/ #html5biz #html5bizB
  84. 84. ご清聴ありがとうございました #html5biz #html5bizB

×