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

この記事は約8分で読めます。

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

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

駅データ.jp

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

駅データ.jpとは、日本の鉄道駅の情報(駅データ)を配布するサイトです。

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

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

活用事例ページ

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

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

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

APIページ

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

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

img_56300d9b75e04

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

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

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.jswp_enqueue_scriptsというアクションフックで読みむためのコーディングです。

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

HTMLのbodyの中の部分を記述します。これを見てみると、

あ…(^_^;、改行が効いてしまってるみたいなので、

こんなふうに改行を削除して保存します。

思ったように表示されました(^^)/

クリックするとちゃんと動作していることが分かりました。こんな感じでWordPressで作ったコンテンツでも駅データ.jpのAPIを利用することができますね。

おまけ:API以外のデータも無料で使える!

ダウンロード というページから何か利用できそうなので、


新規登録方はこちら
 をクリックして

メールアドレスとパスワードを入力して登録してみました。このあとメールが来るのでメールにあるリンクから承認したらすぐに使えるようになります。

ログイン
してみると

このようにたくさんのデータをダウンロードして使うことができるようです。

駅データの一番新しいファイルをクリックして保存します。文字コードがUTF-8なので kanjitranslator などでshift-jisに変換してから、Excelで開くと

このように駅のデータが函館駅から



関門海峡めかり駅
(?) まで入っていました。駅データが10813件も入っています。

無料でダウンロードできるこれらのデータを使って、色々楽しいことができそうですね。有料データには

路線マスタの「路線カラー(コード)」の一部
路線マスタの「路線カラー(名称)」の一部
路線マスタの「路線区分」の全部
駅マスタの「駅名称(カナ)」の全部
駅マスタの「駅名称(ローマ字)」の全部
駅マスタの新幹線駅のデータすべて

が入っているようです。有料の場合の料金も

有料データはいくらですか?
4,320円(税込)です。
1回お支払いいただければ、6ヶ月間、何度でも最新版の有料データをダウンロードできます。

と、かなりリーズナブルなので、何か良い活用方法が見つかれば有料でも利用できそうです(^^)/

[amazon_searchlink]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress 全般 インターネット API
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。