Web PubSubで創るマイ都市デジタルツイン 〜WebSocketはPostmanでテストするのだよ〜

Japan Azure User Group 13周年イベントでの発表資料です。

東京の公共交通デジタルマップMini Tokyo 3Dには、開発者がライブラリAPIを使用して独自の情報を簡単に3Dマップの上にオーバーレイできるしくみがあります。今回はAzure Web PubSubに入ってきた情報をWebSocketで取得してMini Tokyo 3Dのマップ上にリアルタイムで表示するデモを、聴衆の皆さんと一緒に作りたいと思います。あ、WebSocketのテストにはPostmanを使いますよ。

Transcript

1. All rights reserved by Postman Inc Web PubSub で創るマイ都市デジタルツイン 〜WebSocket は Postmanでテストするのだよ〜 草薙 昭彦 テクノロジーエバンジェリスト
2. テクノロジーエバンジェリスト Postman 株式会社 草薙 昭彦 @postman_japan @nagix
3. Mini Tokyo 3D 東京の公共交通機関の3Dマップ Japan EQ Locator 震源・震度分布の3Dマップ Mapbox GL Rain Layer 降水降雪アニメーション Ukraine Live Cams ライブカメラ3Dマップ 北朝鮮ミサイル実験ビジュアライゼーショ ン 弾道ミサイル軌道の可視化 Sea Level Rise 3D Map 都市の海面上昇シミュレーション https://nagix.github.io/
4. Mini Tokyo 3D 概要 ▶ 東京の公共交通のリアルタイム 3Dマップ ▶ 今、実際に動いている列車やバス、発着している 旅客機をリアルな3Dマップ上に滑らかなアニメー ションで表現 ▶ 現実世界とそっくりな双子をデジタルの世界に表 現した「デジタルツイン」 ▶ 実際の遅延や天候をマップ上に反映 ▶ 路線沿いのライブカメラや花火イベント ▶ 地下鉄駅の出口案内や独自の経路探索エンジン による遅延を反映した乗換案内 https://minitokyo3d.com @postman_japan
5. Mini Tokyo 3D 受賞歴 第3回 東京公共交通オープン データチャレンジ最優秀賞 2019年度 VLED 勝手表彰貢献賞 第25回 AMD Award ‘19 江並直美賞（新人賞）
6. 朝・昼・晩のシーンの変化 遅延を考慮した経路探索 4ヶ国語＋α対応 降水・降雪アニメーション 花火アニメーション ライブカメラ イベント情報 地下鉄・地下街情報の表示 @postman_japan
7. 本日のトピック • Azure Web PubSub のサービスを立ち上げ、Postman で WebSocket のやり取りを試 してみる • Mini Tokyo 3D にチャットのポップアップを表示するレイヤーをプラグインとして組み込 み、動かしてみる @postman_japan Postman API コレクション Mini Tokyo 3D Azure Web PubSub WebSocket API
8. Web PubSub を立ち上げる @postman_japan
9. Azure Web PubSub • シンプルな WebSocket 接続を使用して、メッセージを発行／サブスクライブする簡単な 方法を提供 ◦ 1 つの接続内でテキストメッセージとバイナリメッセージの両方をサポート ◦ クライアント間でメッセージを直接発行するためのシンプルなプロトコル ◦ サービスによって WebSocket 接続を管理 @postman_japan
10. 早速 Web PubSub サービスを作ってみよう @postman_japan
11. 早速 Web PubSub サービスを作ってみよう @postman_japan
12. 早速 Web PubSub サービスを作ってみよう @postman_japan
13. 早速 Web PubSub サービスを作ってみよう @postman_japan Free、Standard、Premium から選ぶ サービスの URL の一部になる
14. アクセス用のキーを生成する @postman_japan ハブの名前、トークンの有効時間、 Role を設定するとクライアントアクセス URL が動的に変化するので、これをコピーする
15. Postman @postman_japan https://www.postman.com
16. Postman とは？ @postman_japan API 提供側 ライフサイクル API 利用側 ライフサイクル テスト 開発 設計 定義 デプロイ デプロイ 配布 監視 監視 テスト 評価 統合 発見 セキュ リティ • API リクエストに対するレスポンスをテストするための API クライアントを中心に、API 提 供者・利用者両方の API ライフサイクル全体に役立つツールを提供
17. Environment を作成して変数をセットする • 新しい Environment を作成し、名前をつけ、変数をセット（ Save 忘れずに！） ◦ baseUrl: wss://<リソース名>.webpubsub.azure.com ◦ access_token: <クライアントアクセス URL の access_token> @postman_japan
18. Environment を切り替え • 右上の Environment メニューから、作成した Environment を選択 ◦ これで Environment に設定した変数の値が使われる @postman_japan
19. WebSocket とは？ • TCPコネクション上に双方向通信のチャン ネルを提供する、通信プロトコルの 1つ • サーバとクライアントが一度コネクションを 行った後は、必要な通信をそのコネクショ ン上で専用のプロトコルを用いて行い、通 信効率が良い @postman_japan
20. WebSocket リクエストを作成する • My Workspace で「New」ボタンをクリックして、新しい WebSocket リクエストを作成す る @postman_japan
21. WebSocket リクエストを作成する • URL 欄に「{{baseUrl}}/client/hubs/Hub?access_token={{access_token}}」を入力 ◦ {{<変数名>}} は変数に格納された値で置き換えられる @postman_japan
22. WebSocket サブプロトコルをヘッダに指定 • Web PubSub の通信には、特定の WebSocket サブプロトコルを使う • Sec-WebSocket-Protocol ヘッダに「json.webpubsub.azure.v1」を指定 @postman_japan
23. WebSocket コネクションを開始 • 「Connect」ボタンをクリックすると、コネクションが開始されたレスポンスが帰ってくる @postman_japan
24. グループに参加 • Message タブに移動し、{ "type": "joinGroup", "group": "<グループ名>" } という JSON を送信 @postman_japan
25. JSON データを送信 • Message タブに移動し、{ "type": "sendToGroup", "group": "<グループ名>", "dataType": "json", "data": <JSON オブジェクト> } という JSON を送信 @postman_japan
26. グループから離脱 • Message タブに移動し、{ "type": "leaveGroup", "group": "<グループ名>" } という JSON を送信 @postman_japan
27. Mini Tokyo 3D に組み込む @postman_japan
28. データプロバイダ クラウド または オンプレ リアルタイム飛行コースデータ リアルタイム天候データ 交通事業者 気象レーダー Mapbox 地図タイルデータ Mini Tokyo 3D 構成図 クライアント (Webアプリ) Mini Tokyo 3D プログラム 国交省 航空局 リアルタイム 交通データ ライブカメラデータ ライブカメラ Mini Tokyo 3D Webページ + プログラム 取得 ・ 加工 Webページ + プログラム + データ データ例: 路線情報・列車時刻表・列車位 置・運行情報・駅構内図など
29. 地図のレイヤー 地図（ベースマップ）、震 源の分布、震度の分布を レイヤーとして重ねて表 示 震源レイヤー (deck.gl) 地図レイヤー (Mapbox) 震度レイヤー (Mapbox)
30. Mini Tokyo 3D 開発者ガイド @postman_japan https://minitokyo3d.com/docs/master/ja/developer-guide/ マップ上に独自のレイヤーを重ねる プラグインが簡単に作れる！
31. Web PubSub JavaScript クライアント @postman_japan https://learn.microsoft.com/ja-jp/azure/azure-web-pubsub/reference-client-sdk-javascript
32. マップ上にメッセージのポップアップを表示 次のような JSON データを PubSub に送信 @postman_japan { "type": "sendToGroup", "group": "group1", "dataType" : "json", "data": { "text": "Hello, Tokyo", "center": [139.7404, 35.6266] } } 指定した座標にポップアップ出現！
33. メッセージの送信も組み込んでみる マップ上を長押しすると出てくるフォームか らメッセージを送信 @postman_japan 指定した座標にポップアップ出現！
34. マップ上でリアルタイムチャット @postman_japan
35. minitokyo3d.com みんなも遊んでみよう！
36. ありがとうございました @postman_japan
37. Postman Sapporo Meetup 2023.9 https://postman.connpass.com/event/293366/ 2023/9/27(水) @postman_japan
38. Postman Tokyo Meetup 2023.10 https://postman.connpass.com/event/294381/ 2023/10/10(火) @postman_japan
39. 「API ファーストの世界」コミック日本語版 https://www.api-first-world.com/ja/ @postman_japan