ヴァル研究所 Advent Calendar 2018 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インターフェースサンプルをコピーする

サンプルコード公開ページから全ソースコードをダウンロードした後、下記のディレクトリ内のファイルをコピーします。

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