訂正
monaca localkitを使用していますが、使用しなくてもApacheがあればできました。
（色々な理由で、XAMPPが入っていたので検証しました。）
XAMPP ＋ Chromeのデベロッパーモードがあればモバイル向け画面開発もできました。
localhostでの接続だと、オリジン間リソース共有 (CORS) の関係ではねられるためできていません。
誰か教えてください
前書き
忘れないための覚書（なので他環境での動作確認はわかりませんし、正攻法なのかもわかりません）
リアルタイムGTFSをマッピングしたくてGoogleのチュートリアルを見ても、Node.jsの知識もなく、プログラミング初心者で当たり前っぽいことも理解できていなく、四苦八苦した話。
リアルタイムGTFSについては、https://developers.google.com/transit/gtfs-realtime/
あと実行環境
アプリケーションはMONACA（Monaca Localkit)で検証
準備
1.Node.jsのインストール（npmも） ※ダウンロードしていなくてもできできるかも？
→ require(）を使うため
2.Monaca Localkitのインストール
環境の構築
本体のコンソール（MONACA LocalKitのコンソールではないです）で、プロジェクトフォルダにマウントして
1.「protobufjs」インストール
$ npm install protobufjs
2.「gtfs-realtime-bindings」インストール
$ npm install gtfs-realtime-bindings
3.「request」インストール
$ npm install request
GTFSを読み込むJavascriptファイルの作成
今回は宇野バスのGTFSリアルタイムデータを利用（http://www3.unobus.co.jp/opendata/）
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
var request = require('request');
var requestSettings = {
method: 'GET',
url: 'http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin',//宇野バス
encoding: null
};
request(requestSettings, function (error, response, body) {
console.log("read to data");
//正しくデータを読み込めたら
if (!error && response.statusCode == 200) {
//GTFSのデータ構造については、https://developers.google.com/transit/gtfs-realtime/reference#VehicleDescriptorを参照
var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
feed.entity.forEach(function(entity) {
if (entity.vehicle) {
//コンソールにデータを表示
console.log(entity.vehicle.vehicle.id);
console.log(entity.vehicle.position);
}
});
}
});
コンソールで、
$ browserify www/js/sample.js -o www/js/app.js
何か足りないと言われれば、npm install ... でなんとかなる？（力技で理解してないです）
あとは、HTMLファイルで「app.js」を読み込めば、MONACA LoclKitのコンソールに緯度経度の情報が表示される。
GoogleMapsJavaScriptAPIで地図上に表示する
HTMLファイルに追記
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUER-API-KEY]" type="text/javascript" charset="UTF-8"></script>
...
</head>
<body>
<!-- 地図の描画領域 -->
<div id="map_canvas"></div>
<!-- rialtimeGTFSデータを読むJavaScriptファイル -->
<script src="js/app.js"></script>
</body>
JavaScriptファイルに追記
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
var request = require('request');
var feed;
var latlng;
var i = 0;
var marker;
var markers = [];
//map描画
var mapOptions = {
center: new google.maps.LatLng(34.666608, 133.918170), //地図上で表示させる緯度経度
zoom: 14, //地図の倍率
mapTypeId: google.maps.MapTypeId.ROADMAP //地図の種類
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var view = function() {
// 前のマーカーを削除
if (markers == void(0)) {} else {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; //参照を開放
}
//realGTFS取得
var requestSettings = {
method: 'GET',
url: 'http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin', //宇野バス
encoding: null
};
request(requestSettings, function(error, response, body) {
if (!error && response.statusCode == 200) {
feed = GtfsRealtimeBindings.FeedMessage.decode(body);
feed.entity.forEach(function(entity) {
if (entity.vehicle) {
console.log(entity.vehicle.vehicle.id);
console.log(entity.vehicle.vehicle.license_plate);
console.log(entity.vehicle.position);
latlng = {
lat: entity.vehicle.position.latitude,
lng: entity.vehicle.position.longitude
};
marker = new google.maps.Marker({
position: latlng,
title: "車両No" + entity.vehicle.vehicle.license_plate
});
markers.push(marker);
}
});
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
});
};
view();
setInterval(view, 15000);
言い訳
とりあえず、簡単にまとめたため、わかりづらいところがあるかもしれません。
手当たり次第試したので、足りないことや飛んでること、いらないものがあるかもしれません。
言っていただければ、修正していきます。