記入日：2023-04-14 編集日：2023-04-14
JavaScriptを使用して位置情報を取得してみようと思います。 細かく解説
この記事を読むと（約5分）
JavaScriptを使用して位置情報を取得する基本的なコードがイメージできます。 細かく解説
位置情報（経度緯度）を取得するためには、HTML5のGeolocation APIを使用することができます。以下は、JavaScriptを使用して位置情報を取得する基本的なコード例です。
以下のコードは、HTML5のGeolocation APIを使用して現在の位置情報（緯度と経度）を取得し、それをページに表示するものです。
navigator.geolocation.getCurrentPosition()関数は、現在の位置情報を取得し、成功した場合はshowPosition()関数を、失敗した場合はshowError()関数を呼び出します。
showPosition()関数では、取得した位置情報をページに表示し、showError()関数では位置情報の取得に失敗した場合のエラーメッセージを表示します。
また、ページの読み込み完了時にgetLocation()関数を呼び出すことで、ページが読み込まれた際に位置情報の取得が試行されます。
<!DOCTYPE html>
<html>
<head>
<title>位置情報取得</title>
</head>
<body>
<h1>位置情報取得サンプル</h1>
<p id="locationData"></p>
<script>
// 位置情報の取得を試行するための関数 getLocation() が定義されています。
function getLocation() {
if (navigator.geolocation) { // ブラウザが位置情報取得に対応しているかをチェック
navigator.geolocation.getCurrentPosition(showPosition, showError);
// 位置情報の取得を試行し、成功時と失敗時のコールバック関数を指定
} else {
document.getElementById("locationData").innerHTML
= "位置情報の取得がサポートされていません。";
}
}
/*
navigator.geolocation は、
Webブラウザが提供する位置情報に関するオブジェクトであり、
getCurrentPosition() はそのメソッドの1つで、現在の位置情報を取得します。
if (navigator.geolocation) は、
ブラウザが位置情報取得に対応しているかをチェックしています。
もし対応していれば、navigator.geolocation.getCurrentPosition() を
呼び出して位置情報の取得を試行します。
getCurrentPosition() の引数には、
成功時と失敗時のコールバック関数が指定されています。
成功時には showPosition() 関数が、失敗時には showError() 関数が呼び出されます。
もしブラウザが位置情報取得に対応していない場合には、else ブロックが実行されて、
「位置情報の取得がサポートされていません。」というメッセージが
locationData というIDを持つHTML要素に表示されます。
このように、getLocation() 関数はブラウザの位置情報取得機能を利用し、
成功時と失敗時のコールバック関数を指定して位置情報の取得を試行する処理を行っています。
*/
// 位置情報の取得に成功した場合に実行される
// コールバック関数 showPosition(position) が定義されています。
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("locationData").innerHTML
= "緯度: " + latitude + "<br>経度: " + longitude;
}
/*
position は、
getCurrentPosition() メソッドが成功した場合に渡される位置情報を持つオブジェクトです。
position.coords.latitude は、
取得された位置情報の緯度を取得します。それを latitude 変数に格納しています。
position.coords.longitude は、
取得された位置情報の経度を取得します。それを longitude 変数に格納しています。
document.getElementById("locationData").innerHTML は、
HTML内にある id 属性が "locationData" となっている
要素の内部に表示するためのテキストを設定しています。
"緯度: " + latitude + "<br>経度: " + longitude は、
取得した位置情報の緯度と経度を表示するためのテキストを生成しています。
このように、showPosition() 関数は位置情報の取得に成功した場合に、
取得した緯度と経度をHTMLに表示する処理を行っています。
*/
// 位置情報の取得に失敗した場合に実行される
// コールバック関数 showError(error) が定義されています。
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
document.getElementById("locationData").innerHTML
= "位置情報の取得が許可されませんでした。";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("locationData").innerHTML
= "位置情報の取得ができませんでした。";
break;
case error.TIMEOUT:
document.getElementById("locationData").innerHTML
= "位置情報の取得がタイムアウトしました。";
break;
case error.UNKNOWN_ERROR:
document.getElementById("locationData").innerHTML
= "位置情報の取得中に不明なエラーが発生しました。";
break;
}
}
/*
error は、
getCurrentPosition() メソッドが失敗した場合に渡されるエラーオブジェクトです。
error.code は、
エラーの種類を示す数値を持っています。switch 文を使って、
異なるエラーコードに対してそれぞれ異なる処理を行っています。
document.getElementById("locationData").innerHTML は、
HTML内にある id 属性が "locationData" となっている
要素の内部に表示するためのテキストを設定しています。
このように、showError() 関数は位置情報の取得に失敗した場合に、
エラーコードに応じたエラーメッセージをHTMLに表示する処理を行っています。
*/
// ページの読み込み完了時に位置情報の取得を試行
window.onload = function() {
getLocation();
};
</script>
</body>
</html>
navigator.geolocation.getCurrentPosition()関数が位置情報の取得のメインの処理を担います。
この関数は、位置情報を非同期で取得し、成功した場合にはshowPosition()関数をコールバックとして呼び出し、取得した位置情報を引数として渡します。また、失敗した場合にはshowError()関数をコールバックとして呼び出し、エラー情報を引数として渡します。
getCurrentPosition()関数は以下のような構文を持ちます。
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
successCallback:
位置情報の取得に成功した場合に実行されるコールバック関数（ここではshowPosition()関数）
errorCallback:
位置情報の取得に失敗した場合に実行されるコールバック関数（ここではshowError()関数）
options:
オプションの設定。省略可能であり、位置情報の取得方法などを指定することができます。
showPosition()関数やshowError()関数は、getCurrentPosition()関数が成功または失敗した際の処理を定義するためのコールバック関数として指定されます。これにより、位置情報の取得が成功した場合と失敗した場合にそれぞれ異なる処理を実行できるようになります。
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。