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
江並直美賞（新人賞）
本日のトピック
● Momento Cache を作成し、Postman で Momento Topics にメッセージを投げてみる
● Mini Tokyo 3D にチャットのポップアップを表示するレイヤーをプラグインとして組み込
み、動かしてみる
@postman_japan
Postman
API コレクション
Mini Tokyo 3D
Momento
Cache
Momento
Topics
HTTP API
Slide 8
Slide 8 text
Momento Topics に
メッセージを投げてみる
@postman_japan
Slide 9
Slide 9 text
Moment Topics
“WebSockets are hard, Topics are easy”
● 「おおっ？ 簡単そうだね？」
@postman_japan
Slide 10
Slide 10 text
Moment Topics
● チャット機能を実装する際にスケーラブルなバックエンドとして楽に使えそう
● フルマネージドという特性上、立ち上げが早くて試行も手軽そう
@postman_japan
Slide 11
Slide 11 text
Momento Topics を試すのは非常にスムーズ
@postman_japan
● Google アカウントの認証のみでサインアップ完了 → Momento Console へ
● Topic を利用するには Cache が必要ということで、まずは Cache の設定
○ 指定するのは Cache 名、クラウドプロバイダー、リージョンのみ
● Topic の Subscribe
○ クラウドプロバイダー、リージョン、
Cache名、Topic名を指定
Slide 12
Slide 12 text
Momento HTTP API
@postman_japan
https://docs.momentohq.com/ja/topics/develop/api-reference/http-api
● Momento Topics の Subscribe はステートフルな動作ということで、各言語向けに用意
された SDK を使うのが基本
● が、Publish はステートレスで、エッジデバイスなどのリソースの限定された機器でも使え
るように、HTTP API も提供
Slide 13
Slide 13 text
API キーを作成
● 指定するのはクラウドプロバイダー、リージョン、キーの種類、期限
● アクセスを限定するためにTopicsの場合はCache名、Topic名、ロールの種類も指定
@postman_japan
Slide 14
Slide 14 text
Postman
@postman_japan
https://www.postman.com
Slide 15
Slide 15 text
Postman とは？
@postman_japan
API 提供側
ライフサイクル
API 利用側
ライフサイクル
テスト
開発
設計
定義
デプロイ
デプロイ
配布
監視
監視
テスト
評価
統合
発見
セキュ
リティ
● API リクエストに対するレスポンスをテストするための API クライアントを中心に、API 提
供者・利用者両方の API ライフサイクル全体に役立つツールを提供
Slide 16
Slide 16 text
Postman API ネットワーク (API カタログ)
@postman_japan
プライベート API ネットワーク
パブリック API ネットワーク
● チームメンバーに限定
● チーム内の機能重複の排除
● API 知見やノウハウの共有
● チーム内の API 利用動向の把握
● 多くの利用者・開発者に知ってもらう
● 利用者の Time To First Call の短縮
● 利用者からのフィードバックと改善
Slide 17
Slide 17 text
Momento の公式ワークスペースを見つける
● Postman アプリ上端の検索窓から、momento を検索
● 「HTTP API」というのが Momento 公式のワークスペース
@postman_japan
リクエストボディを埋めて送信
● 「ボディ」タブで、テスト用の JSON オブジェクトを Raw テキストで入力
● 送信ボタンをクリック
@postman_japan
Slide 24
Slide 24 text
Momento Console でメッセージを確認
● Subscribed messages 欄にメッセージが到着しているのを確認！
@postman_japan
Slide 25
Slide 25 text
Mini Tokyo 3D
に組み込む
@postman_japan
Slide 26
Slide 26 text
データプロバイダ
クラウド
または
オンプレ
リアルタイム飛行コースデータ
リアルタイム天候データ
交通事業者
気象レーダー
Mapbox
地図タイルデータ
Mini Tokyo 3D 構成図 クライアント
(Webアプリ)
Mini Tokyo 3D プログラム
国交省 航空局
リアルタイム
交通データ
ライブカメラデータ
ライブカメラ
Mini Tokyo 3D Webページ + プログラム
取得
・
加工
Webページ + プログラム + データ
データ例: 路線情報・列車時刻表・列車位
置・運行情報・駅構内図など