東京メトロ オープンデータ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を呼び出してみることにした。それが以下のコードである。

sfpgmr/metrop

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

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

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