API Meetup Online #1 〜加速するデジタルシフト〜 での発表資料です。 Mini Tokyo 3D は東京の公共交通のリアルタイム3Dマップです。今、実際に動いている列車や発着している旅客機をリアルな3Dマップ上に滑らかなアニメーションで表現します。これは、現実世界とそっくりな双子をデジタルの世界に表現した「デジタルツイン」です。 ユーザーは自由に3Dマップ上を動き回り、見たいところにズームインして東京の「今」を知ることができます。路線図として乗り換えルートを調べる、出かける前に目的地の街と天気を下調べする、列車を自動追跡して沿線の様子をただひたすら眺める、終電に逃さないためにダッシュすべきかどうか列車の現在位置から判断するなど、さまざまな使い方ができます。 Mini Tokyo 3D は PC、スマートフォン、タブレット、セットトップボックスなど、デバイスを問わず Web ブラウザさえあれば利用できる Web アプリケーションです。下記の URL からアクセスしてください。 https://minitokyo3d.com より詳しい情報は Mini Tokyo 3D ユーザーガイド https://github.com/nagix/mini-tokyo-3d/blob/master/USER_GUIDE-ja.md をご覧ください。ソースコードは GitHub リポジトリhttps://github.com/nagix/mini-tokyo-3d にて公開されています。開発の経緯は、Mini Tokyo 3D 開発日誌 https://togetter.com/li/1413307 にまとめています。

1. Mini Tokyo 3D
公共交通データAPIを使った交通デジタルツイン
草薙 昭彦 AKIHIKO KUSANAGI

2. ⾃⼰紹介
u 草薙 昭彦 (くさなぎ あきひこ)
u コグナイト株式会社 チーフソリューションアーキテクト兼CTO Japan
u シンガポール在住
u 過去は
u MapR Technologies
u EMC (Greenplum)
u Oracle
u Sun Microsystems
Twitter: @nagix

3. Mini Tokyo 3D
第3回 東京公共交通オープン
データチャレンジ最優秀賞
2019年度 VLED 勝⼿表彰貢献賞

4. 東京公共交通リアルタイム
3Dビジュアライゼーション
MINI TOKYO 3D
⼀⾔で⾔うならば

5. Mini Tokyo
3D: 別の⾔い
⽅をすると
リアル東京デジタル鉄道模型
東京公共交通デジタルツイン
動く東京近郊鉄道路線図
東京上空仮想フライトツアー

6. https://minitokyo3d.com
または
「Mini Tokyo 3D」で検索

7. 課題とテーマ
u 平成23年以降訪⽇・訪都外国⼈旅⾏者数は継
続的に増加、東京オリンピックに向けさらな
る増加が⾒込まれる
u 東京の公共交通ネットワーク網は世界⼀の複
雑度・過密ダイヤ
u 既存の交通サイネージ・Webアプリには直感
的でわかりやすいデザイン、突発的な交通障
害に対応するリアルタイム情報の反映が⾜り
ない
u 東京の交通事情を知らない訪⽇した外国⼈や
観光客が快適に過ごせるような⽅策が求めら
れている

8. Mini Tokyo 3D 概要
u 東京の公共交通のリアルタイム3Dマップ
u 今、実際に動いている列⾞やバス、発着して
いる旅客機をリアルな3Dマップ上に滑らかな
アニメーションで表現
u 現実世界とそっくりな双⼦をデジタルの世界
に表現した「デジタルツイン」
u ユーザーは⾃由に3Dマップ上を動き回り、⾒
たいところにズームインできる
u PC、スマートフォン、タブレット、セット
トップボックスなど、デバイスを問わず Web
ブラウザさえあれば利⽤できる Web アプリ https://minitokyo3d.com

