超基礎的なGeolocation API 入門

こんにちはよつやです。
今日の宮崎市は台風の影響で大雨でした。ただ、波があって、ものすごく振る時と全く振らない時と分かれていたので変な天気でした。

さて、今回はすごく久しぶりにHTMLとJavascriptを用いた「メモ帳プログラミング」を紹介したいと思います。
え?記事のネタが・・・なかったから作ったのですが何か?
普段僕はGoogle Map APIを用いたカーナビアプリを個人的な趣味で作っているのですが、この時に重要なものとして位置情報があります。そりゃ現在地わからないとカーナビの役割を果たさないですからね。
HTMLとJavascriptでは実際に位置情報を取得するAPIがありまして、意外と行数も少ないので今回はこれを紹介しようと思います。

というわけで、今回扱うのは位置情報を取得する「Geolocation API 」というのを紹介していきたいと思います。
これ、「ジオロケーション」と読みます。最初ゲオロケーションと間違って読んでいたのは秘密・・・
さて、まずはどんな感じの挙動を示すか見せましょう。
まずは適当にメモ帳を開きプログラムを書きます。このプログラムについては後で詳しく書きます。
書いたHTMLファイルを実行すると・・・
無題2
こんな感じで位置情報を提供していいか、ブラウザが聞いてきます。
これで許可をすると、このように緯度経度を表示します。
無題3
一応緯度経度の情報はプライバシーに関わるので消していますが、ここに本来なら0.0000と言った感じで「度」で返してきます。
これをGoogleMapと連動させて記述することで、地図上に現在地を示すことが出来るんですね。

さて、ではプログラムの方を見てみましょう。
無題
こんな感じです。
「//現在地の取得」というところから見ていただきたいのですが、まずは「navigator.geolocation.getCurrentPosition()」というメソッドを用意します。
その中に更に「function(position)」というメソッドを記述し中身を書いていきます。
ちなみにこのgetCurrentPositionと言うのは一度だけ現在地を取得します。カーナビの様に現在地を追跡したい場合、つまり現在地をついじゅうしたい場合は「watchPosition」とすることで追従するようになります。
ただ、ここまではもう呪文とでも思ってひたすら無心でかけばいいかと思います。
次に変数 dataに「position.coords」を代入し、以後の記述を楽にします。
例えば緯度を取得するときは「position.coords.latitude」と入力するところを変わらない部分を変数に代入することで「data.latitude」で実行できるようになります。
ちなみにこのdataと言うのは適当なものでOKです。例えば「umi」とか「LoveLive」としても何ら問題ありません。
最後に経度を取得するならlatitude、緯度を取得するならlongitudeとすると「度」として現在地を取得することが出来ます。

ちなみにこのGeolocation APIには他にも機能があり、先ほどのlatitudeなどの部分を変えることで取得する値が変わります。
一応表にまとめるとこんな感じ。
無題4
もちろん、これ以外にもあります。
他にもいろいろ試してみたいなと思うのですが、まだ試してはいないので読者の皆様も試してみてはいかがでしょうか?

というわけで本日のメモ帳プログラミングは以上になります。
前回の簡単な内容からいきなりマニアックな内容になったのでアレですが、遊んでみてくださいね。

いかがでしたか?
ではまたお会いしましょう!
今日もいい日でありますように!
スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

よつや

Author:よつや
こんにちはよつやです。
主にPC関係の記事を書いていきます。
コメントやメッセージ大歓迎です。
相互リンクなども遠慮なくお申し付けください!

アクセスランキング
[ジャンルランキング]
コンピュータ
523位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
94位
アクセスランキングを見る>>
twitter
カテゴリ
最新記事
RSSリンクの表示
最新コメント
最新トラックバック
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

リンク
検索フォーム
RSSリンクの表示
QRコード
QR