駅すぱあとWebサービスの範囲探索APIと駅すぱあと路線図を組み合わせてアプリを作ってみる

[ヴァル研究所 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/val) 12日目の記事です。
[今日は駅すぱあと路線図](http://rosenzu.strikingly.com/)と[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)を組み合わせて使用する例を紹介しようと思います。

## 駅すぱあと路線図と駅すぱあとWebサービス

[10日目の記事](https://qiita.com/valsitoh/items/104507bab6f765a32767)でも駅すぱあと路線図を紹介していますが、今回は[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)の[範囲探索](http://docs.ekispert.com/v1/api/search/multipleRange.html)(/search/multipleRange)の結果を路線図にマッピングしてみます。

[駅すぱあと路線図](http://rosenzu.strikingly.com/)では、[駅コード](http://docs.ekispert.com/v1/dictionary/station-code/)や[運行路線](http://docs.ekispert.com/v1/dictionary/service-rail/)といった、[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)で用いられる概念がそのまま利用できるため、両者を組み合わせて利用すると、より効果が得られます。

## 駅すぱあとWebサービスの範囲探索API

[範囲探索](http://docs.ekispert.com/v1/api/search/multipleRange.html)(/search/multipleRange)は、起点となる駅と所要時間の上限値を指定し、到達可能な駅の一覧を取得するAPIです。

昨年のヴァル研究所 Advent Calendarでも[範囲探索](http://docs.ekispert.com/v1/api/search/multipleRange.html)(/search/multipleRange)について紹介しています。ご興味のある方は併せてご覧いただければと思います。

 * [複数駅を起点にした範囲探索を駅すぱあとWebサービスで試してみる](https://qiita.com/valsitoh/items/3433df58dffdff4063d3)

## 範囲探索の結果を駅すぱあと路線図にマッピングする

[範囲探索](http://docs.ekispert.com/v1/api/search/multipleRange.html)の結果を[駅すぱあと路線図](http://rosenzu.strikingly.com/)にどうマッピングしているかは、実際の動作画面を見てもらうのが良いかと思います。

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/152217/f032a1ea-127c-ea09-6509-2f61daf7f636.gif)

このサンプルでは、東京駅を起点駅に指定し、所要時間の上限値を変化させていった際の到達可能駅をマッピングしています。ごく簡単なサンプルですが、所要時間を大きくすると到達可能な駅が放射状に伸びてゆく傾向が見て取れます。これを応用すると、引っ越しの際の最寄り駅選び等が楽になるかもしれません。

## サンプルコード

今回のサンプルもGitHubで公開しています。

 * [ValLaboratory/advcal](https://github.com/ValLaboratory/advcal)

## アクセスキーの入手

今回のサンプルは、[駅すぱあと路線図](http://rosenzu.strikingly.com/)と[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)のアクセスキーが必要になります。
[駅すぱあと路線図](http://rosenzu.strikingly.com/)にはフリープランもございますので、以下よりお申込みいただければと思います。

 * [駅すぱあと路線図 フリープラン](https://ekiworld.net/service/sier/railmap/index.html)

[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)のアクセスキーは、[3日目の記事](https://qiita.com/valsitoh/items/966ead6c0b27fad7b27a)でご紹介した[Amazon SaaSストア](http://www.amazon.co.jp/saas/)からご購入いただくのがおススメです。

 * [SaaSストアで駅すぱあとWebサービスを購入する](https://qiita.com/valsitoh/items/966ead6c0b27fad7b27a)

## サンプルコードを動かしてみる

さっそく環境を構築してみます。路線図のアクセスキーは `work_dir/ews_rosenz_and_multipleRange/setup_ews_rosenz.sh` で設定してください。
[GUIサンプル](https://github.com/EkispertWebService/GUI)と同じく、駅すぱあと路線図のアクセスキーを設定作業を `setup_ews_rosenz.sh` で行っています。

以下のように[駅すぱあと路線図](http://rosenzu.strikingly.com/)のアクセスキーと[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)のアクセスキーを指定してスクリプトを実行すると、サンプルコードにアクセスキーを設定できます。

```sh 
$ git clone https://github.com/ValLaboratory/advcal.git
$ cd advcal/2018/docker_env/
$
$ # 駅すぱあと路線図と駅すぱあとWebサービスのアクセスキー設定をおこなう
$ ./work_dir/ews_rosenz_and_multipleRange/setup_ews_rosenz.sh <駅すぱあと路線図のアクセスキー> <駅すぱあとWebサービスのアクセスキー>
```

あとはDockerイメージをビルドしてコンテナを起動します。

```sh 
$ # Dockerイメージをビルドする。
$ docker-compose build ews_rosenz
$ docker-compose up ews_rosenz
```

コンテナが起動したら、以下のURLをWebブラウザで開きます。

 * http://localhost:8080/

先ほどのサンプルが表示できるかと思います。以下の例では東京駅から200分以内で到達可能な駅を表示しています。八戸や金沢、姫路あたりまで移動できることが見て取れますね。

<img width="606" alt="img.png" src="https://qiita-image-store.s3.amazonaws.com/0/152217/ec433940-fbdb-4cde-8a4d-1c442449f10c.png">

## まとめ

[駅すぱあと路線図](http://rosenzu.strikingly.com/)と[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)を組み合わせて使用する例を紹介しました。
それぞれ単体のサービスとして利用することももちろん可能ですが、[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)にしかない機能・データを取得して[駅すぱあと路線図](http://rosenzu.strikingly.com/)と組み合わせることで、今回のサンプルのような見せ方も可能になります。ぜひ皆様の環境でもお試しいただければと思います。