都内の鉄道の“動き”を3D地図上にリアルタイムに再現、「Mini Tokyo 3D」はいかにして作られたのか？　開発者・草薙昭彦氏が語る

　センサーや測位システムによって得られた現実世界の情報を、リアルタイムにサイバー空間上で再現してシミュレーションなどを行う“デジタルツイン”が注目されている。このデジタルツインを東京都内の鉄道網において実現した「Mini Tokyo 3D」が2019年秋に公開された。列車の動きを3D地図上にリアルタイムに再現するこの作品がいかにして作られたのか？　開発者の草薙昭彦氏が12月4日、都内で開催されたウェブ地図サービス「mapbox」とOpenStreetMap（OSM）ユーザーコミュニティとの交流イベント「mapbox/OpenStreetMap meetup #03」に登壇し、開発の経緯を語った。

「Mini Tokyo 3D」

開発の原点は、路線管理をするパズルゲーム「Mini Metro」

　「Mini Tokyo 3D」は、都内の3D地図上で、さまざまな鉄道路線の列車が走行する様子を眺められる公共交通デジタルマップ。走行する列車はシンプルな直方体で描かれており、その色は鉄道のラインカラーに合わせてあるので、どの路線なのかがひと目で分かる。

　この直方体は時刻表通りに動くだけではなく、各鉄道会社が配信する運行情報に合わせて駅から駅へと移動する。運行に遅れが生じた場合は遅延状況がほぼリアルタイムに反映されるため、現実世界の列車の動きをウェブブラウザー上で把握することができる。

　開発者の草薙昭彦氏は、ノルウェーのCognite AS社の日本法人であるコグナイト株式会社のチーフソリューションアーキテクト兼CTO Japanを務めるエンジニアで、現在はシンガポールに在住している。

草薙昭彦氏

　草薙氏は冒頭で自身のプロフィールを紹介した。幼いころから地図が好きだった草薙氏は、小学校のときに夏休みの自由工作で、発泡スチロールの板を積層して、紙粘土を盛って着色した立体地図を作成したことがあるという。

　この立体地図は、知りたい場所のボタンを押すとランプが点灯する凝ったものだった。また、鉄道も地図と同じくらい大好きで、自宅から小学校まで仮想の鉄道路線を引いて、その路線の時刻表を作ったときもあった。

　ゲームも好きで、「A列車で行こう」や「シムシティ」でよく遊んだという。さらに、ゲームは自ら作るのも好きで、小学校のときからプログラミングを学び、WindowsやMac向けのゲーム開発を行っていた。

子どものころから地図が好き

　現在の仕事は地図にはあまり関係ないが、私的にさまざまな作品を開発しており、最近では1980年代から北朝鮮が発射したミサイルの弾道をデジタル地球儀の上に可視化する作品なども開発している。

ミサイルの弾道を可視化

　今回、Mini Tokyo 3Dの開発を始めた理由として、草薙氏は以下のように語る。

　「最近、“デジタルツイン”という言葉をよく聞き、個人的に面白いデジタルツインが作れたらいいな、と思って、なにか良いデータがないか探していたところ、『第3回東京公共交通オープンデータチャレンジ』というアプリケーションコンテストを知りました。

　よく見たら東京中の鉄道やバスに関する運行データなどがコンテストのために公開されていて、すごく面白そうだなと思いました。」

　開発にあたってヒントにしたのが、「Mini Metro」というパズルゲームだ。同ゲームは、人口が急増する都市において、地下鉄の駅を線路でつないで路線管理するシンプルなストラテジーゲーム。

　草薙氏はこのゲームが好きで、Mini Tokyo 3Dを開発する際にもMini Metroのことが頭の中にずっとあったという。

「Mini Metro」

路線の滑らかな表示を様々な工夫によって実現

　最初に作ったバージョン「Mini Tokyo」は、2Dの地図上を列車が動き、それを追跡しながら俯瞰できるという作品だった。背景地図にはラスター形式の地図データを使用し、「Leaflet」というウェブのマップライブラリを使用した。

　線路や列車を示す点の描画はスケーラブルベクターグラフィックス（SVG）のフォーマットで、データサイエンティストがよく使う「D3.js」というビジュアライゼーションのライブラリを使用し、背景地図の上にオーバーレイ表示した。

最初に作った2D版の「Mini Tokyo」

　「SVGで路線を滑らかに表示するためにベジェ曲線を使っていて、通過する点やハンドル（方向線）などを指定することで、簡単に滑らかな線が引けます。列車の動きについては、ウェブのCSSアニメーションと同じ関数を使うことで、加減速を滑らかに表示できます。

　難しかったのは路線図の描き方で、例えば東京駅－神田駅間のように山手線、京浜東北線、中央線と複数の路線が重なっている部分については、その通りに3つの線を描くと重なってしまい、3つが並んで走っていることが分からなくなってしまう。

