楽しいGeolocaltion APIの基本的な使い方

Geolocation APIとはなんなのか。

そもそもやり方以前にGeolocationとはなにか。単純に実装だけするとどうも頭に入ってきませんでした。

Geolocation APIはユーザーの位置情報を扱えるAPIですが、そもそもは携帯やらの独自仕様で面倒だったので、今はW3Cが仕様を決めたものが各ブラウザに実装されている。という流れで出来上がったもののようです。

基本はJavaScriptでデータを取得できるようになっていて、FireFox、Chrome、Safariなどの主要ブラウザでサポートされています。このあと出てくる、navigator.geolocationとかはブラウザが持っているオブジェクトの機能です。

スマホが普及するにつれて、geolocation以外にもバイブレーションや加速度センサーなどの情報が取れるAPIが色々ありますね。

今回はgeolocationのお話だけです。

緯度経度がごちゃごちゃになるので、覚えるコツ。

これは僕が物覚えが悪いのか、単純に興味がないからなのか、緯度経度がどっちがどっちかすぐに忘れてしまいます。

なので、雑学程度ですが緯度経度についてほんの少し調べたのでメモ。

ポイントは、地球は丸くない

結果的には下記なんですが、しょっちゅういじるものでもないので、ついつい忘れてしまいます。

緯度 = latitude = Y = -90〜90
経度 = longitude = X = -180〜180

英単語も覚えずらいし、XだかYだか、90度までか180度までかさっぱり忘れちゃいます。で調べてこれは覚えやすいなと思ったのが、地球は丸くないということ。正確には楕円らしいです。回っているうちに横に伸びちゃったイメージですかね。

まあ、正確に楕円形かどうかはここでは議論する必要はないんですが、地球が楕円というイメージがとてもしっくりくる。

ちなみにここでは「イギリスのグリニッジ天文台をベースに、、、」といった学問的なのも省かせていいただきます。

経度をベースに覚えました。

覚えるときに僕自身は経度をベースに覚えました。楕円形の長い方が経度なのでlongitudeをlongで、180度なので半径の”けい”をとって経度(これは完全な雰囲気ですが。。。)といった具合です。

「longな半径は経度」

みたいな感じですw

そこまでイメージできればあとは2次関数のグラフをイメージすればX,Yは簡単に辿りつきますね。

といった具合に少し話がそれてしまいましたが経度緯度の覚えるコツでした。

日本だと意識しないけどマイナスも存在します。

日本国内でシステムを使っているとなかなか意識しませんが、マイナスの経緯緯度があります。マイナスは表記上の話で、下記でも同じ意味です。

経度
東経 ー 西経
プラス ー マイナス

緯度
北緯 ー 南緯
プラス ー マイナス

都庁とその真裏を比べるこんな感じです。

東京都庁
35.689634 139.692101
都庁の真裏
-35.689634 -40.307899

緯度はプラスをマイナスに置き換えて、経度は180をマイナスします。海外の緯度経度を調べる機会はあまりないかもしれませんが、知識としては知っておいてもいいかもしれませんね。

位置情報の取得する

前置きが随分長くなってしまいましたが、ここからが本題です(汗

navigator.geolocationのメソッドを活用します。
前述の通りブラウザに入っているので、何かを事前に呼び込んだりする必要はなく活用することができます。
もちろんこのオブジェクトを使えるブラウザでJavascriptが実行可能なことは前提で。

こんな感じになります

使用できるメソッド

今回は下記のgetCurrentPositionを使いますが、そのほかにも使えるのメソッドがあります。

現在の位置情報を1回だけ取得する

引数 内容
sucess 成功時の実行処理です。
error 失敗時の実行処理です。
options 高精度位置情報を取得するかや、データの最大試行回数、待ち時間などを指定できます。

位置情報を定期的に監視する

引数 内容
sucess 成功時に実行されるコールバック
error 失敗時に実行されるコールバック
options 高精度位置情報を取得するかや、データの最大試行回数、待ち時間などを指定できます。

watchPosition()による位置情報の監視をクリアする

引数 内容
id クリアするwatchPosionのid 

成功時の戻り値

例に則ると、戻り値は下記のようになります。

* *
position.coors.latitude 緯度
position.coors.longitude 経度
position.coors.attitude 高度
position.coors.accuracy 経度・緯度の誤差
position.coors.altitudeAccuracy 高度の誤差
position.coors.heading 方角
position.coors.speed 速度

緯度をコンソールに出力したければ

coorsは座標の意味のcordinateの略ですね。

エラー時の戻り値

大きくわけて2種類あります。

* *
error.code エラーコード(詳細は後述)
error.message メッセージ。デフォルトのメッセージを使うことは推奨されていないようです。

エラーコードの詳細

エラーコード 内容
0:UNKNOWN_ERROR 原因不明のエラー
1:PERMISSION_DENIED Geolocationの利用が許可されていない。具体的には許可を求めるダイアログで拒否する
2:POSITION_UNAVAILABLE 位置情報が取得できなかった。ダイアログで許可したけど、取れなかった場合
3:TIMEOUT 時間がかかりすぎてタイムアウト

エラーのメッセージは独自実装すべきらしいので下記のように実装するのがよいみたいです。

iOSのSafariへの対策

iPhoneのSafari限定ですが、基本的に設定を変更しない限りGeolocationは取得できません。上記のエラーハンドラを作っていれば、エラーメッセージ自体は表示されるので問題はありません。が、多くの場合設定をしてない可能性があるので、場合によってはそれに合わせてメッセージを変更してもいいかもしれません。

SNSでもご購読できます。

コメントを残す

*