SSL接続なしでHTML5ジオロケーションを実装する方法

SSL接続なしのHTML5ジオロケーションとは

HTML5のGeolocation APIは、ユーザーの現在地（緯度・経度）を取得するための便利な機能です。ただし、近年のブラウザではセキュリティ上の理由から、Geolocation APIはHTTPS（SSL接続）環境でのみ動作するように制限されています。

そこで、SSL接続を持たないサイトでも位置情報を取得できるように、Google Maps Geolocation APIを利用したフォールバック実装が活用されます。以下にその実装例を示します。

Google Maps Geolocation APIによる位置情報の取得

次のコードは、変数 apigeo を使って位置情報の取得に成功した場合の処理を定義したものです。取得できた緯度・経度をアラートで表示します。

// 変数 apigeo は位置情報の取得成功時の処理を表す
var apigeo = function(position) {
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};
var tryapigeo = function() {
    jQuery.post("Googleマップで位置情報をチェックするURL", function(success) {
        apigeo({coords: {latitude: success.location.lat, longitude: success.location.lng}});
    }) // 指定されたジオロケーションに対して成功レスポンスを返す
    .failure(function(err) { // 失敗した場合はエラー内容をアラートで表示
        alert("error while showing geolocation! \n\n" + err);
    });
};

このコードでは、jQueryの post() メソッドを使ってサーバー側からGoogle Maps Geolocation APIを呼び出します。これにより、ブラウザ側の制限（非SSL環境でのGeolocation APIブロック）を回避できます。

ブラウザのGeolocation APIとエラーハンドリング

次に、標準の navigator.geolocation を使った実装例です。取得の成否に応じて複数のケース（switch文）を用意し、エラーコードごとに異なるメッセージを表示すると、より丁寧なユーザー体験を提供できます。

var tryloc = function() {// tryloc 変数で現在位置を取得
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        browserGeolocationSuccess, browserGeolocationFail, {
        maximumAge: 70000, timeout: 40000, enableHighAccuracy: true});
    // 高精度で結果を表示する設定
}};

主なオプションの解説

• maximumAge: キャッシュされた位置情報を再利用できる最大時間（ミリ秒）。この例では70秒間有効です。
• timeout: 位置情報の取得にかけてよい最大時間（ミリ秒）。この例では40秒でタイムアウトします。
• enableHighAccuracy: trueに設定するとGPSなど精度の高い位置情報の取得を試みます。

このように、SSL非対応の環境ではGoogle Maps Geolocation APIへのサーバー経由のリクエストを組み合わせることで、HTML5ジオロケーションと同等の位置情報機能を実現できます。エラーハンドリングも適切に実装すれば、さまざまな状況下でも安定して動作するアプリケーションを構築できます。