9. 利点・特徴
u 全てがリアルタイム
u 現実の時刻表やリアルタイムの遅延情報に従って運⾏する列⾞や旅客機を上
空の好きな視点から観覧
u 東京の⽇の出・⽇の⼊り時刻に合わせて景⾊の明るさが変化
u リアルタイムの気象情報を基にした降⽔アニメーション
u 鉄道路線図の⾒やすさをそのままに
u 路線図や案内で使われているものと同じラインカラー
u 乗り換え駅の接続の表⽰
u 列⾞・旅客機はシンプルな単⾊の直⽅体にしてシンボル性を向上
u 操作性とパフォーマンス
u 1,200以上の列⾞や旅客機が同時運⾏するラッシュ時、スマートフォンでも⾮
常にスムーズな運⾏アニメーションを実現
u ⽇英中韓の4ヶ国語対応
u 駅名検索にも対応
u 現実に限りなく近づけた列⾞運⾏と表⽰
u 実際の列⾞と同じ動きになるように、列⾞の起動加速度や最⾼速度を微調整
u 地上を⾛る列⾞の地下トンネル部分、地下鉄の地上⾛⾏区間も完全に再現
u 地上・地下の表⽰切り替え
u 地上と地下の路線網を切り替えて表⽰することで⾒やすさを追求

10. 4ヶ国語に対応
u 訪⽇観光客の7割は中国・韓国・台湾・⾹港から
u 駅名、路線名、空港名、航空会社名、・・
u ⼿⼊⼒なので、実はここにかなりの時間をかけている

11. 技術的な
⼯夫事項
u 地上・地下を含めた3Dモデルの表⽰
u 複数のオープンソースライブラ
リ (Mapbox, deck.gl, three.js)
を多層的に融合して地上・地下
の路線と列⾞の動きを表現
u 性能の追求
u 最適化の数々
u 路線上の始点からの距離、⽅⾓、傾斜の事前計算と⼆分探索
u 描画時の三⾓関数の使⽤の回避
u 画⾯外の⾞両のフレームレートを1fpsに
u 圧縮によるロード時のデータ量削減
u 降⾬パーティクルの動的な更新、データの遅延更新
u 降⽔データの解析
u WebGLパーティクルを使った
3D降⽔アニメーション
u 降⽔ナウキャスト画像からピク
セルを解析して降⽔強度を取得

12. ユーザビリティ
への⼯夫事項
u 地上・地下の切り替え
u 地上の路線と地下鉄を両⽅
表⽰すると⾮常に⾒にくい
u ボタンで表⽰を切り替えること
で⾒やすい路線図に
u 列⾞・旅客機の追跡
u 注⽬した列⾞・旅客機の
動きを追える追跡モード
u 360度旋回を⾏うヘリコプター
視点、斜め後⽅視点を選べる
u 駅名検索
u 初めて東京にきた観光客でも⾏
き先がわかるように
u ⼀部でも⼊⼒すると候補を提⽰、
選択すると移動アニメーション

13. デザインの
⼯夫事項
u シンボル性のある路線と列⾞・バス・旅客機
u 3Dモデルの形状はあえてシンプ
ルな単⾊の直⽅体にして、シン
ボル性を⾼めた
u アニメーション
u 視点移動や地上・地下表⽰の切
り替え、列⾞・旅客機の
フェードイン・アウトなど、60
フレーム/秒のスムーズなアニ
メーションを随所に利⽤
u マップの⾵景の時間による変化
u 時間によって⾊合いや明るさを
変化させてリアルさを追求
u ⽇の出・⽇の⼊りの時間は東京
の緯度・経度をもとに計算

