S.F. Blog:東京メトロオープンデータAPIをいじる（１）

まずはnginxでプロキシしてみる。

まずはwww.sfpgmr.netで動かしているnginxに設定を入れてみることにした。/metro-api/(APIKeyなしのAPIパラメータ)で呼び出すと、東京メトロAPIサーバーに対してnginxがAPIを呼び出し、受け取ったデータをクライアントに返すようにする。その際APIKeyを付加して呼び出すようにする。

serverディレクティブに以下のlocationディレクティブを追加するとうまく呼び出すことはできた。

location /metro-api/ {
     set $args $args&acl:consumerKey=(APIKEY);
     rewrite ^/metro-api/(.*)$ /api/$1 break;
     proxy_pass https://api.tokyometroapp.jp/;
 }

さてどのようなものを作るか

これができることをチェックしたあと、どのようなものを作ろうか考えた。が、いつも通りアイデアが浮かばない。とりあえずは静的HTMLでAPIの列車ロケーション情報をSVGでプロットしてみることにした。nodeで一定間隔でAPIを呼び出し、路線図上に列車位置をマーキングしてそれを静的HTMLを作成するのである。これをcronかなんかで一定間隔で実行すればまあいいかなと。

この仕様だとnginxでわざわざプロキシする意味もなく、nodeからダイレクトにAPIを呼び出せばよいのでそうすることにした。

東京メトロAPIを呼び出してみる

そうは言ってもJSON-LDやSVGもまったくの門外漢だし、nodeでもまともなものは作ったことはないからサクッとは作れない。まずは東京メトロAPIを呼び出してみることにした。それが以下のコードである。


	var fs = require("fs");
	var https = require("https");
	var q = require("q");
	var d3 = require("d3");
	var outputDir = "../html/";
	var apiKey = null;
	var apiUrl = "https://api.tokyometroapp.jp/api/v2/";

	q.nfcall(fs.readFile, "apikey.json")
	.then(function (key)
	{
	apiKey = JSON.parse(key).apiKey;
	var url = apiUrl + "datapoints?rdf:type=odpt:Train&acl:consumerKey=" + apiKey;
	return callMetroAPI(url);
	})
	.then(function (d) {
	// JSONデータの読み込みができた
	console.log(d);
	})
	.catch(function (err) {
	// エラー処理
	console.log("エラーが発生しました。" + err.toString());
	});

	// 東京MetroAPIの呼び出し
	function callMetroAPI(url) {
	var d = q.defer();
	https.get(url, function (res) {
	var body = '';
	res.setEncoding('utf8');

	res.on('data', function (chunk) {
	body += chunk;
	});

	res.on('end', function (res) {
	ret = JSON.parse(body);
	d.resolve(ret);
	});
	}).on('error', function (e) {
	d.reject(e);
	});
	return d.promise;
	}

view raw app.js hosted with ❤ by GitHub

sfpgmr/metrop

とりあえず呼び出すことはできたので、次はこのデータをベースに静的HTML化することにする。下のサンプルも参考にしよう。

東京メトロAPIテスト | GUNMA GIS GEEK

次はd3.jsで何か可視化できる成果物がお見せできればいいのだが、そこまでいけるかどうか。。。