HTML5 基礎教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 Video(ビデオ)HTML5 ドラッグ＆ドロップ

HTML5 地理定位

HTML5 Geolocation（地理定位）は、ユーザーの位置を定位するために使用されます。

ユーザーの位置を定位する

HTML5 Geolocation APIは、ユーザーの地理位置を取得するために使用されます。

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は利用できません。

ブラウザのサポート

Internet Explorer 9+Firefox、Chrome、Safari、OperaはGeolocation（地理定位）をサポートしています。

注意： Geolocation（地理定位）は、iPhoneなどのGPSを搭載したデバイスではより正確です。

HTML5 - 地理定位の使用

getCurrentPosition() メソッドを使用してユーザーの位置を取得してください。

以下の例は、ユーザーの位置の経度和緯度を返す簡単な地理定位の例です：

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎教程網(oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">クリックして現在の座標を取得（取得には少し時間がかかる場合があります）：</p>
<button　onclick="getLocation()">点我</button>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="このブラウザは地理位置の取得をサポートしていません。";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="緯度:　"　+　position.coords.latitude　+　
　　　　"<br>経度:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

テストを見てみる ‹/›

サンプル解析:

地理定位のサポートを検出する
サポートされている場合、getCurrentPosition() メソッドを実行します。サポートされていない場合、ユーザーにメッセージを表示します。
getCurrentPosition() メソッドが成功すると、指定されたshowPosition関数にcoordinatesオブジェクトが返されます
showPosition() 関数は経度和緯度を取得し表示します

上記の例は、基本的な地理定位スクリプトで、エラーハンドリングを含んでいません。

エラーハンドリングと拒否処理

getCurrentPosition() メソッドの二番目のパラメータは、ユーザーの位置取得に失敗した場合に実行される関数を処理します。以下のように指定されます：

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">クリックして現在の座標を取得（取得には少し時間がかかる場合があります）：</p>
<button　onclick="getLocation()">点我</button>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="このブラウザは位置情報の取得をサポートしていません。";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="緯度:　"　+　position.coords.latitude　+　
　　　　"<br>経度:　"　+　position.coords.longitude;　　　　
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="ユーザーは地理位置の取得要求を拒否しました。"
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="位置情報は利用できません。"
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="ユーザーの地理位置のリクエストがタイムアウトしました。"
　　　　　　　　　　　　break;
　　　　　　　　case　error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="未知のエラー。"
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

テストを見てみる ‹/›

エラーコード：

許可が拒否されました - ユーザーは地理定位を許可しません
位置情報が利用できません - 現在位置を取得できません
タイムアウト - 操作タイムアウト

地図に表示する

地図に結果を表示するには、経度と緯度を使用できる地図サービス（例えばGoogle MapsやBaidu Maps）にアクセスする必要があります：

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">クリックして現在の座標を取得（取得には少し時間がかかる場合があります）：</p>
<button　onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="このブラウザは地理位置の取得をサポートしていません。";
　　　　}
}
function　showPosition(position)
{
　　　　var latlon=position.coords.latitude+","+position.coords.longitude;
　　　　var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
　　　　+latlon+"&zoom=14&size=400x300&sensor=false";
　　　　document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="ユーザーは地理位置の取得要求を拒否しました。"
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="位置情報は利用できません。"
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="ユーザーの地理位置のリクエストがタイムアウトしました。"
　　　　　　　　　　　　break;
　　　　　　　　case　error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="未知のエラー。"
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

テストを見てみる ‹/›

上記の例では、返された経度と緯度データを使用して、Google 地図に位置を表示しています（静的な画像を使用しています）。

Google 地図スクリプト
上記のリンクでは、マーク、ズーム、ドラッグオプション付きのインタラクティブな地図を表示する方法を示しています。

特定の位置に関する情報

このページでは、地図上にユーザーの位置を表示する方法を示しています。しかし、地理定位は特定の位置に関する情報にも非常に役立ちます。

例:

ローカル情報を更新する
ユーザーの周辺の興味深いポイントを表示する
インタラクティブな車載ナビゲーションシステム (GPS)

getCurrentPosition() メソッド - データの返信

T成功の場合、getCurrentPosition() メソッドはオブジェクトを返します。常に latitude、longitude、accuracy 属性が返されます。利用可能な場合、以下の属性も返されます。

属性	説明
coords.latitude	十進数の緯度
coords.longitude	十進数の経度
coords.accuracy	位置の精度
coords.altitude	高度、海面からメートルで
coords.altitudeAccuracy	位置の高度の精度
coords.heading	方向、正北から始めて度で
coords.speed	速度、メートルで/毎秒計
timestamp	レスポンスの日付/時間

Geolocation オブジェクト - 他の面白いメソッド

watchPosition() - ユーザーの現在の位置を返し、ユーザーが移動するたびに更新された位置を返し続けます（車載の GPS に似ています）。

clearWatch() - watchPosition() メソッドを停止する

以下の例では watchPosition() メソッドを示しています。この例をテストするには正確な GPS デバイスが必要です（例えば iPhone）：

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">クリックして現在の座標を取得（取得には少し時間がかかる場合があります）：</p>
<button　onclick="getLocation()">点我</button>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.watchPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="このブラウザは地理位置の取得をサポートしていません。";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="緯度:　"　+　position.coords.latitude　+　
　　　　"<br>経度:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

テストを見てみる ‹/›

HTML5 Video(ビデオ)HTML5 ドラッグ＆ドロップ