Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Web PubSub を立ち上げる @postman_japan

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Mini Tokyo 3D に組み込む @postman_japan

Slide 28

Slide 28 text

データプロバイダ クラウド または オンプレ リアルタイム飛行コースデータ リアルタイム天候データ 交通事業者 気象レーダー Mapbox 地図タイルデータ Mini Tokyo 3D 構成図 クライアント (Webアプリ) Mini Tokyo 3D プログラム 国交省 航空局 リアルタイム 交通データ ライブカメラデータ ライブカメラ Mini Tokyo 3D Webページ + プログラム 取得 ・ 加工 Webページ + プログラム + データ データ例: 路線情報・列車時刻表・列車位 置・運行情報・駅構内図など

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

minitokyo3d.com みんなも遊んでみよう！

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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