HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5 Geolocation APIの使い方｜緯度・経度を取得する方法をわかりやすく解説

HTML5のGeolocation APIを使うと、Webサイトと位置情報を共有できるようになります。JavaScriptで現在の緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、周辺店舗の検索や地図上への現在地表示など、位置情報を活用したさまざまな機能を実装できます。

Geolocation APIの基本構造

Geolocation APIは、グローバルなnavigatorオブジェクトに新しく追加された「geolocation」プロパティ（Geolocationオブジェクト）を通じて操作します。このオブジェクトが提供する主なメソッドは以下の3つです。

  • getCurrentPosition()：現在位置を1回だけ取得する
  • watchPosition()：位置の変化を継続的に監視する
  • clearWatch()：watchPosition()による監視を停止する

実装例：現在地の緯度・経度を取得する

次のコードを実行すると、Geolocation APIを使って現在位置の緯度・経度の座標を取得して表示できます。

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("Latitude : " + latitude + " Longitude: " + longitude);
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            } else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
               // タイムアウトは60000ミリ秒（60秒）
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition
               (showLocation, errorHandler, options);
            } else{
               alert("Sorry, browser does not support geolocation!");
            }
         }
      </script>
   </head>
   <body>
      <form>
         <input type="button" onclick="getLocation();" value="Get Location"/>
      </form>
   </body>
</html>

コードのポイント解説

このサンプルコードの処理の流れは次の通りです。

  1. showLocation()：位置情報の取得に成功したときに呼び出されるコールバック関数です。position.coords.latitudeで緯度、position.coords.longitudeで経度を取得できます。
  2. errorHandler()：取得に失敗した場合に呼び出され、エラーコードに応じたメッセージを表示します。
  3. getLocation()：ボタンクリック時に実行される関数です。navigator.geolocationの有無でブラウザ対応状況をチェックし、非対応ならアラートで通知します。

エラーコードの種類

errorHandlerで判定している主なエラーコードは以下の通りです。

  • code 1（PERMISSION_DENIED）：ユーザーが位置情報へのアクセスを拒否した
  • code 2（POSITION_UNAVAILABLE）：何らかの理由で位置情報を取得できなかった
  • code 3（TIMEOUT）：optionsで指定したタイムアウト時間内に位置情報を取得できなかった

利用時の注意点

Geolocation APIはユーザーのプライバシーに関わる情報を扱うため、主要ブラウザではHTTPS環境が必須となっています。また、位置情報を取得する際には必ずユーザーに許可を求めるダイアログが表示され、許可されなければ位置情報を取得できません。取得した位置情報の保存や送信を行う場合は、適切な目的の明示とセキュリティ対策を心がけましょう。

  1. 【HTML5】ドラッグ＆ドロップ（DnD）の実装方法をサンプルコード付きで解説

    ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティ

  2. HTML5のlocalStorage APIを使ってブラウザにデータを保存する方法

    HTML5 localStorageとは HTML5のlocalStorageは、文字列データをブラウザ内に保存し、現在のセッションが終了してもデータを保持し続けることができる仕組みです。localStorageは有効期限なしでデータを保存します。一方、sessionStorageはセッション中のみ有効であり、ブラウザを閉じると保存されたデータは失われます。 localStorageの用途と特徴 ローカルストレージは、複数のウィンドウ間で共有でき、セッションをまたいでもデータが持続するストレージとして設計されています。特に、Webアプリケーションではパフォーマンス向上のために、ユーザーが作成