Edited at

ブラウザからTrackrr.ioに位置情報を表示してみた

More than 3 years have passed since last update.


はじめに

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を使っていますが、キーをコードに埋め込めばその必要はありません。

サンプルの実行結果はこんな感じになります。

image

Trackrr.ioのコンソール画面を見てみると表示されています。

image

因みにURLがfile URI scheme (file:///~~~) だとGeolocation APIが使えないかもしれません。

ChromeはNGでした。

サンプルは

https://s3-ap-northeast-1.amazonaws.com/qiita-sample/trackrr-example.html

に公開しています。