公共機関APIの駅データ.jpで乗換駅表示をWordPressで表示してみた

2015年10月28日

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

以前WordPressやマネタイズに詳しい方が「Ferettプラス」がいい、というのを聞いて以来メールマガジンを見ています。毎回面白い話題がたくさんで興味が尽きないのですが、昨日「公共機関や関連サービスが提供するAPI 20選」という記事があり、大変興味深かったのでその中にあった駅データ.jpが提供しているAPIを使ってどんなことができるのか試してみました。
それについて書きます。

記事をざっと見る

公共機関APIの駅データ.jpとは

駅データ.jp

株式会社コードプラスさんが運営されているサイトで、

駅データ．ｊｐとは、日本の鉄道駅の情報（駅データ）を配布するサイトです。

当サイトで提供している駅データは、法人・個人及び、商用・非商用を問わず、どなたでもご利用いただくことができます。

というものです。「公共機関や関連サービスが提供するAPI 20選」で見ていてこちらは商用でも使えるし、利用料が無料(有料バージョンもある)ということで試してみたくなりました(^^)/。

活用事例ページ

にはこちらのデータを使ったアプリやWebサイトがたくさん掲載されていて、役立つデータだなということがわかります。

APIを使って乗換駅表示をするサンプルを見てみる

ということで早速APIを試してみたいと思います。

APIページ

こちらのページにサンプルがありました。乗換駅表示　をクリック

このようにAPIの説明と、サンプル、サンプルコードが記載されたページが開きます。
サンプルの　札幌駅　をクリックすると

札幌駅から乗り換え可能な各路線の駅が表示されます。

新宿駅　をクリックするとさすがに乗り換えが多いですね！

APIを使って乗換駅表示をするサンプルの駅を自分の表示したい駅に変えてみる

ここにあるソースコードをコピーして、HTMLに保存し、ローカルのPCでみると

こんな感じに表示され、クリックするとちゃんと動作していることが分かりました。

自分で使うなら、と思って　八王子駅　を中心とした中央本線の主要駅の乗り換え表示をしてみようと思います。

駅の部分は、

<a href="#" OnClick="StationGroup(1110315)">札幌駅</a>

こんな感じにコーディングされています。StationaGroupという駅固有のコードがあるようです。これを調べるには、

データ　をクリック

東京都　をクリック

このように表示されるので

路線と駅　を選択します。そうすると八王子駅が表示されて矢印の部分に　station_g_cd というコードが表示されています。これが　StationaGroup　です。表示したい駅分のコードを調べてHTMLを書き換えてみました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乗換駅表示</title>

<script type="text/javascript"><!--
var xml = {};

function StationGroup(code){
if (code==0){
document.getElementById("s_group").innerHTML = "";
} else {
var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
s.type = "text/javascript";
s.charset = "utf-8";
s.src = "http://www.ekidata.jp/api/g/" + code + ".json";    //駅グループJSONデータURL

var str = "";
xml.onload = function(data){
var station_g = data["station_g"];
if(station_g != null){
for( i=0; i<station_g.length; i++){
str = str + station_g[i].line_name + " ";
str = str + station_g[i].station_name + "<br />";
}
}
document.getElementById("s_group").innerHTML = str;
}
}
}

// --></script>
</head>
<body>
乗換駅表示<br>
<a href="#" OnClick="StationGroup(1130620)">八王子駅</a> | 
<a href="#" OnClick="StationGroup(1130325)">立川駅</a> | 
<a href="#" OnClick="StationGroup(1131105)">三鷹駅</a> | 
<a href="#" OnClick="StationGroup(1130208)">新宿駅</a> | 
<a href="#" OnClick="StationGroup(1130101)">東京駅</a> | 
<a href="#" OnClick="StationGroup(0)">クリア</a><br />
<div id="s_group"></div>
</body>
</html>

こんな感じです。これを表示すると、

こんな感じに指定した駅が表示されて、

クリックしたときもちゃんと動いているようでした。

HTMLで表示できた中央本線の主要駅の乗り換え表示をWordPressで表示してみる

この表示をWordPressでもやってみたいと思います。子テーマを使っていることを前提として書きます。

WordPressではjs部分をファイルに分けて利用したいと思いますのでjs部分

var xml = {};

function StationGroup(code){
if (code==0){
document.getElementById("s_group").innerHTML = "";
} else {
var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
s.type = "text/javascript";
s.charset = "utf-8";
s.src = "http://www.ekidata.jp/api/g/" + code + ".json";    //駅グループJSONデータURL

var str = "";
xml.onload = function(data){
var station_g = data["station_g"];
if(station_g != null){
for( i=0; i<station_g.length; i++){
str = str + station_g[i].line_name + " ";
str = str + station_g[i].station_name + "<br />";
}
}
document.getElementById("s_group").innerHTML = str;
}
}
}

だけを ekijp.js という名前(名前はなんでもいいんですが)にして、使っている子テーマのjsフォルダ(ないばあいはフォルダを作ります)に保存します。

次に利用している子テーマの　functions.php　に

function my_scripts() {
    wp_enqueue_script( 'ekijp_js', get_bloginfo( 'stylesheet_directory') . '/js/ekijp.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

という記述を追加します。ここでは先ほど作った jsフォルダにあるekijp.js を wp_enqueue_scriptsというアクションフックで読みむためのコーディングです。

これで準備はできましたので、投稿ページなどで