最初に
ネイティブアプリを作らなくても、JavaScript＋ブラウザで位置情報を取得することができます。
とはいえ、実際に使おうとすると「できる／できない」や、いくつか注意点がありますので、今回はそれについてまとめます。
取得できそうなデータ
MDNには下記のデータを取得する方法があると書かれています。
物凄くざっくり書くと下記の項目を取得する方法があります。
- latitude → 緯度
- longitude → 経度
- altitude → 高度
- accuracy → 緯度経度の精度
- altitudeAccuracy → 高度の精度
- heading → 方向
- speed → 移動速度
実際に取得できるデータ
基本的には端末の情報を読み取っているので、ブラウザごとの際は少ないのですが、MacのChromeを使った場合のみ、altitudeで「0」を取得してしまうという挙動になります。
heading や speedは、手元にあるブラウザの範囲では取得できなさそうです。
iPhoneの場合
| Safari | Chrome | Firefox | |
|---|---|---|---|
| latitude | ◯取得できる | ◯取得できる | ◯取得できる |
| longitude | ◯取得できる | ◯取得できる | ◯取得できる |
| altitude | ◯取得できる | ◯取得できる | ◯取得できる |
| accuracy | ◯取得できる | ◯取得できる | ◯取得できる |
| altitudeAccuracy | ◯取得できる | ◯取得できる | ◯取得できる |
| heading | ✕取得できない | ✕取得できない | ✕取得できない |
| speed | ✕取得できない | ✕取得できない | ✕取得できない |
Macの場合
| Safari | Chrome | Firefox | |
|---|---|---|---|
| latitude | ◯取得できる | ◯取得できる | ◯取得できる |
| longitude | ◯取得できる | ◯取得できる | ◯取得できる |
| altitude | ✕取得できない | 常に「0」を取得 | ✕取得できない |
| accuracy | ◯取得できる | ◯取得できる | ◯取得できる |
| altitudeAccuracy | ✕取得できない | ✕取得できない | ✕取得できない |
| heading | ✕取得できない | ✕取得できない | ✕取得できない |
| speed | ✕取得できない | ✕取得できない | ✕取得できない |
デメリット
JavaScriptとブラウザで位置情報を取得するのはお手軽ですが、下記のようなデメリットも存在します。
-
headingやspeedが取得できない - 取得開始の際、ブラウザ側で位置情報の許可の確認が走る
- ブラウザをアクティブにしていないと取得できない
特に3の「ブラウザをアクティブにしていないと取得できない」は重要で、とある仕事で車両の位置をこのJavaScriptとブラウザで取得するということをやった際、車両に乗車されている方が端末を触ってしまい、位置情報が途切れるというトラブルがありました。（これは社内に端末を設置する位置や手法で解消できそうな気もします。）
最後に
JavaScriptとブラウザで位置情報を取得する方法は、素早く構築でき、iPhoneで電波が安定している箇所については移動体でも数メートルの精度で取得できるという優れた面があります。
使い方によっては実用に耐える機能でもありますので、ご興味ある方はぜひ一度お試しください。