　そのために、ズームアウトしたときに等間隔に線が並ぶように“オフセット”という処理を行いました。」

　オフセットとは、本来の位置（真位置）からずらした場所に表示させる処理のこと。単純にオフセットさせるのではなく、例えば東京駅から神田駅までは3つの線路が並んでいたのが、神田駅から御茶ノ水駅のほうへ分かれていく場合は、少しずつ真位置に戻るように滑らかなトランジション（移り変わり）のロジックを作成した。ロジックの構築は、併走する路線数が増えるにつれて難しくなるという。

ラインのオフセット

“見やすさ”だけでは飽き足らず、より”ゲームっぽく”

　このようにして初期バージョンが完成したものの、草薙氏のこだわりは、これだけでは飽き足らなかった。

　「初期バージョンも悪くはないけど、もっとゲームっぽくしたいと思っていろいろと探したら、『Mapbox GL JS』というJavaScriptライブラリを見つけました。

　3Dでビルが表示されているのを見て、この地図の上に列車を走らせたらいいのではないかと思いました。このライブラリでは、地図データがラスターではなくベクトルデータとなるため、より柔軟な表示が可能となります。

　ラスターだとサーバー側でレンダリングしたものを送るだけですが、ベクトルならクライアント側でロジックを作れるので、道路の色を変えるとか、ポリゴンを立体的に見せるとか、スタイルを自由に変更できます。また、mapboxの中でいろいろなレイヤーを重ねて表示できるのも魅力的でした。」

　地図上への路線や電車の描画には、緯度・経度の座標を持つポイントやライン、ポリゴンなどを格納するファイルフォーマット「GeoJSON」を使用し、これを「Turf.js」というライブラリを使って加工した。これらを使って、まずは東京駅と神田間を往復するだけのプログラムを組んだ。

プロトタイプとして東京駅－神田駅間を列車が往復するコードを書いた

　「最初のコードは100行くらいの短いもので、電車を表示しないのであればわずか10行くらいで済むものでした。『これは（簡単で）いい！』と思って、ここからどんどん路線を付け足したり、機能を発展させたりしていきました。

　例えば特定の電車をクリックして追跡するときに、上空からぐるぐる回りながら見下ろすようにするとか、電車に乗った感じで、斜め後ろからずっと追っていくとか。

　あとは、複数の線路が並んでいるときのオフセットも、ズームアウトしてもラインが重ならず、間隔を保ったまま見えるようにしたほうが分かりやすいので、それを実現するためにズームレベルによって各線を別のレイヤーにして切り替えるようにしています。

　また、電車の形状についても、ズームしても一定の大きさを保つようにプログラムしています」

表示の工夫で、リアルタイムな遅延情報の確認が可能に

　さらに、プロトタイプは時刻表通りに動かしていたが、ここからはコンテスト用に公開されているリアルタイムの運行データを利用することにした。

　「運行状況をリアルタイムに見せるのには工夫が必要です、コンテスト用のデータは、リアルタイムと言っても実は数十秒から数分前のデータなので、これをそのまま反映しても、それほどリアルタイムではありません。しかも、鉄道会社によって更新される間隔も違います。

　そこで、基本的には時刻表通りに動かすけれど、もし遅延が発生した場合はその分だけ定刻からずらすことにしました。例えば3分遅延となっていたら、本来3分前に走っていた位置にずらすということです。

　遅延情報のほかにも、電車がどの駅にいるのかという情報も取得できるのですが、それを使うと変な位置に来てしまうので、時刻表データと遅延時間の情報だけを使うことにしました。」

マウスポインタを重ねるとリアルタイムの運行情報が表示される

　ちなみに遅延が発生している列車はオレンジ色の丸が表示されるようになっているので、ズームアウトすると都内のどの路線が正常に動いているのかをひと目で把握できる。

遅延が発生しているところにはオレンジ色の丸が表示される

　さらに、直方体の数で列車の編成（車両数）が分かるようにした。ズームアウトしているときは直方体は1つだが、ズームインすると直方体の数が増える（同機能は既存特許に抵触する可能性があるため、現在は機能を無効化している）。

直方体の数で、その編成の車両数が分かる

　このほか、コンテストの趣旨の1つに、「東京五輪のときに訪日外国人が東京の公共交通を乗りこなせるようにしたい」という目的があったため、電車にマウスポインタを重ねたときにポップアップされる表示を多言語化することにした。日本語に加えて英語、中国語、韓国語と、計4カ国語に対応している。

到着時刻を見越して時速の計算も。徹底したリアルさの追求

　このような土台を作った上で、表示する路線を増やしていったところ、今度は大量の列車が移動する様子を表示する処理が追いつかずに、コマ落ちが発生するようになっていった。

