駅すぱあとWebサービスをHeroku上で使えるようにしてみる

[ヴァル研究所 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/val) 19日目の記事です。

駅すぱあとWebサービスは**JSON**や**XML**での通信が前提で、画面は提供されていません。
そのため、アプリケーションに組み込んで使うのには便利なのですが、単純に「**経路探索したい**」と思っても環境構築がけっこう大変だったりします。

しかも、Webサーバーが必要なので、サーバーを用意したりレンタルサーバーを利用したり、何かとコストが掛かってしまいます。

そこで、無料でサーバーが運用できるHerokuを利用して経路探索機能を用意してみましょう。

# 最初に

Herokuへの登録、および、パソコンに下記がインストールされている必要があります。

## Heroku CLIのインストール  
下記のコマンドでバージョンが表示されるかを確認してください
`heroku -v`
バージョンが表示されない場合は下記からインストールを行ってください
https://devcenter.heroku.com/articles/heroku-cli#download-and-install

## Gitのインストール
※通常、Heroku CLIを入れることでインストールされますが、正しく入っているかを確認します
`git --version`
バージョンが表示されない場合は下記からインストールを行ってください
https://git-scm.com/downloads

# コード部分

## 任意のディレクトリにindex.phpを作る
このファイルはルートのドキュメントをindex.htmlにするために用意します。

```index.php
<?php
header('Location: /index.html');
?>
```

## index.htmlを作る
index.phpと同じ場所へ**index.html**を作成します。
なお、保存する際の文字コードは**UTF-8**で行ってください。
また、**keycode**に駅すぱあとのアクセスキーをセットする必要があります。

```index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webサービスサンプル</title>
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiDateTime.css">
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiStation.css">
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCondition.css">
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCourse.css">
<link class="css" rel="stylesheet" type="text/css" href="expSample.css">
<script type="text/javascript" src="expGuiDateTime.js" charset="UTF-8"></script>
<script type="text/javascript" src="expGuiCondition.js" charset="UTF-8"></script>
<script type="text/javascript" src="expGuiStation.js" charset="UTF-8"></script>
<script type="text/javascript" src="expGuiCourse.js" charset="UTF-8"></script>
<script type="text/javascript" src="expSample.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
    var key = "keycode";
    function initStation(){
        stationApp1.setConfigure("ssl",true);
        stationApp2.setConfigure("ssl",true);
    }
    function initResult(){
        resultApp.setConfigure("ssl",true);
    }
// -->
</script>
</head>
<body onLoad="Javascript:init();">
    <!-- 日付入力パーツ -->
    <h3 class="exp_sample_header">出発日</h3>
    <div id="dateTime"></div>
    <!-- 探索条件パーツ -->
    <h3 class="exp_sample_header">探索条件</h3>
    <div id="condition"></div>
    <!-- 駅名入力パーツ -->
    <h3 class="exp_sample_header">地点情報</h3>
    <div class="exp_sample_title">
        出発地
    </div>
    <div id="station1" style="width:100%;"></div>
    <div class="exp_sample_title">
        目的地
    </div>
    <div id="station2" style="width:100%;"></div>
    <br>
    <!-- 探索実行ボタン -->
    <div class="exp_sample_btn_area">
        <input class="exp_sample_btn" type="button" value="探索" onClick="Javascript:search();">
    </div>
    <!-- 経路表示パーツ -->
    <div id="result"></div>
</body>
</html>
```

## HTML5インターフェースサンプルをコピーする
[サンプルコード公開ページ](https://github.com/EkispertWebService/GUI/)から全ソースコードをダウンロードした後、下記のディレクトリ内のファイルをコピーします。

* expGuiCondition
* expGuiCourse
* expGuiDateTime
* expGuiStation
* sample

ちなみに、正しくコピーできている場合は下記の構成になっています。

プロジェクトディレクトリ
├expCss（ディレクトリ・各HTML5インターフェースサンプルのCSSファイル群）
├expImages（ディレクトリ・各HTML5インターフェースサンプルの画像ファイル群）
├expGuiCondition.js
├expGuiCourse.js
├expGuiDateTime.js
├expGuiStation.js
├expSample.css
├expSample.js
├index.html
└index.php

# GitとHerokuの操作

## 初期化

プロジェクトディレクトリ内で下記のコマンドを実行します。
※プロジェクト名には任意の英数字を指定してください。

`git init`
`git add . && git commit -m "init"`
`heroku create プロジェクト名`

あとは、下記のコマンドでPushすれば動作確認できます。

## 公開

`git push heroku master`

ちなみに、**https://プロジェクト名.herokuapp.com/**などでアクセス出来るようになっていると思います。

# まとめ

herokuを使えば簡単に駅すぱあとが利用できるようになりました。
あとは様々なサンプルも用意していますので、用途にあった機能を使ってみてはいかがでしょうか。
https://github.com/EkispertWebService/GUI/wiki/html5_sample