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

#はじめに
[trackrr.io-sdk-js](https://github.com/trackrr-io/trackrr.io-sdk-js)はブラウザまたはサーバーのNode.jsアプリケーション内の両方で利用可能です。
今回はブラウザから利用してみます。

[Trackrr.io](https://trackrr.io)への位置情報送信するためには
アクセスキー、シークレットキーが必要になります。
取得していない場合は[Trackrr.ioの利用方法](https://trackrr.io/start.html)を参照してください。
#コード
```html: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を読み込みます。

```html
    <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も必要になりますので合わせて読み込みます。

送信部分は

```js
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](https://qiita-image-store.s3.amazonaws.com/0/132516/f8dabed5-841b-0214-5731-8d4ffbad8701.png)

Trackrr.ioのコンソール画面を見てみると表示されています。
![image](https://qiita-image-store.s3.amazonaws.com/0/132516/b64d5792-89e9-bf13-f586-52494114065e.png)


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

サンプルは
https://s3-ap-northeast-1.amazonaws.com/qiita-sample/trackrr-example.html
に公開しています。