中津川篤司Twitter3Facebook24はてブPocket1LINE乗り換え案内サービスとして有名な「駅すぱあと」。Yahoo!路線情報向けにも情報を提供しているので、知らず知らずの内にお世話になっている方も多いことでしょう。APIも提供しているので、Monacaと簡単に連携することができます。フリープランも用意されているので気軽に試せます。フリープラン作るアプリの紹介できあがった形は次のようになります。都道府県一覧が表示されます。都道府県をタップするとその都道府県にある鉄道会社が一覧表示されます。鉄道会社名をタップすると地図上にその鉄道会社の駅の場所がマーカーとなって表示されます。アプリのコードはgoofmint/Monaca_Ekispert_Demoにアップロードしてあります。APIは以下の2つになります。それぞれ書き換える場所があります。ついてはAPIは提供されていません。内にハードコーディングします。tappable>青森県</ons-list-item>:</ons-list>都道府県をタップした際のイベントは次のようになります。都道府県コードを元に、鉄道会社情報を取得するAPIのURLを作ります。処理内容はAjaxでJSONを取得するだけです。鉄道会社一覧画面では先ほど取得したデータを使って画面を作ります。{html.push(`${train.Name}`);});$('#trains').html(html.join(''));そして先ほどと同じように、鉄道会社名をタップしたら駅名一覧を取得します。最後に地図表示を行います。地図表示自体はGoogleマップを使っているので難しくないでしょう。地図の中心点には一番最初の駅情報を指定しています。マーカー情報を追加します。最後にすべてのマーカーが表示されるようにGoogleマップの表示を調整してくれる機能です。(bounds);このようにして都道府県一覧から鉄道会社一覧を表示し、さらに駅を地図上にマッピングできます。今回は駅すぱあとWebサービスで取得できる情報とGoogleマップを組み合わせてみましたが、その他にもアイデア次第で様々な情報と組み合わせられるでしょう。今回のコード全文はgoofmint/Monaca_Ekispert_Demoにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。