東京メトロ オープンデータAPIをいじる (1) - まずはAPIを呼び出してみる。

公開:2014-09-27 17:04
更新:2020-02-15 04:37
カテゴリ:nginx,node.js,東京メトロオープンデータ,javascript,html5,d3.js

まずは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で何か可視化できる成果物がお見せできればいいのだが、そこまでいけるかどうか。。。