駅すぱあとWebサービスを使って駅の場所を地図に表示する

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

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

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

作るアプリの紹介

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

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

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

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

利用するWeb API

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

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

// 駅すぱあと（js/app.jsの中）
let apiKey = 'YOUR_API_KEY';

<!-- Googleマップ（index.htmlの中） -->
<a href="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY</a>

画面について

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

都道府県一覧画面

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

<ons-list id="prefecture">
  <ons-list-item data-prefecture-id="1" modifier="chevron" tappable>北海道</ons-list-item>
  <ons-list-item data-prefecture-id="2" modifier="chevron" tappable>青森県</ons-list-item>
    :
</ons-list>

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

// 都道府県をタップすると、その都道府県にある鉄道会社をリストアップします
$(page).find('#prefecture ons-list-item').on('click', function(e) {

  // 都道府県コードを使います
  let prefecture_id = $(e.target).parents('ons-list-item').data('prefecture-id');

  // URLは次のようになります
  let url = `https://${domain}/v1/${format}/operationLine?prefectureCode=${prefecture_id}&key=${apiKey}`;

  // Ajaxで取得します
  $.ajax({
    url: url,
    dataType: 'json'
  })
  .then(function(results) {
    // データを取得したら鉄道会社一覧を表示します
    $('#navigator')[0].pushPage('trains.html', {
      data: {
        prefecture_id: prefecture_id,
        corporations: results.ResultSet.Corporation
      }
    });
  })
});

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

鉄道会社一覧画面

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

// 鉄道会社一覧の画面です
let prefecture_id = page.data.prefecture_id;

// 画面を作ります
let html = [];
$(page.data.corporations).each(function(index, train) {
  html.push(`${train.Name}`);
});
$('#trains').html(html.join(''));

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

// 鉄道会社をタップしたら駅名一覧を取得します
$(page).find('#trains ons-list-item').on('click', function(e) {
  // 鉄道会社名を使います
  let name = $(e.target).parents('ons-list-item').data('name');

  // URLは次のようになります
  let url = `https://${domain}/v1/${format}/station?prefectureCode=${prefecture_id}&key=${apiKey}&gcs=wgs84&corporationBind=${name}`;

  // Ajaxで取得します
  $.ajax({
    url: url,
    dataType: 'json'
  })
  .then(function(results) {
    // データを取得したら地図画面を表示します
    $('#navigator')[0].pushPage('map.html', {
      data: {
        stations: results.ResultSet.Point
      }
    });
  })
});

地図画面

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

// 地図画面です
let mapDiv = $(page).find("#map")[0];

// 地図の初期表示として最初の駅の位置情報を使います
let firstStation = page.data.stations[0];
let map = new google.maps.Map(mapDiv, {
  zoom: 16,
  center: new google.maps.LatLng(
    firstStation.GeoPoint.lati_d,
    firstStation.GeoPoint.longi_d
  )
});

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

// 駅の位置をマーカーに落とします
var bounds = new google.maps.LatLngBounds();
$(page.data.stations).each(function(index, station) {
  let marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(station.GeoPoint.lati_d, station.GeoPoint.longi_d)
  });
  bounds.extend (marker.position);
});

// マーカー全体が表示されるように表示位置を調整します
map.fitBounds (bounds);

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

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