Edited at

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

ヴァル研究所 Advent Calendar 2018 19日目の記事です。

駅すぱあとWebサービスはJSONXMLでの通信が前提で、画面は提供されていません。

そのため、アプリケーションに組み込んで使うのには便利なのですが、単純に「経路探索したい」と思っても環境構築がけっこう大変だったりします。

しかも、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