まずは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を呼び出してみることにした。それが以下のコードである。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
とりあえず呼び出すことはできたので、次はこのデータをベースに静的HTML化することにする。下のサンプルも参考にしよう。
次はd3.jsで何か可視化できる成果物がお見せできればいいのだが、そこまでいけるかどうか。。。