Metro Info.

このアプリケーションについて

• 列車ロケーション情報を路線マップにプロットし、運行情報、時刻表を表示するアプリケーションです。
• 路線マップより、駅をクリック・もしくはタップするだけで時刻表を表示できます。また時刻表は発車時刻が近いものをブリンク表示し、見やすくしています。
• 列車ロケーション情報はほぼ仕様通りに更新しています。その際列車位置をアニメーションで変化させています。
• 運行に支障が発生した場合、発生路線をブリンク表示させるようにしており、一目でどの路線で異常が発生しているのかが理解できます。
• レスポンシブ対応をしており、スマフォでも表示が崩れることなく動作します。PCおよびiPhone5 と Chromeの組み合わせで動作を確認しています。PC版のFirefox,IE11、iPhoneのSafariで動作することも確認しております。

動機

GISに興味を持ち、d3.js等を使用して地図をSVGでプロットすることを試している時にちょうどこのコンテストが開催されていることを知りました。またRDFa LiteやJSON-LDに興味があり、具体的なデータで学んでみたいということもあり、丁度良い題材であったため、応募することにいたしました。

作成するのに使用しているソフトウェア・ライブラリ

• Visual Studio 2013 Express For Web ... エディタ
• Chrome ブラウザ ... デバッグ用
• node.js ... サーバー側データ処理エンジン
• nginx ... Webサーバー
• d3.js ... データ可視化/UI構築
• Bootstrap ... UI構築
• require.js ... 非同期モジュール読み込み
• q.js ... 非同期処理効率化(Promise/Future)
• jQuery ... UI構築
• domReady.js ... DOM読み込む完了検出
• ect ... サーバー側 HTMLテンプレート/レンダリングエンジン
• bootstrap-submenu ... ドロップダウンメニューをサブメニュー化するライブラリ
• LESS ... CSS編集

今後について

実行していただくとわかりますが、簡単な機能しか実装できておりません。今後これをベースとして下記の機能を実装しようと考えております。

• 地図ソフトウェアとの連携
• Geo Location APIとの連携
• 列車時刻表と列車ロケーション情報を使用し、リアルタイムで列車走行位置をシミュレーション・表示する
• 描画パフォーマンス向上のため、WebGL(Three.js)による描画