　そこで、WebGLベースの軽量なJavaScriptライブラリ「three.js」を使うことにした。同ライブラリはmapboxのカスタムレイヤーとして組み込める点が便利で、列車をthree.jsのオブジェクトで表示したところ、動きが格段に良くなったという。

　それでも通勤ラッシュ時は1200～1300もの列車が同時に走るため、それら全てを描画するにはさまざまな最適化が必要だった。

　方角や傾斜を線分ごとに事前計算して、描画時に三角関数を使って位置を計算することはできるだけ避けるようにしたほか、1編成内の車両位置の計算をまとめて行ったり、画面外に出て行った車両のフレームレートは1fpsと大幅に落としたり、地図のテキストラベルは駅名だけにしたりと、いろいろな工夫を行っている。

　一方で、鉄道の動きの再現にはかなりこだわっており、駅間の距離をもとに、「この時間にこの駅へ発着するには、時速何kmで走れば良いのか」を計算し、加減速や最高速度についてもリアルさを追求している。

　さらに、地上と地下鉄の画面をボタンで切り替えられるようにした。

　地下鉄に切り替えると画面が暗くなり、地上を走る列車が透明度が高く表示される。逆に地上に切り替えた場合は地下鉄の列車が薄く表示される。

地下鉄の画面

　地下鉄の路線を描くときに課題となったのが、mapboxのレイヤーだけではGeoJSONのマイナスの標高に対応しないため、地下にオブジェクトを置けないことだ。

　そのため、Uberが開発したオープンソースのライブラリ「deck.gl」を使用することにした。これはマイナス標高にも対応し、かつ、mapboxのレイヤーとして重ねることも可能なため、地下鉄の描画には最適だった。

実際の秒単位での運行に合わせ、時刻表のデータは“毎分25秒”を基準に

　また、この時点までは、路線データを手でポイント指定してベジェ曲線を使って描いていたが、全ての路線を手作業で行うのは難しいため、OSMのデータから路線のデータを抜き取って使うことにした。これにより、路線の拡張がかなりはかどるようになったという。

OSMのデータから線路のデータを取得

　ここまではシンガポールでの開発だったが、10月にようやく日本に来られる機会があり、Mini Tokyo 3Dがどれくらい現実を再現できているのかを実際に確認してみたという。

　「都内で列車に乗りながら確認してみたところ、『すごい、超合ってる！』と感動しました。ただし、それでもわずかにタイミングがずれるときがあったので、加速度や最高速度などを微調整しました。

　また、提供される時刻表データは分単位ですが、鉄道会社は実際には秒単位で運行していて、提供されているデータだけでは完全に合わせられません。そこで、より現実に近付けるために、最も誤差が少ないと思われる“毎分25秒”を基準にしました。」

　さらに、草薙氏が来日中のときには、台風15号と台風19号が来ており、首都圏の鉄道では大幅に遅延が発生したり、計画運休が行われたりした。このときを利用してデバッグを行ったことで、さらに正確に現実の状況を反映できるようになったという。

尽きないアイデアで、第4回コンテストでは収益化も検討

　このほか、鉄道だけでなく、飛行機ファンも取り込むため、3D地図上に飛行機のオブジェクトも飛ばすことにした。飛行機についても列車と同じように、直方体を組み合わせたかわいい見た目で、尾翼などの色でどこのエアラインなのかが分かるようにした。

飛行機が離発着する様子も可視化

　しかも、羽田空港の離発着は、風向きや天候によって4パターンあり、リアルタイムにどのコースで離発着するのかも分かるようにした。また、羽田空港にある複数の滑走路で同時に飛行機が離発着したり、離発着を待って行列したりする様子も再現している。

　ほかにも、気象庁の「降水ナウキャスト」のデータをもとに5分ごとに更新される8段階の降水予測データも反映し、どこで雨が降っているか把握できるようにしたほか、昼夜で画面の明るさを変えるようにも変更した。日の出と日の入の時刻も東京のリアルタイムのデータを使用している。

　また、「ぐるなび」のAPIを使ったグルメ情報の掲載も試験的に始めている。飲食店をジャンルや営業時間でフィルタリングすることが可能なため、夜中に駅周辺で営業中の飲食店を探すこともできる。

「ぐるなび」の情報を掲載

　「第3回東京公共交通オープンデータチャレンジのコンテストは11月で終わったのですが、まだどんどんアイデアが湧いてくるので、今後も引き続き、いろいろと作り込もうと思っています。

　さらに第4回は、営利活動に使うことも可能になるので、この作品を収益につなげることも検討したいと思います。来年はオリンピックイヤーでもあるので、もっといろいろなことに取り組んでいきたいですね。」