ヴァル研究所 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にするために用意します。
<?php
header('Location: /index.html');
?>
index.htmlを作る
index.phpと同じ場所へindex.htmlを作成します。
なお、保存する際の文字コードはUTF-8で行ってください。
また、keycodeに駅すぱあとのアクセスキーをセットする必要があります。
<!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