$30 off During Our Annual Pro Sale. View Details »

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

草薙昭彦
September 16, 2023

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

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

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

草薙昭彦

September 16, 2023
Tweet

More Decks by 草薙昭彦

Other Decks in Technology

Transcript

  1. All rights reserved by Postman Inc
    Web PubSub で創るマイ都市デジタルツイン
    〜WebSocket は Postmanでテストするのだよ〜
    草薙 昭彦
    テクノロジーエバンジェリスト

    View Slide

  2. テクノロジーエバンジェリスト
    Postman 株式会社
    草薙 昭彦
    @postman_japan
    @nagix

    View Slide

  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/

    View Slide

  4. Mini Tokyo 3D 概要
    ▶ 東京の公共交通のリアルタイム 3Dマップ
    ▶ 今、実際に動いている列車やバス、発着している
    旅客機をリアルな3Dマップ上に滑らかなアニメー
    ションで表現
    ▶ 現実世界とそっくりな双子をデジタルの世界に表
    現した「デジタルツイン」
    ▶ 実際の遅延や天候をマップ上に反映
    ▶ 路線沿いのライブカメラや花火イベント
    ▶ 地下鉄駅の出口案内や独自の経路探索エンジン
    による遅延を反映した乗換案内 https://minitokyo3d.com
    @postman_japan

    View Slide

  5. Mini Tokyo 3D 受賞歴
    第3回 東京公共交通オープン
    データチャレンジ最優秀賞
    2019年度 VLED
    勝手表彰貢献賞
    第25回 AMD Award ‘19
    江並直美賞(新人賞)

    View Slide

  6. 朝・昼・晩のシーンの変化
    遅延を考慮した経路探索
    4ヶ国語+α対応
    降水・降雪アニメーション
    花火アニメーション
    ライブカメラ
    イベント情報
    地下鉄・地下街情報の表示
    @postman_japan

    View Slide

  7. 本日のトピック
    ● Azure Web PubSub のサービスを立ち上げ、Postman で WebSocket のやり取りを試
    してみる
    ● Mini Tokyo 3D にチャットのポップアップを表示するレイヤーをプラグインとして組み込
    み、動かしてみる
    @postman_japan
    Postman
    API コレクション
    Mini Tokyo 3D
    Azure
    Web PubSub
    WebSocket
    API

    View Slide

  8. Web PubSub
    を立ち上げる
    @postman_japan

    View Slide

  9. Azure Web PubSub
    ● シンプルな WebSocket 接続を使用して、メッセージを発行/サブスクライブする簡単な
    方法を提供
    ○ 1 つの接続内でテキストメッセージとバイナリメッセージの両方をサポート
    ○ クライアント間でメッセージを直接発行するためのシンプルなプロトコル
    ○ サービスによって WebSocket 接続を管理
    @postman_japan

    View Slide

  10. 早速 Web PubSub サービスを作ってみよう
    @postman_japan

    View Slide

  11. 早速 Web PubSub サービスを作ってみよう
    @postman_japan

    View Slide

  12. 早速 Web PubSub サービスを作ってみよう
    @postman_japan

    View Slide

  13. 早速 Web PubSub サービスを作ってみよう
    @postman_japan
    Free、Standard、Premium
    から選ぶ
    サービスの URL の一部になる

    View Slide

  14. アクセス用のキーを生成する
    @postman_japan
    ハブの名前、トークンの有効時間、
    Role を設定するとクライアントアクセス
    URL が動的に変化するので、これをコピーする

    View Slide

  15. Postman
    @postman_japan
    https://www.postman.com

    View Slide

  16. Postman とは?
    @postman_japan
    API 提供側
    ライフサイクル
    API 利用側
    ライフサイクル
    テスト
    開発
    設計
    定義
    デプロイ
    デプロイ
    配布
    監視
    監視
    テスト
    評価
    統合
    発見
    セキュ
    リティ
    ● API リクエストに対するレスポンスをテストするための API クライアントを中心に、API 提
    供者・利用者両方の API ライフサイクル全体に役立つツールを提供

    View Slide

  17. Environment を作成して変数をセットする
    ● 新しい Environment を作成し、名前をつけ、変数をセット(
    Save 忘れずに!)
    ○ baseUrl: wss://<リソース名>.webpubsub.azure.com
    ○ access_token: <クライアントアクセス URL の access_token>
    @postman_japan

    View Slide

  18. Environment を切り替え
    ● 右上の Environment メニューから、作成した Environment を選択
    ○ これで Environment に設定した変数の値が使われる
    @postman_japan

    View Slide

  19. WebSocket とは?
    ● TCPコネクション上に双方向通信のチャン
    ネルを提供する、通信プロトコルの
    1つ
    ● サーバとクライアントが一度コネクションを
    行った後は、必要な通信をそのコネクショ
    ン上で専用のプロトコルを用いて行い、通
    信効率が良い
    @postman_japan

    View Slide

  20. WebSocket リクエストを作成する
    ● My Workspace で「New」ボタンをクリックして、新しい WebSocket リクエストを作成す

    @postman_japan

    View Slide

  21. WebSocket リクエストを作成する
    ● URL 欄に「{{baseUrl}}/client/hubs/Hub?access_token={{access_token}}」を入力
    ○ {{<変数名>}} は変数に格納された値で置き換えられる
    @postman_japan

    View Slide

  22. WebSocket サブプロトコルをヘッダに指定
    ● Web PubSub の通信には、特定の WebSocket サブプロトコルを使う
    ● Sec-WebSocket-Protocol ヘッダに「json.webpubsub.azure.v1」を指定
    @postman_japan

    View Slide

  23. WebSocket コネクションを開始
    ● 「Connect」ボタンをクリックすると、コネクションが開始されたレスポンスが帰ってくる
    @postman_japan

    View Slide

  24. グループに参加
    ● Message タブに移動し、{ "type": "joinGroup", "group": "<グループ名>" }
    という JSON を送信
    @postman_japan

    View Slide

  25. JSON データを送信
    ● Message タブに移動し、{ "type": "sendToGroup", "group": "<グループ名>",
    "dataType": "json", "data": } という JSON を送信
    @postman_japan

    View Slide

  26. グループから離脱
    ● Message タブに移動し、{ "type": "leaveGroup", "group": "<グループ名>" }
    という JSON を送信
    @postman_japan

    View Slide

  27. Mini Tokyo 3D
    に組み込む
    @postman_japan

    View Slide

  28. データプロバイダ
    クラウド
    または
    オンプレ
    リアルタイム飛行コースデータ
    リアルタイム天候データ
    交通事業者
    気象レーダー
    Mapbox
    地図タイルデータ
    Mini Tokyo 3D 構成図 クライアント
    (Webアプリ)
    Mini Tokyo 3D プログラム
    国交省 航空局
    リアルタイム
    交通データ
    ライブカメラデータ
    ライブカメラ
    Mini Tokyo 3D Webページ + プログラム
    取得

    加工
    Webページ + プログラム + データ
    データ例: 路線情報・列車時刻表・列車位
    置・運行情報・駅構内図など

    View Slide

  29. 地図のレイヤー
    地図(ベースマップ)、震
    源の分布、震度の分布を
    レイヤーとして重ねて表

    震源レイヤー
    (deck.gl)
    地図レイヤー
    (Mapbox)
    震度レイヤー
    (Mapbox)

    View Slide

  30. Mini Tokyo 3D 開発者ガイド
    @postman_japan
    https://minitokyo3d.com/docs/master/ja/developer-guide/
    マップ上に独自のレイヤーを重ねる
    プラグインが簡単に作れる!

    View Slide

  31. Web PubSub JavaScript クライアント
    @postman_japan
    https://learn.microsoft.com/ja-jp/azure/azure-web-pubsub/reference-client-sdk-javascript

    View Slide

  32. マップ上にメッセージのポップアップを表示
    次のような JSON データを
    PubSub に送信
    @postman_japan
    {
    "type": "sendToGroup",
    "group": "group1",
    "dataType" : "json",
    "data": {
    "text": "Hello, Tokyo",
    "center": [139.7404, 35.6266]
    }
    }
    指定した座標にポップアップ出現!

    View Slide

  33. メッセージの送信も組み込んでみる
    マップ上を長押しすると出てくるフォームか
    らメッセージを送信
    @postman_japan
    指定した座標にポップアップ出現!

    View Slide

  34. マップ上でリアルタイムチャット
    @postman_japan

    View Slide

  35. minitokyo3d.com
    みんなも遊んでみよう!

    View Slide

  36. ありがとうございました
    @postman_japan

    View Slide

  37. Postman Sapporo Meetup 2023.9
    https://postman.connpass.com/event/293366/
    2023/9/27(水)
    @postman_japan

    View Slide

  38. Postman Tokyo Meetup 2023.10
    https://postman.connpass.com/event/294381/
    2023/10/10(火)
    @postman_japan

    View Slide

  39. 「API ファーストの世界」コミック日本語版
    https://www.api-first-world.com/ja/
    @postman_japan

    View Slide