14. u 活⽤している官⺠データ
u 交通データ: 東京公共交通オープンデータチャレンジ
u 地図データ: Mapbox (https://www.mapbox.com)
OpenStreetMap (https://www.openstreetmap.org)
u 降⽔データ: 気象庁降⽔ナウキャスト (https://www.jma.go.jp/jp/radnowc/)
u 離着陸ルートデータ: 国交省東京航空局 (https://www.ntrack.mlit.go.jp)
u 活⽤しているオープンソースライブラリ
u Mapbox GL JS, Turf.js, deck.gl, three.js, Shader Particle Engine, SunCalc, pako,
Font Awesome, Loaders.css
u Mini Tokyo 3D ⾃⾝もオープンソースで公開中
u https://github.com/nagix/mini-tokyo-3d
データとオープンソースコード

15. u 公共交通データの「オープン化」で何が実現することを
知ってもらうため、実際に公共交通データを公開したア
プリコンテストが開催
u 公共交通オープンデータ協議会に参加する、⾸都圏の主
要な交通事業者（鉄道、バス、航空）のデータを公開
u 時刻表、列⾞の現在地の情報を含む、多数の静的、動的
データを⼀般開発者に公開
u 2017年度の第1回を⽪切りに、2020年東京オリンピッ
ク・パラリンピックに向けて、継続的に開催中
u https://tokyochallenge.odpt.org
東京公共交通オープンデータチャレンジ

16. u ⽇本における公共交通事業者とデータ利⽤者を結ぶデータ連携プラットフォーム
u 鉄道、バス、航空、フェリー等の公共交通データを、⼀般の開発者やICT事業者（経路探索
事業者等）にワンストップで提供
u 公共交通オープンデータ協議会が運営
https://www.odpt.org
u 事前処理（クレンジング）を⾏ったデータを、
REST APIを通じて、共通のJSON形式で提供
u バスのデータを中⼼に、GTFS形式でのデータ
提供も⾏う
公共交通オープンデータセンター

17. u 交通事業者は、⾃社のデータを
共通のフォーマットで、ICT事
業者に届けることが可能になる
u ICT事業者から公共交通データ
にアクセスする敷居が下がり、
様々なサービスの提供が可能に
なる
u ⼀般利⽤者にとってより⾼度で
便利なサービスの選択肢が増え
る
公共交通オープンデータセンターの役割
ODPT API

18. u データ
u セマンティクスの概念をベースとしたucR形式（具体的にはJSON-LD）
u 実在する概念（エンティティ）に対して識別⼦（ucode）を付与
u 鉄道の例
u 列⾞、駅、路線、駅時刻表、運⾏情報、・・・
u これらのエンティティ間に存在する関係性（Relation, Link）を記述
u 本APIで提供する情報は全てトリプル（triple）をベースとした情報記述が⾏われる
u 現実に存在するモノの関係性を主語（subject）、述語（predicate）、⽬的語（object）の 3要
素で表現したものはトリプルと呼ばれる
ODPT API

19. u データの例︓有楽町線
の列⾞の在線情報
ODPT API
[
{
"@context": "http://vocab.odpt.org/context_odpt_Train.jsonld",
"@type": "odpt:Train",
"@id": "urn:ucode:_00001C000000000000010000030FD5D6",
"dc:date": "2017-11-28T11:02:15+09:00",
"dct:valid": "2017-11-28T11:02:45+09:00",
"odpt:frequency": 30,
"odpt:railway": "odpt.Railway:TokyoMetro.Yurakucho",
"owl:sameAs": "odpt.Train:TokyoMetro.Yurakucho.B1045S",
"odpt:trainNumber": "B1045S",
"odpt:trainType":
"odpt.TrainType:TokyoMetro.Local",
"odpt:delay": 0,
"odpt:originStation": [ "odpt.Station:TokyoMetro.Yurakucho.ShinKiba" ],
"odpt:destinationStation": [ "odpt.Station:TokyoMetro.Yurakucho.Wakoshi" ],
"odpt:fromStation": "odpt.Station:TokyoMetro.Yurakucho.ChikatetsuNarimasu",
"odpt:toStation": "odpt.Station:TokyoMetro.Yurakucho.Wakoshi",
"odpt:railDirection": "odpt.RailDirection:TokyoMetro.Wakoshi",
"odpt:operator": "odpt.Operator:TokyoMetro”
}
]
遅延時間(秒)
ucode
列⾞識別⼦

20. u REST API クエリの例︓JR⼭⼿線の東京と五反⽥の駅情報を取得
ODPT API
https://<ODPT_URL>/api/v4/odpt:Station?
odpt:railway=odpt.Railway:JR-East.Yamanote&
dc:title=東京,五反⽥&
acl:consumerKey=<ACL_CONSUMERKEY>
駅情報を検索
JR⼭⼿線
東京、五反⽥
APIトークン

21. u 路線・駅データ、時刻表データの事前準備
u アプリのビルド時、Node.js コードから
u 必要な静的データを整形・圧縮して、ページロード時にクライアントに送信
u 動的な列⾞在線情報と路線運⾏情報の取得
u ブラウザのクライアントコードから
u 1分毎
u 動的な離発着スケジュールの取得
u ブラウザのクライアントコードから
u 1分毎
Mini Tokyo 3D での API 利⽤

22. u 通常は静的な時刻表通りの運⾏
u 動的な列⾞在線情報に遅延時間情報があれば、その時間分だけ時刻表通りの運⾏の
位置からずらす
u 配信に3分程度の遅れがあるため、在線位置情報をそのまま使うわけにはいかない
Mini Tokyo 3D での API 利⽤
8:42 有楽町 8:44 東京 8:46 神⽥
( ( (
8:43 有楽町 8:45 東京 8:47 神⽥
( ( (
在線位置情報で取得できる位置 ↑ ↑ 時刻表の位置
1分遅延
実際の位置 ↑

23. • ゆりかもめ、京急空港線・⼤師線、京成、北総鉄道、
芝⼭鉄道、東武、⻄武、⼩⽥急、東急、みなとみら
い線、相鉄、埼⽟⾼速鉄道、東葉⾼速鉄道、つくば
エクスプレス、JR相鉄直通線を追加
• 正確な速度・加速度調整
• 臨時列⾞の表⽰
• データの圧縮による通信量の削減
• ⾵向き、時間帯に応じた⽻⽥・成⽥空港の⾶⾏ルー
トのリアルタイムの反映
• Mapbox が OpenStreetMap をより詳細なゼンリ
ン地図データに変更
• 追跡中の列⾞時刻表の表⽰
• ⾼速再⽣モード（タイムラプス機能）
• minitokyo3d.com ドメイン運⽤開始
• ⼀部特急列⾞のデータ追加と、3Dモデル対応
• 2020/3/14 ⾸都圏各線ダイヤ改正に対応、⾼輪
ゲートウェイ駅開業
• 繁体字中国語サポート
• Rollup による単⼀JSファイルへのバンドル
Version 1 → Version 2 Version 2.x 以降 (計画)
• JR成⽥線・川越線・⼋⾼線、東武東上線(〜⼩川
町)・越⽣線、多摩都市モノレール、千葉都市モノ
レールの追加
• 2020/6/6 東武・⽇⽐⾕線ダイヤ改正対応
• ⻁ノ⾨ヒルズ駅開業
• 特急列⾞のさらなるデータ追加
• 航空機サポートの再⽣モード対応
• 路線・駅情報の表⽰
• GPS情報取得対応、乗⾞列⾞の推定
• リアルタイム経路探索（3D乗り換え案内）
• パーソナライズ（ログイン、よく使うルート登録、
ナビゲーション）
• 省電⼒モードサポート
• プラグインサポート
• APIによるカスタマイズサポート
• npmモジュール化
• React、Vueコンポーネント化

24. • ゆりかもめ、京急空港線・⼤師線、京成、北総鉄道、
芝⼭鉄道、東武、⻄武、⼩⽥急、東急、みなとみら
い線、相鉄、埼⽟⾼速鉄道、東葉⾼速鉄道、つくば
エクスプレス、JR相鉄直通線を追加
• 正確な速度・加速度調整
• 臨時列⾞の表⽰
• データの圧縮による通信量の削減
• ⾵向き、時間帯に応じた⽻⽥・成⽥空港の⾶⾏ルー
トのリアルタイムの反映
• Mapbox が OpenStreetMap をより詳細なゼンリ
ン地図データに変更
• 追跡中の列⾞時刻表の表⽰
• ⾼速再⽣モード（タイムラプス機能）
• minitokyo3d.com ドメイン運⽤開始
• ⼀部特急列⾞のデータ追加と、3Dモデル対応
• 2020/3/14 ⾸都圏各線ダイヤ改正に対応、⾼輪
ゲートウェイ駅開業
• 繁体字中国語サポート
• Rollup による単⼀JSファイルへのバンドル
Version 1 → Version 2 Version 2.x 以降 (計画)
• JR成⽥線・川越線・⼋⾼線、東武東上線(〜⼩川
町)・越⽣線、多摩都市モノレール、千葉都市モノ
レールの追加
• 2020/6/6 東武・⽇⽐⾕線ダイヤ改正対応
• ⻁ノ⾨ヒルズ駅開業
• 特急列⾞のさらなるデータ追加
• 航空機サポートの再⽣モード対応
• 路線・駅情報の表⽰
• GPS情報取得対応、乗⾞列⾞の推定
• リアルタイム経路探索（3D乗り換え案内）
• パーソナライズ（ログイン、よく使うルート登録、
ナビゲーション）
• 省電⼒モードサポート
• プラグインサポート
• APIによるカスタマイズサポート
• npmモジュール化
• React、Vueコンポーネント化
「Togetter: Mini Tokyo 3D 開発⽇誌」を
⾒ると⽇々の開発進⾏状況がわかります
https://togetter.com/li/1413307

25. https://minitokyo3d.com
または
「Mini Tokyo 3D」で検索