Momento Topicsを使って都市デジタルツイン上にチャットアプリを作る

もめんと Meet-up #7 ユースケース祭り！での発表資料です。

東京の公共交通デジタルマップMini Tokyo 3Dには、開発者がライブラリAPIを使用して独自の情報を簡単に3Dマップの上にオーバーレイできるしくみがあります。今回はMomento Topicsを利用してMini Tokyo 3Dのマップ上にリアルタイムチャットを作ってみた経緯をお話ししたいと思います。Momento TopicsのPublishのテストには、おなじみPostmanを使っています。

Transcript

1. All rights reserved by Postman Inc Momento Topics を使って都市デジタルツイン上 にチャットアプリを作る 草薙 昭彦 テクノロジーエバンジェリスト
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. 本日のトピック • Momento Cache を作成し、Postman で Momento Topics にメッセージを投げてみる • Mini Tokyo 3D にチャットのポップアップを表示するレイヤーをプラグインとして組み込 み、動かしてみる @postman_japan Postman API コレクション Mini Tokyo 3D Momento Cache Momento Topics HTTP API
8. Momento Topics に メッセージを投げてみる @postman_japan
9. Moment Topics “WebSockets are hard, Topics are easy” • 「おおっ？ 簡単そうだね？」 @postman_japan
10. Moment Topics • チャット機能を実装する際にスケーラブルなバックエンドとして楽に使えそう • フルマネージドという特性上、立ち上げが早くて試行も手軽そう @postman_japan
11. Momento Topics を試すのは非常にスムーズ @postman_japan • Google アカウントの認証のみでサインアップ完了 → Momento Console へ • Topic を利用するには Cache が必要ということで、まずは Cache の設定 ◦ 指定するのは Cache 名、クラウドプロバイダー、リージョンのみ • Topic の Subscribe ◦ クラウドプロバイダー、リージョン、 Cache名、Topic名を指定
12. Momento HTTP API @postman_japan https://docs.momentohq.com/ja/topics/develop/api-reference/http-api • Momento Topics の Subscribe はステートフルな動作ということで、各言語向けに用意 された SDK を使うのが基本 • が、Publish はステートレスで、エッジデバイスなどのリソースの限定された機器でも使え るように、HTTP API も提供
13. API キーを作成 • 指定するのはクラウドプロバイダー、リージョン、キーの種類、期限 • アクセスを限定するためにTopicsの場合はCache名、Topic名、ロールの種類も指定 @postman_japan
14. Postman @postman_japan https://www.postman.com
15. Postman とは？ @postman_japan API 提供側 ライフサイクル API 利用側 ライフサイクル テスト 開発 設計 定義 デプロイ デプロイ 配布 監視 監視 テスト 評価 統合 発見 セキュ リティ • API リクエストに対するレスポンスをテストするための API クライアントを中心に、API 提 供者・利用者両方の API ライフサイクル全体に役立つツールを提供
16. Postman API ネットワーク (API カタログ) @postman_japan プライベート API ネットワーク パブリック API ネットワーク • チームメンバーに限定 • チーム内の機能重複の排除 • API 知見やノウハウの共有 • チーム内の API 利用動向の把握 • 多くの利用者・開発者に知ってもらう • 利用者の Time To First Call の短縮 • 利用者からのフィードバックと改善
17. Momento の公式ワークスペースを見つける • Postman アプリ上端の検索窓から、momento を検索 • 「HTTP API」というのが Momento 公式のワークスペース @postman_japan
18. Momento Topics コレクションをフォーク • Topics - Event Notification コレクションのメニューから Create Fork を選択し、自分 の Postman ワークスペースにフォークを作る @postman_japan
19. コレクション変数をセットする • フォークしたコレクションを選び「変数」タブで変数をセット（ Save 忘れずに！） ◦ cacheName: mini-tokyo ◦ topicName: chat @postman_japan
20. Environment を作成して変数をセットする • 新しい Environment を作成し、名前をつけ、変数をセット（ Save 忘れずに！） ◦ baseUrl: https://api.cache.cell-ap-northeast-1-1.prod.a.momentohq.com ◦ MOMENTO_AUTH: <API キー> @postman_japan
21. Environment を切り替え • 右上の Environment メニューから、作成した Environment を選択 ◦ これで Environment に設定した変数の値が使われる @postman_japan
22. HTTP リクエストを確認する • 「Publish」リクエストを選ぶ ◦ パラメーターやパス変数はすべて変数で設定済み @postman_japan
23. リクエストボディを埋めて送信 • 「ボディ」タブで、テスト用の JSON オブジェクトを Raw テキストで入力 • 送信ボタンをクリック @postman_japan
24. Momento Console でメッセージを確認 • Subscribed messages 欄にメッセージが到着しているのを確認！ @postman_japan
25. Mini Tokyo 3D に組み込む @postman_japan
26. データプロバイダ クラウド または オンプレ リアルタイム飛行コースデータ リアルタイム天候データ 交通事業者 気象レーダー Mapbox 地図タイルデータ Mini Tokyo 3D 構成図 クライアント (Webアプリ) Mini Tokyo 3D プログラム 国交省 航空局 リアルタイム 交通データ ライブカメラデータ ライブカメラ Mini Tokyo 3D Webページ + プログラム 取得 ・ 加工 Webページ + プログラム + データ データ例: 路線情報・列車時刻表・列車位 置・運行情報・駅構内図など
27. 地図のレイヤー 地図（ベースマップ）、震 源の分布、震度の分布を レイヤーとして重ねて表 示 震源レイヤー (deck.gl) 地図レイヤー (Mapbox) 震度レイヤー (Mapbox)
28. Mini Tokyo 3D 開発者ガイド @postman_japan https://minitokyo3d.com/docs/master/ja/developer-guide/ マップ上に独自のレイヤーを重ねる プラグインが簡単に作れる！
29. Momento web SDK for JavaScript in browsers @postman_japan https://docs.momentohq.com/ja/topics/develop/sdks/web
30. マップ上にメッセージのポップアップを表示 次のような JSON データを PubSub に送信 @postman_japan { "text": "Hello, Tokyo", "center": [139.7404, 35.6266] } 指定した座標にポップアップ出現！
31. メッセージの送信も組み込んでみる マップ上を長押しすると出てくるフォームか らメッセージを送信 @postman_japan 指定した座標にポップアップ出現！
32. マップ上でリアルタイムチャット @postman_japan
33. minitokyo3d.com みんなも遊んでみよう！
34. ありがとうございました @postman_japan
35. Postman 日本上陸 記念イベント https://www.postman.com/jp/events/postman-japan-launch/ 2023/12/5(火) @postman_japan