乗り換え案内サービスとして有名な「駅すぱあと」。Yahoo!路線情報向けにも情報を提供しているので、知らず知らずの内にお世話になっている方も多いことでしょう。

駅すぱあとはWeb APIも提供しているので、Monacaと簡単に連携することができます。フリープランも用意されているので気軽に試せます。

駅すぱあとWebサービス
駅すぱあとWebサービス フリープラン

作るアプリの紹介

できあがった形は次のようになります。まず都道府県一覧が表示されます。

都道府県をタップするとその都道府県にある鉄道会社が一覧表示されます。

鉄道会社名をタップすると地図上にその鉄道会社の駅の場所がマーカーとなって表示されます。

アプリのコードはgoofmint/Monaca_Ekispert_Demoにアップロードしてあります。

利用するWeb API

今回のアプリで必要なWeb APIは以下の2つになります。

駅すぱあとのAPIキーはjs/app.js、GoogleマップのAPIキーは index.html にそれぞれ書き換える場所があります。

画面について

画面はOnsen UIを使って実装しています。

都道府県一覧画面

都道府県一覧についてはAPIは提供されていません。
都道府県コード<ons-list /> 内にハードコーディングします。

都道府県をタップした際のイベントは次のようになります。都道府県コードを元に、鉄道会社情報を取得するAPIのURLを作ります。
利用するWeb APIは 会社情報 です。
処理内容はAjaxでJSONを取得するだけです。

データを取得したら鉄道会社一覧画面(trains.html)に遷移します。

鉄道会社一覧画面

次の鉄道会社一覧画面では先ほど取得したデータを使って画面を作ります。

そして先ほどと同じように、鉄道会社名をタップしたら駅名一覧を取得します。
利用するWeb APIは 駅情報 になります。

地図画面

最後に地図表示を行います。地図表示自体はGoogleマップを使っているので難しくないでしょう。地図の中心点には一番最初の駅情報を指定しています。

そしてすべての駅情報をマーカーに落としますが、その際に google.maps.LatLngBounds にマーカー情報を追加します。この LatLngBounds は最後にすべてのマーカーが表示されるようにGoogleマップの表示を調整してくれる機能です。


このようにして都道府県一覧から鉄道会社一覧を表示し、さらに駅を地図上にマッピングできます。今回は駅すぱあとWebサービスで取得できる情報とGoogleマップを組み合わせてみましたが、その他にもアイデア次第で様々な情報と組み合わせられるでしょう。ぜひ使ってみてください。

今回のコード全文はgoofmint/Monaca_Ekispert_Demoにアップロードしてあります。実装時の参考にしてください。