Successfully reported this slideshow.
Your SlideShare is downloading. ×

ネットワークが切れても大丈夫!リアルタイムWebアプリケーションを簡単開発するフレームワーク Winter Cardinalのご紹介

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 53 Ad
Advertisement

More Related Content

Slideshows for you (16)

Similar to ネットワークが切れても大丈夫!リアルタイムWebアプリケーションを簡単開発するフレームワーク Winter Cardinalのご紹介 (20)

Advertisement

Recently uploaded (20)

ネットワークが切れても大丈夫!リアルタイムWebアプリケーションを簡単開発するフレームワーク Winter Cardinalのご紹介

  1. 1. ネットワークが切れても大丈夫! リアルタイムWebアプリケーションを 簡単開発するフレームワーク Winter Cardinalのご紹介 OSC 2019 Fall/Tokyo 2019/11/24 Winter Cardinal 開発チーム 中島暢康
  2. 2. 本日お話すること・しないこと お話すること • Winter Cardinal開発の背景 • Winter Cardinalとは何なのか • Winter Cardinalを用いてできること お話しないこと • 機能の詳細 • 実装
  3. 3. 自己紹介 名前:中島暢康 所属:某電機メーカー 役割:チームリーダー 本日は利用者視点に立ってWinter Cardinalを紹介
  4. 4. なぜこういうものを考えたのか?
  5. 5. ターゲットとしている製品分野 電力系統監視制御システム 水道遠隔監視システム 工場監視システム ビル監視システム
  6. 6. ターゲットとしている製品分野 電力系統監視制御システム 水道遠隔監視システム 工場監視システム ビル監視システム 社会インフラシステム
  7. 7. ターゲットとしている製品分野:社会インフラシステム 電力系統監視制御システム 水道遠隔監視システム 工場監視システム ビル監視システム システムの状態表示に Webブラウザを利用
  8. 8. 監視システムのサンプル
  9. 9. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ システムの構成
  10. 10. 何か難しいことがあるのか? これまであるシステムと同じレベルにするにはいろいろと課題 があります
  11. 11. 社会インフラシステムにおける課題 • 低遅延 • ネットワーク・サーバ・ブラウザが落ちてもシステムは動き 続ける・利用可能である • 大量の変化するデータの描画 • 大量の描画要素の描画 • 品質
  12. 12. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 低遅延 電圧・電流・圧力… 起動・停止・開/閉…
  13. 13. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 動き続ける・利用可能である
  14. 14. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 動き続ける・利用可能である ネットワークが切れる
  15. 15. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 動き続ける・利用可能である ブラウザは閉じられる
  16. 16. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 動き続ける・利用可能である サーバプロセスは落ちる
  17. 17. 監視制御 アプリ Webアプリ Web サーバ ソフト 監視対象のデバイス 通 信 路 Web ブラウザ 制御 データ 大量の変化するデータの描画
  18. 18. 監視制御 アプリ Webアプリ Web サーバ ソフト 通 信 路 Web ブラウザ 大量の描画要素の描画 © OpenStreetMap contributors
  19. 19. 品質 コードが高品質 安定 メンテナンス性 枯れている
  20. 20. 品質 コードが高品質 安定 メンテナンス性 枯れている 共通機能をフレームワーク化し 再利用性を高めることで これらを実現
  21. 21. Winter Cardinalとは • 低遅延 • ネットワーク・サーバ・ブラウザが落ちてもシステム全体は動き 続ける・利用可能である • 大量の変化するデータの描画 • 大量の描画要素の描画 • 品質 を満足するフレームワーク
  22. 22. Winter Cardinalは 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS
  23. 23. Winter Cardinalは 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot 通信路 Javaアプリ JSアプリ PixiJS Winter Cardinal コア GUI部品 ここ
  24. 24. Winter Cardinalのベースには 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJSSpring Boot spring-websocketspring-jdbc
  25. 25. Winter Cardinalのベースには 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS WebGL
  26. 26. Winter Cardinalは 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS
  27. 27. どんな機能があるのか?
  28. 28. その前に、どんなことをやりたいのか
  29. 29. 何が必要だったのか
  30. 30. 何が必要だったのか • Webでの双方向・低遅延な通信 • 動き続ける・高可用 • ブラウザ上で大量の変化するデータの描画
  31. 31. 何が必要だったのか • Webでの双方向・低遅延な通信 →WebSocket • 動き続ける・高可用 →同期機能 • ブラウザ上で大量の変化するデータの描画 →GUI部品
  32. 32. 同期機能 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS
  33. 33. 同期機構 監視制御 アプリ Webアプリ Web アプリ 監視対象のデバイス Web ブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS 状態 状態 同期機構 同期機構 同じ状態を 自動的に保持 サーバ側データ・クライアント側ユーザ入力が低遅延に自動送信 障害時からの復帰後、自動的に状態を復元
  34. 34. 共有変数 • Long, String, List等に相当するクラスを独自に定義 • プリミティブ型に加えて、リストやジェネリクスをサポート • Winter Cardinalの同期機構を備える • サーバとブラウザで同じ値を持つ
  35. 35. 簡単な例 Java
  36. 36. 簡単な例 クラスにアノテーションを付与 Winter Cardinalの共有変数 クラスがJS側で参照 Java
  37. 37. 簡単な例 HTML JS
  38. 38. 簡単な例 HTML JS Winter Cardinal JS側 コントローラの呼び出し MyController クラスに対応 SLongクラスのget()
  39. 39. 共有変数 • Long, String, List等に相当するクラスを独自に定義 • プリミティブ型に加えて、リストやジェネリクスをサポート • Winter Cardinalの同期機構を備える • サーバとブラウザで同じ値を持つ • サーバ側メソッド呼び出し
  40. 40. @Callable • クライアントからサーバ側のメソッドを呼び出す • ログ記録とかDBアクセスとか、JavaアプリコードをJSか ら起動させたい
  41. 41. 簡単な例 Java
  42. 42. 簡単な例 JSから呼び出し可能な メソッド Java
  43. 43. 簡単な例 HTML JS
  44. 44. 簡単な例 HTML JS helloメソッドを呼び出し、 返り値を取る
  45. 45. @Task • 非同期的に動かしたい • 時間がかかる • 頻繁に変化する • 動作順序は気にしない。最新の結果が重要
  46. 46. @Component • 共有変数や@Callableメソッドをグルーピング
  47. 47. GUI部品 • ボタン • インプット • など • グラフ • 図面 • 表
  48. 48. 最後に。。。全体を通した使い方 監視制御 アプリ Webアプリ Webアプリ 監視対象の デバイス Webブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS
  49. 49. 最後に。。。全体を通した使い方 監視制御 アプリ Webアプリ Webアプリ 監視対象の デバイス Webブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS 表示される データ ユーザ入力 データ グラフ部品 表部品
  50. 50. 最後に。。。全体を通した使い方 監視制御 アプリ Webアプリ Webアプリ 監視対象の デバイス Webブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS 表示される データ ユーザ入力 データ 表示される データ ユーザ入力 データ 同期機構 同期機構 共有変数 共有変数
  51. 51. 最後に。。。全体を通した使い方 監視制御 アプリ Webアプリ Webアプリ 監視対象の デバイス Webブラウザ Spring Boot Winter Cardinal コア GUI部品 通信路 Javaアプリ JSアプリ PixiJS 表示される データ ユーザ入力 データ データ アクセス データ 処理 Spring Boot app
  52. 52. リポジトリ ソースコード maven npm
  53. 53. 今後の予定 サンプルコード・サンプルアプリやドキュメントの追加 コミュニティサイト 問い合わせ・コメントは中島まで メール: nobuyasu.nakajima@toshiba.co.jp

×