HTML5でジオロケーション座標を使う方法｜基本からサンプルコードまで解説
HTML5のGeolocation APIを使用すると、自分の位置情報をお気に入りのWebサイトと共有することができます。JavaScriptで緯度と経度を取得し、それをバックエンドのWebサーバーへ送信すれば、近隣店舗の検索や現在地の地図表示など、位置情報を活用した多彩な機能を実現できます。ジオロケーションの座標は、デバイスの地理的な位置を特定するためのものです。
位置情報の取得方法
ジオロケーションのメソッドであるgetCurrentPosition()やwatchPosition()は、位置情報を取得するためのコールバックメソッドを指定します。これらのメソッドは非同期で呼び出され、完全な位置情報を格納したPositionオブジェクトを受け取ります。
Positionオブジェクトの主なプロパティ
Positionオブジェクトは、デバイスの現在の地理的な位置を表します。位置情報は地理的座標の集合として表現され、進行方向（ヘディング）や速度の情報も併せて含まれます。
| プロパティ | 型 | 説明 |
|---|---|---|
| coords | object | デバイスの地理的な位置を指定します。位置情報は、進行方向や速度に関する情報とともに、地理的座標の集合として表現されます。 |
| coords.latitude | Number | 10進数による緯度の推定値を示します。値の範囲は[-90.00, +90.00]です。 |
| coords.longitude | Number | 10進数による経度の推定値を示します。値の範囲は[-180.00, +180.00]です。 |
次のコードは、Positionオブジェクトから緯度と経度の座標を取り出して利用する例です。
geolocationオブジェクトの主なメソッド
geolocationオブジェクトには、以下のメソッドが用意されています。いずれも座標を用いて位置情報を取得します。
| メソッド | 説明 |
|---|---|
| getCurrentPosition() | ユーザーの現在の地理的な位置を取得します。 |
| watchPosition() | デバイスの現在の地理的な位置に関する定期的な更新を取得します。 |
| clearWatch() | 実行中のwatchPosition()の呼び出しをキャンセルします。 |
サンプルコード
以下のコードを実行すると、HTML5でジオロケーションを操作し、ジオロケーション座標を使用する方法を実際に確認できます。この例では、デバイスの現在位置に関する定期的な更新を取得し、位置情報を進行方向や速度の情報とともに地理的座標として扱います。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var watchID;
var geoLoc;
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 getLocationUpdate(){
if(navigator.geolocation){
// タイムアウトは60000ミリ秒（60秒）
var options = {timeout:60000};
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
} else {
alert("申し訳ありませんが、お使いのブラウザはジオロケーションに対応していません。");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocationUpdate();" value="更新を監視"/>
</form>
</body>
</html>
ボタンをクリックすると位置情報の監視が開始され、アクセスが許可されれば緯度と経度がアラートで表示されます。位置情報へのアクセスが拒否された場合（コード1）や位置が取得できない場合（コード2）には、errorHandlerがそれぞれ対応するエラーメッセージを表示します。
利用時の注意点
Geolocation APIはユーザーのプライバシーに関わる機能のため、ブラウザは必ず位置情報へのアクセス許可を求めます。ユーザーが明示的に許可しない限り、Webサイトが位置情報を取得することはできません。また、HTTPS環境でのみ動作が保証される点にも留意してください。
-
【HTML5】ドラッグ＆ドロップ（DnD）の実装方法をサンプルコード付きで解説
ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティ
-
位置追跡に粒子アルゴンを使用する方法
プロジェクトにプレゼンスまたは位置追跡を追加したいと思ったことはありませんか?解決策 (またはその欠如) に不満を感じていますか? 心配しないでください。あなただけではありません! この投稿では、非常に基本的な追跡および通知アプリケーションを実装する方法を学びます。 Particle Argon と Tile Mate を使用します。 最後に、タイルが存在するかどうかを判断できるようになります。さらに、Pushover を使用して、選択したデバイスにプッシュ通知を送信します。 始めましょう! 注意 始める前に、この投稿は長いです . PDF バージョンをダウンロードして、保存して後で