Geolocation APIを勉強してみた

位置情報を使ったWebサービスが増えていますが、Geolocation APIを使うと手軽に位置情報を取得することができます。というわけで今回はGeolocation APIの使い方を勉強がてら記事にしたいと思います！

Geolocation APIとは

公式ドキュメント

Geolocation API Specification 2nd Edition

www.w3.org

いきなり英文のドキュメントはハードルが高いので、日本語の記事で分かりやすかったものを参考にしてみました。

Geolocation API

Geolocation API により、ユーザーは希望すれば自身の場所をウェブアプリケーションに通知することができるようになります。なお、プライバシー保護の観点から、ユーザーは位置情報が送信される際には確認を求められます。

developer.mozilla.org

JavaScriptで位置情報を取得する方法(Geolocation API)

スマートフォンなどでユーザーの現在地を取得する方法を、JavaScriptをサンプルに解説。

syncer.jp

Geolocation API－HTML5のAPI、および、関連仕様

HTML5、JavaScriptで位置情報を取得

www.htmq.com

これらの記事によると

geolocation API により、ユーザーは希望すれば自身の場所を web アプリケーションに通知することができるようになります。なお、プライバシー保護の観点から、ユーザーは位置情報が送信される際には確認を求められます。

とあります。位置情報をwebアプリケーションに通知することができ、プライバシーに配慮するためユーザーの許可がなければ使えないという仕組みです。ちなみに今まで各キャリアごとに位置情報を取得するための仕組みを開発する必要があったそうで、便利な世の中になりましたね。

簡単なデモを通じて、説明していきたいと思います。

デモ

Geolocation APIとGeolocationオブジェクト

geolocation API は navigator.geolocation オブジェクトを通じて提供されます。今回のデモでは、

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

というようにして現在地を取得するための準備をしています。ちなみにメソッドは3つ用意されており、

• getCurrentPosition()・・・現在地を取得するために使います。
• watchPosition()・・・デバイスの位置が変化するたびに位置情報を更新するために使います。
• clearWatch()・・・位置情報を継続して監視することを解除するために使われます。

があります。

それぞれの数値取得

各位置情報の取得は以下のようにして取得できます。

•   緯度・・・position.coords.latitude
•   経度・・・position.coords.longitude
•   高度・・・position.coords.altitude
•   緯度・経度の誤差・・・position.coords.accuracy
•   高度の誤差・・・position.coords.altitudeAccuracy
•   方角・・・position.coords.heading
•   速度・・・position.coords.speed

エラーコード

エラーコードはcode属性を用いることで取得ができます。エラーコードは以下の3つが返ります。

• エラーコード１・・・位置情報の利用が許可されていない（ユーザーが位置情報の利用を許可しなかった場合など）
• エラーコード２・・・デバイスの位置が判定できない（プロバイダが内部エラーとなっている場合など）
• エラーコード３・・・タイムアウト（timeout属性で指定された時間内にPositionオブジェクトを取得できなかった場合など

ちなみにエラーメッセージもmessage属性で取得できますが、ユーザーインタフェースではなくあくまでデバッグ用という位置づけのため、メッセージは自分で作成するのが一般的です。

最後に

すごくあっさりした内容でまとめましたが、必要に応じてもっと深く学んでいこうと思います。位置情報を使ったアプリケーションを作ってみたいので、色々やってみます！