はじめに
trackrr.io-sdk-jsはブラウザまたはサーバーのNode.jsアプリケーション内の両方で利用可能です。
今回はブラウザから利用してみます。
Trackrr.ioへの位置情報送信するためには
アクセスキー、シークレットキーが必要になります。
取得していない場合はTrackrr.ioの利用方法を参照してください。
コード
trackrr-example.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trackrr.io | IoT/GPSトラッキングプラットフォーム</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/aws-iot-sdk-browser-bundle.js"></script>
<script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/trackrr.io-sdk-js-bundle.js"></script>
<style>
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
</style>
</head>
<body class="service-site">
<script>
angular.module("app",[])
.controller("ctrl", function($scope, $http, $timeout) {
$scope.msg = [];
$scope.go = function() {
var gpsKey = $scope.gpeKey;
var secret = $scope.secret;
var client = new GpsClientManager(gpsKey, secret);
client.on("connect", function() {
var watchId = navigator.geolocation.watchPosition(function(position) {
var gps = {};
gps.coords = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
client.publish(gps);
$timeout(function() {
$scope.msg.push(gps.coords);
});
},
function(err) {
console.log(err)
}, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
});
}
});
</script>
<div class="jumbotron vertical-center">
<div class="container" ng-app="app">
<div class="row" ng-controller="ctrl">
<form name="userForm" class="form-horizontal" ng-submit="go()">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">gpeKey</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="gpeKey" ng-model="gpeKey" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">secret</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="secret" ng-model="secret" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button typef="submit" class="btn btn-success" type="submit" ng-disabled="userForm.$invalid">start
</button>
</div>
</div>
</form>
<div><pre>{{msg|json}}</pre></div>
</div>
</div>
</div>
</body>
</html>
まずSDKを読み込みます。
<script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/aws-iot-sdk-browser-bundle.js"></script>
<script type="text/javascript" src="https://rawgit.com/trackrr-io/trackrr.io-sdk-js/master/browser/trackrr.io-sdk-js-bundle.js"></script>
この部分になります。
今回はサンプルですのでrawgitを使っています。
aws-iot-sdkも必要になりますので合わせて読み込みます。
送信部分は
var gpsKey = $scope.gpeKey;
var secret = $scope.secret;
var client = new GpsClientManager(gpsKey, secret);
client.on("connect", function() {
var watchId = navigator.geolocation.watchPosition(function(position) {
var gps = {};
gps.coords = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
client.publish(gps);
$timeout(function() {
$scope.msg.push(gps.coords);
});
},
function(err) {
console.log(err)
}, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
});
ですね。
サンプルはフォームから入力値をとってくる形にしているのでangularを使っていますが、キーをコードに埋め込めばその必要はありません。
サンプルの実行結果はこんな感じになります。
Trackrr.ioのコンソール画面を見てみると表示されています。
因みにURLがfile URI scheme (file:///～～～) だとGeolocation APIが使えないかもしれません。
ChromeはNGでした。
サンプルは
https://s3-ap-northeast-1.amazonaws.com/qiita-sample/trackrr-example.html
に公開しています。