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

ヴァル研究所 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

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫

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

最初に

Heroku CLIのインストール

Gitのインストール

コード部分

任意のディレクトリにindex.phpを作る

index.htmlを作る

HTML5インターフェースサンプルをコピーする

GitとHerokuの操作

初期化

公開

まとめ

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-04-30 23:37:32 RSSフィード2021-04-30 23:00 分まとめ(42件)

投稿時間:2023-02-05 02:09:04 RSSフィード2023-02-05 02:00 分まとめ(9件)