GUIサンプル(駅すぱあとWebサービス)の環境をDockerで簡単に構築する

[ヴァル研究所 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/val) 4日目の記事です。
今日は[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)の[GUIサンプル](https://github.com/EkispertWebService/GUI)をDockerで手早く構築する方法を紹介しようと思います。

## GUIサンプル

[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)は、基本的にXML/JSONレスポンスを返すWebAPIサービスであり、探索結果の経路や運賃などは利用者側でレスポンスをパースする必要があります。レスポンスから利用者自身が必要とするデータのみを取捨選択できるという点では良いのですが、GUI画面に組み込みたいような場合はちょっと大変です。

そのような利用形態を想定し、HTML5に対応した[GUIサンプル](https://github.com/EkispertWebService/GUI)を提供しています。OSSの形で提供しており、基本的に無保証ではありますが、[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)をWebアプリケーションに組み込みたいという用途で便利にご利用いただけます。

## GUIサンプルを手早く使えるようにしたい

[GUIサンプル](https://github.com/EkispertWebService/GUI)は[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)のAPIをそれぞれコンポーネント化した形の構成で提供しています。

 * [EkispertWebService/GUI](https://github.com/EkispertWebService/GUI)

例えば、[駅名入力パーツ](https://github.com/EkispertWebService/GUI/)(expGuiStation)や[経路表示パーツ](https://github.com/EkispertWebService/GUI/tree/master/expGuiCourse)(expGuiCourse)といった感じで、APIと対応する機能毎にJavaScript/CSSが分けられています。利用者は必要な機能のみを `<script>` で自身のWebアプリケーションに取り込む形になります。

が、この方式のデメリットとして、利用者が[GUIサンプル](https://github.com/EkispertWebService/GUI)を使う際にハマってしまう場合があります。必要なJavaScript/CSSのロード設定を追加し忘れてうまく動作しないといったケースです。意外とこのケースにハマってしまうことが多く、何らかの方法で[GUIサンプル](https://github.com/EkispertWebService/GUI)を手早く使えるようにしたいものです。

## Dockerを使って環境を構築できるようにする

そこでDockerを利用して[GUIサンプル](https://github.com/EkispertWebService/GUI)の環境を手早く構築できるようにしてみました。
まずは手順を見てもらうのが早いかと思います。

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

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

まずは以下の手順でDockerイメージを作ります。「<アクセスキー>」には[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)のアクセスキーを指定してください。
[3日目の記事](https://qiita.com/valsitoh/items/966ead6c0b27fad7b27a)でAmazon [SaaSストア](http://www.amazon.co.jp/saas/)から[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)(のアクセスキー)を購入する方法を紹介しておりますので、そちらも併せてご参照ください。

`./work_dir/hello_ews/setup_ews_gui.sh` 内で[GUIサンプル](https://github.com/EkispertWebService/GUI)をgit cloneし、必要な場所にアクセスキーを設定しています。

```sh 
$ git clone https://github.com/ValLaboratory/advcal.git
$ cd advcal/2018/docker_env/
$
$ # GUIサンプルのgit cloneとアクセスキーの設定をおこなう。
$ ./work_dir/hello_ews/setup_ews_gui.sh <アクセスキー>
$
$ # Dockerイメージをビルドする。
$ docker-compose build ews_gui
```

あとはDockerコンテナを起動して準備完了です。

```sh 
$ docker-compose up ews_gui
```

ローカルホストにアクセスすれば、以下のようなGUIサンプルの画面が開きます。

 * [http://localhost:8080/](http://localhost:8080/)

<img width="380" alt="img10.png" src="https://qiita-image-store.s3.amazonaws.com/0/152217/e3561e35-e9ec-32d1-c5db-cf8386a117e6.png">

探索といった基本的な機能が利用できる状態になっています。

<img width="380" alt="img11.png" src="https://qiita-image-store.s3.amazonaws.com/0/152217/e7d3a4b4-3d95-784a-d71a-cd4621c70bc8.png">

HTMLファイルやJavaScriptはローカルホスト側の `work_dir/hello_ews/public_html/` ディレクトリに置かれるようになっているので、必要に応じて修正して利用者側で画面を作りこんだり、HTMLファイルの内容を元に開発中のWebアプリに組み込むといったことも可能です。

また、[GUIサンプル](https://github.com/EkispertWebService/GUI)のリポジトリをgit cloneした状態で環境を構築しているので、こちらも利用者側で必要に応じてGUIサンプルを修正したりできます。
(修正内容で有用なものあれば、ぜひissueをいただければと思います)

## まとめ

[GUIサンプル](https://github.com/EkispertWebService/GUI)の環境をDockerで簡単に構築する方法を紹介しました。GUIの使い方よりも環境構築に関するお問い合わせが多かったりもするので、この記事が[駅すぱあとWebサービス](http://docs.ekispert.com/v1/)利用者の助けになれば良いなと思います。

明日は[駅すぱあと路線図](http://rosenzu.strikingly.com)に関する話をしようと思います。