【ITニュース解説】geolocation 이용한 위치정보

Webサイトやアプリケーションでユーザーの位置情報を活用することは、今や多くのサービスで当たり前になっている。例えば、近くの店舗を検索したり、天気予報を表示したり、配達サービスで現在地を指定したりと、私たちの日常生活を便利にする様々な場面で使われている。このような位置情報の取得と利用をWebブラウザ上で実現するための技術が、Geolocation APIというものだ。

この技術の核となるのが、JavaScriptが提供する navigator.geolocation というオブジェクトである。これはブラウザがユーザーの位置情報を取得する機能を持っているかどうかを判定し、もし持っていればその機能を使って位置情報を取得するための窓口となる。記事の冒頭にある if (navigator.geolocation) というコードは、まさに「もしブラウザが位置情報取得に対応していたら」という条件分岐を示している。

位置情報を実際に取得する方法にはいくつかあるが、記事で主に使われているのは navigator.geolocation.getCurrentPosition というメソッドだ。これはその名の通り、「現在の位置」を「単発的に」取得するためのものだ。一度位置情報を取得したら、それっきりで終了する。もし、移動に合わせて常に最新の位置情報を追跡したい場合は、watchPosition という別のメソッドを使用するが、これは記事中ではコメントアウトされており、今回は単発取得が中心となっている。

getCurrentPosition メソッドを呼び出すと、ブラウザはユーザーに「このWebサイトがあなたの位置情報にアクセスすることを許可しますか？」という確認のダイアログを表示する。ユーザーが許可しない限り、位置情報は取得できない。これはユーザーのプライバシー保護のために非常に重要な仕組みであり、Webサービス開発者は必ず理解しておく必要がある。ユーザーが許可すると、getCurrentPosition メソッドに渡された関数（コールバック関数と呼ばれる）が実行され、その関数には position という情報が含まれたオブジェクトが渡される。

position オブジェクトの中には、様々な位置情報が含まれているが、特に重要なのが position.coords.latitude（緯度）と position.coords.longitude（経度）である。緯度は地球上の南北方向の位置を示し、経度は東西方向の位置を示す。この二つの座標を組み合わせることで、地球上のあらゆる場所を一意に特定できる。記事では、取得したこれらの緯度と経度を変数 latitude と longitude にそれぞれ格納している。

さて、位置情報を取得したら、次にその情報をどう活用するかだ。記事では主に二つの方法が示されている。一つは、取得した位置情報をサーバーに送信して何らかの処理を行わせる方法、もう一つは、位置情報を使って別のページへリダイレクト（遷移）させる方法だ。

まず、サーバーに位置情報を送信する方法について見ていこう。Webブラウザとサーバーが通信を行う最も基本的な方法の一つが、XMLHttpRequest (XHR) オブジェクトを使うことだ。これはJavaScriptからHTTPリクエストを送信するための仕組みで、ページ全体を再読み込みすることなく、サーバーとデータのやり取りができる「非同期通信」を実現する。

データをサーバーに送信する際には、どのようなデータを送るかを定義する必要がある。記事では FormData というオブジェクトが使われている。これは、Webページのフォームから入力されたデータのように、キーと値のペアでデータを整理し、サーバーに送信するのに便利な形式だ。formData.append('latitude', latitude) のように、緯度と経度をそれぞれ latitude と longitude という名前でフォームデータに追加している。

次に、xhr.open('POST', ...) の部分で、どのURLに対して、どのような方法（HTTPメソッド）でデータを送信するかを設定する。POST は、データをサーバーに「送信」する際によく使われるHTTPメソッドだ。送信先URLは、記事中ではPHPの変数によって動的に生成される部分があり、例えば /gps__search__ok.php のようなサーバー側のスクリプトが指定されることを想定している。そして、xhr.send(formData) で実際にサーバーへデータが送信される。

サーバーからの応答を受け取るための準備も必要だ。xhr.onreadystatechange という部分で、サーバーとの通信状況が変化するたびに実行される関数を定義している。通信にはいくつかの段階（UNSENT、OPENED、HEADERS_RECEIVED、LOADING、DONE）があり、xhr.readyState === xhr.DONE は通信が完了したことを意味する。通信が完了したら、次に xhr.status というHTTPステータスコードを確認する。200 や 201 は「成功」を意味するコードであり、これらのコードが返ってきたら、サーバーからの応答 (xhr.responseText) をWebページの一部 (#apparea というIDを持つ要素）に追加して表示するという処理が行われる。もし成功しなかった場合は、エラーメッセージを表示するといったエラーハンドリングも行われる。

もう一つの位置情報の活用方法は、location.href を使ったページのリダイレクトだ。これは、Webブラウザのアドレスバーに表示されるURLを強制的に変更し、別のページにユーザーを移動させる方法である。記事中では、PHPの変数 $set_app_after_url を使って、リダイレクト先のURLを動的に生成している。このとき、取得した緯度 (latitude) と経度 (longitude) をURLの一部として付与している点に注目してほしい。?latitude=...&longitude=... のように、URLの後ろに ? から始まる情報を付ける形式を「クエリパラメータ」と呼ぶ。これにより、リダイレクト先のページでこれらの緯度と経度の情報を受け取って、その情報に基づいたコンテンツを表示できる。例えば、緯度と経度をもとに地図の中心を移動させたり、その場所の関連情報を表示したりといったことが可能になる。

位置情報取得の際には、オプションを設定することもできる。記事のコードの最後にある { enableHighAccuracy: false, maximumAge: 0, timeout: Infinity } という部分がそれだ。enableHighAccuracy は、より高精度な位置情報を取得しようと試みるかどうかの設定で、true にするとGPSなどの高精度な情報源を優先するが、消費電力が増えたり、取得に時間がかかったりする可能性がある。false なら Wi-Fi や IPアドレスからの情報など、より高速だが精度が劣る情報源も利用する。maximumAge は、以前に取得した位置情報のキャッシュをどれくらいの期間再利用するかを設定するもので、0 に設定すると常に最新の位置情報を取得しようとする。timeout は、位置情報取得の処理が完了するまでの最大時間をミリ秒単位で指定するもので、Infinity はタイムアウトしないことを意味する。

万が一、ユーザーが位置情報の取得を許可しなかったり、使用しているシステムが位置情報機能に対応していなかったりする場合も考慮する必要がある。記事では、ユーザーが拒否した場合に alert("내 위치 확인을 허용 후 이용해주세요."); （「私の位置確認を許可後、ご利用ください。」）と表示したり、システムが非対応の場合に alert("위치 정보를 지원하지 않는 시스템입니다."); （「位置情報をサポートしていません。」）と表示したりすることで、ユーザーに状況を伝えている。このように、予期せぬ事態に備えて適切なエラーハンドリングを行うことは、ユーザー体験を向上させる上で非常に重要だ。

まとめると、このコードはWebブラウザのGeolocation APIを使ってユーザーの現在地（緯度と経度）を安全に取得し、その情報をHTTP通信（XHR）でサーバーに送信したり、またはURLのクエリパラメータとして埋め込み別のページにリダイレクトしたりする、Webアプリケーションの基本的な機能を実装している。システムの性能を考慮した非同期通信や、ユーザーのプライバシーに配慮した許可プロセス、そして様々な状況に対応するエラーハンドリングが盛り込まれており、現代のWeb開発における重要な要素が凝縮された事例と言える。