本記事の内容
「ブラウザで位置情報を取得したい」
「Javascritpを使ってサーバーに現在位置を送信したい」
当ブログでは、WordPress&Cocoon&エックスサーバーを使用しています。より良いデザイン・カスタマイズが出来るようにプラグインやその方法をご案内しております。
今回はその中でも位置情報に注目し、解説していきます。
Javascriptで現在位置情報を取得する
まずはこれが出来なければ話が進みません。
現在位置を取得するコードを公開します。
位置情報の取得には位置情報APIのGeolocationAPIを活用します。
ちなみに、このGeolocationAPIは無料で使うことが出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function getPosition() { // 現在地を取得 navigator.geolocation.getCurrentPosition( // 取得成功した場合 function (position) { // データを表示 alert('緯度：'+String(position.coords.latitude)+'\n経度：'+String(position.coords.longitude)); }, // 取得失敗した場合 function (error) { switch (error.code) { case 1: //PERMISSION_DENIED alert("位置情報の利用が許可されていません"); break; case 2: //POSITION_UNAVAILABLE alert("現在位置が取得できませんでした"); break; case 3: //TIMEOUT alert("タイムアウトになりました"); break; default: alert("その他のエラー(エラーコード:" + error.code + ")"); break; } } ); } |
赤色のボタン要素の中に上記Javascriptのイベントを組み込んでいます。
これによりブラウザの緯度と経度を取得することが出来ます。
これを取得しただけでは使い道が少ないので、ここで得た情報をサーバーへ送ります。
サーバーへの送信方法
サーバーへは、このJavascriptを一部書き換えてPostで送信します。
form内に数値や送信先を格納します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function getPosition() { // 現在地を取得 navigator.geolocation.getCurrentPosition( // 取得成功した場合 function (position) { var form = document.createElement('form'); form.action = 'https://〇〇〇.com/'; //←送信先のアドレスを記入 form.method = 'post'; // body に追加 document.body.append(form); // formdta イベントに関数を登録(submit する直前に発火) form.addEventListener('formdata', (e) => { var fd = e.formData; // データをセット fd.set('lat', position.coords.latitude); fd.set('lon', position.coords.longitude); }); form.submit(); }, // 取得失敗した場合 function (error) { switch (error.code) { case 1: //PERMISSION_DENIED alert("位置情報の利用が許可されていません"); break; case 2: //POSITION_UNAVAILABLE alert("現在位置が取得できませんでした"); break; case 3: //TIMEOUT alert("タイムアウトになりました"); break; default: alert("その他のエラー(エラーコード:" + error.code + ")"); break; } } ); } |
データは”lat”に緯度、”lon”に経度を格納しています。
actionの部分に、送信先のアドレスを入力すれば完成です。
これを、使いたいページのカスタムJavascriptに書きます。
ボタンに実装する
javascriptに上記コードを書きこんだら、今度はこれをそのボタンに実装します。
|
1 2 3 |
<div class="wp-block-cocoon-blocks-button-1 button-block"> <button class="btn btn-red" onclick="getPosition();">現在地をalertで表示する</button> </div> |
何てことないですね。
ボタンをhtmlで編集して、onclickでgetPosition()の関数が実行される様にして送信。
Javascriptから送信した情報をPHPで受け取る
続いては受け取り方。
受け取り方は、ショートコードなどにして受取先のページに組み込むと良いでしょう。
ショートコードを作成する記事はこちら
|
1 2 3 4 5 6 7 8 9 |
if (isset($_POST)) { $form_post = $_POST; } $centerlat = $form_post['lat']; $centerlon = $form_post['lon']; //POST改ざん対策、数字のみを受け付ける為のコード if (!(is_numeric($centerlat) && is_numeric($centerlon))) { header("location: https://#"); //←数値以外の情報が入ってきた場合に強制転送 } |
ポイントは、issetでPOSTの内容が正しいかチェック。
緯度・経度の数値に、数値以外の情報が入力されたらアクセスを遮断します。
このぐらいの対策で十分では無いでしょうか？
まとめ
いかがでしたでしょうか？
位置情報をページで扱う際の参考になれば幸いです。
ご意見や質問等ありましたら、コメント欄にお願いします。
関連記事・・・GoogleMapのサイトへの埋め込み（動的埋め込み編）
コメント