Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

草薙昭彦

November 16, 2023
Tweet

More Decks by 草薙昭彦

Other Decks in Technology

Transcript

  1. All rights reserved by Postman Inc
    Momento Topics を使って都市デジタルツイン上
    にチャットアプリを作る
    草薙 昭彦
    テクノロジーエバンジェリスト

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 本日のトピック
    ● Momento Cache を作成し、Postman で Momento Topics にメッセージを投げてみる
    ● Mini Tokyo 3D にチャットのポップアップを表示するレイヤーをプラグインとして組み込
    み、動かしてみる
    @postman_japan
    Postman
    API コレクション
    Mini Tokyo 3D
    Momento
    Cache
    Momento
    Topics
    HTTP API

    View full-size slide

  8. Momento Topics に
    メッセージを投げてみる
    @postman_japan

    View full-size slide

  9. Moment Topics
    “WebSockets are hard, Topics are easy”
    ● 「おおっ? 簡単そうだね?」
    @postman_japan

    View full-size slide

  10. Moment Topics
    ● チャット機能を実装する際にスケーラブルなバックエンドとして楽に使えそう
    ● フルマネージドという特性上、立ち上げが早くて試行も手軽そう
    @postman_japan

    View full-size slide

  11. Momento Topics を試すのは非常にスムーズ
    @postman_japan
    ● Google アカウントの認証のみでサインアップ完了 → Momento Console へ
    ● Topic を利用するには Cache が必要ということで、まずは Cache の設定
    ○ 指定するのは Cache 名、クラウドプロバイダー、リージョンのみ
    ● Topic の Subscribe
    ○ クラウドプロバイダー、リージョン、
    Cache名、Topic名を指定

    View full-size slide

  12. Momento HTTP API
    @postman_japan
    https://docs.momentohq.com/ja/topics/develop/api-reference/http-api
    ● Momento Topics の Subscribe はステートフルな動作ということで、各言語向けに用意
    された SDK を使うのが基本
    ● が、Publish はステートレスで、エッジデバイスなどのリソースの限定された機器でも使え
    るように、HTTP API も提供

    View full-size slide

  13. API キーを作成
    ● 指定するのはクラウドプロバイダー、リージョン、キーの種類、期限
    ● アクセスを限定するためにTopicsの場合はCache名、Topic名、ロールの種類も指定
    @postman_japan

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Postman API ネットワーク (API カタログ)
    @postman_japan
    プライベート API ネットワーク
    パブリック API ネットワーク
    ● チームメンバーに限定
    ● チーム内の機能重複の排除
    ● API 知見やノウハウの共有
    ● チーム内の API 利用動向の把握
    ● 多くの利用者・開発者に知ってもらう
    ● 利用者の Time To First Call の短縮
    ● 利用者からのフィードバックと改善

    View full-size slide

  17. Momento の公式ワークスペースを見つける
    ● Postman アプリ上端の検索窓から、momento を検索
    ● 「HTTP API」というのが Momento 公式のワークスペース
    @postman_japan

    View full-size slide

  18. Momento Topics コレクションをフォーク
    ● Topics - Event Notification コレクションのメニューから Create Fork を選択し、自分
    の Postman ワークスペースにフォークを作る
    @postman_japan

    View full-size slide

  19. コレクション変数をセットする
    ● フォークしたコレクションを選び「変数」タブで変数をセット(
    Save 忘れずに!)
    ○ cacheName: mini-tokyo
    ○ topicName: chat
    @postman_japan

    View full-size slide

  20. Environment を作成して変数をセットする
    ● 新しい Environment を作成し、名前をつけ、変数をセット(
    Save 忘れずに!)
    ○ baseUrl: https://api.cache.cell-ap-northeast-1-1.prod.a.momentohq.com
    ○ MOMENTO_AUTH:
    @postman_japan

    View full-size slide

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

    View full-size slide

  22. HTTP リクエストを確認する
    ● 「Publish」リクエストを選ぶ
    ○ パラメーターやパス変数はすべて変数で設定済み
    @postman_japan

    View full-size slide

  23. リクエストボディを埋めて送信
    ● 「ボディ」タブで、テスト用の JSON オブジェクトを Raw テキストで入力
    ● 送信ボタンをクリック
    @postman_japan

    View full-size slide

  24. Momento Console でメッセージを確認
    ● Subscribed messages 欄にメッセージが到着しているのを確認!
    @postman_japan

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  29. Momento web SDK for JavaScript in browsers
    @postman_japan
    https://docs.momentohq.com/ja/topics/develop/sdks/web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Postman 日本上陸 記念イベント
    https://www.postman.com/jp/events/postman-japan-launch/
    2023/12/5(火)
    @postman_japan

    View full-size slide