ZAPAnet総合情報局 > ZAPAブログ2.0 > ロケタッチ鉄道情報APIをJSONPで処理するサンプルプログラム

ロケタッチ鉄道情報APIをJSONPで処理するサンプルプログラム

2012年07月05日 プログラミングTIPS
本日16時24分、「livedoor Techブログ : 鉄道情報APIをロケタッチでリリースしましたのお知らせ」というエントリがアップされました。

鉄道情報 APIとは、日本国内の鉄道路線や鉄道駅を検索する事が出来るAPIです。詳しいAPIの仕様については、「提供API一覧 | ロケタッチ Developers」に掲載されています。

路線の駅一覧データに関しては、JSONデータのみでなく、JSONPデータでも取得できます。JSONPとは、「JSON with Padding」の略で、詳しくは下記ページをご覧下さい（Googleでは「json-in-script」などとも呼ばれています）。
JSONPでデータを取得できるということは、PHPやPerlなどのサーバーサイドのスクリプトを作成しなくても、クライアントサイドのスクリプトだけでもAPIを利用できるということです。


ということで、早速「ロケタッチ鉄道情報APIをJSONPで処理するサンプルプログラム」を作ってみました。

サンプルページは下記になります。

以下、全ソースコード（文字コードはUTF-8）と、簡単な解説です。

全ソースコード

「ロケタッチ鉄道情報APIをJSONPで処理するサンプルプログラム」の全ソースコードです。これをテキストエディタにコピペして、HTMLファイルとして保存してブラウザで開けば、ロケタッチのAPIから情報を取得できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ロケタッチ　鉄道情報API　JSONPサンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
function callbackFunc(data){
  var entries = data.stations || [];
  var html = '<ul>';
  for (var i = 0; i < entries.length; i++) {
    html += '<li>'+entries[i].spot_station_name+'</li>';
  }
  html += '</ul>';
  document.getElementById('stations').innerHTML = html;
}
-->
</script>
<h1>ロケタッチ　鉄道情報API　JSONPサンプル</h1>
<p><a href="https://blog.livedoor.jp/techblog/archives/67592034.html">livedoor Techブログ : 鉄道情報APIをロケタッチでリリースしましたのお知らせ</a>を読んで、JSONPによるサンプルプログラムを作ってみました。<br>
今回はサンプルとして、山手線の駅一覧を表示しています。<br>
<a href="https://api.loctouch.com/v1/railway/lines">路線一覧</a>のJSONデータから、line_cdのデータを持って来れば、他の路線の駅一覧も表示できます。</p>
<h2>山手線の駅一覧</h2>
<div id="stations"></div>
<script type="text/javascript"
  src="https://api.loctouch.com/v1/railway/stations?line_cd=11302&callback=callbackFunc">
</script>
<br>powerd by <a href="https://tou.ch/developer/api_all?uri=railway">ロケタッチ Developers</a>
<hr><a href="https://zapanet.info/">ZAPAnet総合情報局</a>,<a href="https://apisample.com/">公開APIを利用したサンプルサイトを作っていくよ</a>
</body>
</html>

簡単な解説

鉄道情報APIからJSONPデータを得るために、以下のスクリプトを読み込んでいます。
<script type="text/javascript"
  src="https://api.loctouch.com/v1/railway/stations?line_cd=11302&callback=callbackFunc">
</script>
line_cdパラメータには路線IDを入力します。今回は「11302」で山手線です。その他の路線については、路線一覧のJSONデータから取得できます。

callbackパラメータには、JSONPデータ読み込み後に実行される関数名を指定します。今回は適当に、「callbackFunc」としました。

これで、ロケタッチ鉄道情報APIからJSONデータを読み込み、javascript関数が実行されるまでの準備が整いました。

続いて、「callbackFunc」関数を作成します。
function callbackFunc(data){
  var entries = data.stations || [];
  var html = '<ul>';
  for (var i = 0; i < entries.length; i++) {
    html += '<li>'+entries[i].spot_station_name+'</li>';
  }
  html += '</ul>';
  document.getElementById('stations').innerHTML = html;
}
JSONデータを引数「data」で受け取り、stations要素の情報を繰り返し処理しています。今回は、「spot_station_name」から駅名を取得して表示しています。

これで完成です。以下のページにアクセスすると、山手線一覧の駅名が表示されていると思います。


他のAPIと組み合わせてプログラムを作りたいとか、もっと公開APIやJSONPのことを知りたいとかであれば、ぜひZAPA著「公開API活用ガイド」をご覧下さい。

←一つ前の記事へ