開発部の対馬です。
既に2例ご紹介させていただいている「FASTIO API」について、
この度新規リリースとなる、「位置情報取得API」をご紹介いたします。
位置情報取得API
位置情報取得APIは、弊社FASTIOのモジュールアプリケーション「交通事故削減ソリューション Pdrive」をご利用のお客様に、
GPS端末が定期的に送信してくる位置情報や、危険運転などが発生した場所の位置情報をリアルタイムにお届けするAPIです。
対応端末
現在では、下記2種類の端末がAPIに対応しています。
・MVT-100NET
・HDL-900
APIでできること
当APIは、HTTPプロトコルを利用しているので、サーバー・クライアントなどから手軽に呼び出すことが可能です。
皆さんがお使いの、普通のデスクトップWindowsマシンでも、ブラウザとテキストエディタ、簡単なJavascriptの知識だけあれば、ちょっとしたアプリケーションが出来てしまいます。
それでは早速、APIを利用したアプリケーション開発を始めてみましょう。
今回作成するアプリケーションでは、月並みですが、Google Maps JavaScript API V3とFASTIO APIのマッシュアップで、GoogleMapの地図上に、端末から取得した位置情報をプロットしてみます。
簡単なスクリプトではありますが、読みやすさを考慮し、jQueryを利用して実装していきます。
しっかりしたアプリケーションを開発する場合は、ソースをデプロイするサーバーにjQueryをダウンロードし、そちらを参照するのが好ましいですが、今回は簡単なデモなので、CDNを参照します。
|
1 2 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> |
まずはアクセストークンの取得を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$.ajax({ type: 'POST', url: 'https://hogepiyo.fastio.jp/oauth2/token', // hogepiyo.fastio.jp は弊社提供のAPI仕様書に正式なURLが記載されています。 data:{ 'username':'FastioUser', 'password':'FastioPassword', 'grant_type':'password', 'scope':'api', 'scope':'client_id', }, dataType: 'json', success: function(json){ access_token = json.access_token; } }); |
取得したトークンを利用し、位置情報の取得を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var term_id = 'TermID'; $.ajax({ type: 'POST', url: 'https://hogepiyo.fastio.jp/pdrive/term/newest', // hogepiyo.fastio.jp は弊社提供のAPI仕様書に正式なURLが記載されています。 data: { 'access_token' : access_token, 'term_id' : term_id, // term_idは、FASTIOの設定画面上に表示される端末ID。 }, dataType: 'json', success: function(json){ newest_position = json.newest; }); |
以下のようなデータが取得できます。
|
1 2 3 4 5 6 7 8 |
{ "newest": [{ "s_time": “2017-04-14 10:20:30”, "latitude": "43.063213", "longitude": "141.358967" }] } |
ここまでで、FASTIO APIを利用して、端末の現在の位置情報を取得することが出来ました。
次は、取得した位置情報を、Googlemapにプロットしてみます。
まずはGoogleMapのイニシャライズ。
このあたりは特に考えることもありません。
下記公式URLのコピペで済ませてしまいます。（見出しと初期表示の中心座標、初期マーカー描画有無、ズームを編集しています）
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> #map {<br /> height: 400px;<br /> width: 100%;<br /> }<br /> </style> <h3>FASTIO API デモ</h3> <div id="map"></div> <script> function initMap() { var start = {lat: 43.063213, lng: 141.358967}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: start }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> |
mapオブジェクトに、取得した位置情報をプロットしてみます。
ツールチップで時刻が確認できるようにしておきます。
|
1 2 3 4 5 6 |
var marker = new google.maps.Marker({ position: {lat: newest_position.latitude, lng: newest_position.longitude}, map: map, title:position.s_time }); |
上記のコードを組み合わせて、定期的に位置情報を取得し、マーカーを増やしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<style> #map {<br /> height: 400px;<br /> width: 100%;<br /> }<br /> </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <h3>FASTIO API デモ</h3> <div id="map"></div> <script> function initMap() { var start = {lat: 43.063213, lng: 141.358967}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: start }); $.ajax({ type: 'POST', url: 'https://hogepiyo.fastio.jp/oauth2/token', // hogepiyo.fastio.jp は弊社提供のAPI仕様書に正式なURLが記載されています。 data:{ 'username':'FastioUser', 'password':'FastioPassword', 'grant_type':'password', 'scope':'api', 'scope':'client_id', }, dataType: 'json', success: function(json){ access_token = json.access_token; var timer = setInterval(function(){plotMarker(access_token)},60000); } }); } function plotMarker(access_token){ var term_id = 'TermID'; $.ajax({ type: 'POST', url: 'https://hogepiyo.fastio.jp/pdrive/term/newest', // hogepiyo.fastio.jp は弊社提供のAPI仕様書に正式なURLが記載されています。 data: { 'access_token' : access_token, 'term_id' : term_id, // term_idは、FASTIOの設定画面上に表示される端末ID。 }, dataType: 'json', success: function(json){ newest_position = json.newest; var marker = new google.maps.Marker({ position: {lat: newest_position.latitude, lng: newest_position.longitude}, map: map, title:newest_position.s_time }); } }); setTimeout(plotMarker); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> |
以上で、毎分APIを実行し、端末のリアルタイムの位置情報を地図上にプロットする機能が完成しました。
このHTMLを保存してブラウザで表示すると、端末が移動するごとに位置情報が追加されることが確認できます。
これと同じような処理をサーバーで行えば、端末IDをキーにした貴社独自の車両マスタで走行データを独自に管理したり、
ビッグデータとして保管しておいて各種分析を行ったり、用途が広がりますね。
アカウントに所属する全端末の位置情報を更新すれば、車両現在位置俯瞰アプリ
この時間帯にしては稼働してる車両が少ないな・・・とか。
アカウントに所属する全端末の位置情報を更新せずすべてプロットすれば、配車経路設計アプリ
西方面大変そうだな。配車強化しようか・・・とか。
もしこのAPIのご利用に興味をお持ちいただければ幸いです。
以上、最後までご覧いただき、ありがとうございました。
（注意）
今回のコードはあくまでAPIの利用例です。異常系の対策などは記述しておりません。
