東京メトロオープンデータ （１０）　応募完了

定期的に列車ロケーション情報・運行情報を東京メトロオープンデータAPIを定期的にコールして取得する。

取得したデータはファイル保存・zip圧縮して配布フォルダに保存する。メモリ管理を意識しないで作ったモジュールを常駐させるとガベコレがうまく働かずメモリを食いまくるということをここで学んだ。ガベコレが働くからといってリソース管理を怠ってはいけないのだった。

index.htmlを生成する。

• 国土情報地理院の駅データおよび路線データをQGISで加工したあとgeojsonデータ化したものを読み込み、東京メトロオープンデータAPIで得られる路線情報と駅情報と組み合わせ、路線図データ(svg形式)をd3.jsを使用して生成する。
• svgデータをectを使用しHTMLテンプレートへ埋め込み、index.htmlファイルを生成する。index.htmlは配布フォルダにzip圧縮して保存する。ectはなかなか高機能なテンプレートエンジンである。

駅情報・列車時刻表・駅時刻表を東京メトロオープンデータAPIをコールして取得し、配布フォルダにzip圧縮して保存する。

列車ロケーション情報をアニメーション表示する

サーバから全線の列車ロケーション情報を取得してマップ上に表示する。およそ90秒ごとにデータ更新が行われその際の位置移動はアニメーションする。

アニメーションはd3.jsのtransition()を使っている。データは90秒間隔で提供されるのであまり動きのある画面ではない。列車ごとの運行時刻表も取得できるから実時間でマップ上の動きをシミュレーションするようなことも可能だと思う。列車遅延時の補正とかが必要だからちょっと面倒かとは思うが。 列車の位置を示すマーカーのアニメーションは路線図上をトレースして動く。この部分の実装がちょっと難しかった。この部分の動きを実装するためには下記情報を参考にした。

【D3.js】 地図上のルートに沿ってアニメーション | GUNMA GIS GEEK

上記を参考に路線データをトレースすればよいのだが、路線データは必ずしも方向に沿って（順番に）データ化されているわけではない。そのため東京メトロオープンデータAPIで取得できる路線データは使用せず、国土数値情報　鉄道データを使用してQGISで路線データを加工し、駅順にうまくアニメーションするようにした。これが非常に面倒臭かった。

駅時刻表表示

マップ上の駅をクリックすると駅時刻表が表示される。下図はiPhon5で表示してみたものである。Bootstrapのモーダル丸出しですな。。

時刻は現在「時」が一番上に表示され、次に発車する列車の分がブリンクする。このブリンク表示はCSSアニメーションを使用して実現している。この表示は実時間に合わせ1分おきに更新する。ここでの更新もd3.jsを使用して簡潔に書けたように思う。

運行情報表示

運行情報は画面下中ほどに常時表示され、およそ5分ごとに更新される。クリックすると各線の運行状況がモーダルで表示される。

遅延が発生した場合は運行情報にその旨が表示され、マップ上の路線がブリンクする。