ヴァル研究所 Advent Calendar 2018 4日目の記事です。
今日は駅すぱあとWebサービスのGUIサンプルをDockerで手早く構築する方法を紹介しようと思います。

GUIサンプル

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

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

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

GUIサンプルは駅すぱあとWebサービスのAPIをそれぞれコンポーネント化した形の構成で提供しています。

EkispertWebService/GUI

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

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

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

そこでDockerを利用してGUIサンプルの環境を手早く構築できるようにしてみました。
まずは手順を見てもらうのが早いかと思います。

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

ValLaboratory/advcal

まずは以下の手順でDockerイメージを作ります。「<アクセスキー>」には駅すぱあとWebサービスのアクセスキーを指定してください。
3日目の記事でAmazon SaaSストアから駅すぱあとWebサービス(のアクセスキー)を購入する方法を紹介しておりますので、そちらも併せてご参照ください。

./work_dir/hello_ews/setup_ews_gui.sh 内でGUIサンプルをgit cloneし、必要な場所にアクセスキーを設定しています。

$ 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コンテナを起動して準備完了です。

$ docker-compose up ews_gui

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

http://localhost:8080/

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

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

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

まとめ

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

明日は駅すぱあと路線図に関する話をしようと思います。