GEOBBS: GEOlocation Bulletin Board System　β version

Last update: 2020-01-07

松村真宏 <>

はじめに

GEOBBSはアクセス端末の位置情報を取得し，目的地までの距離も計算してくれる簡易投稿フォームです。出力結果をlog.cgiファイルにタブ区切りのテキストファイルとして保持します。3つのファイルだけからなりますので，ご利用環境にあわせてカスタマイズして各自の責任でお使い下さい。

試してみたい方はこちらからどうぞ。

使い方

index.html にアクセスします。〈スクショを見る〉
情報を入力します。〈スクショを見る〉
「送信」ボタンを押すと位置情報の利用確認ダイアログが現れます。〈スクショを見る〉
「OK」を押すと位置情報を取得して目的地（この場合は文法経一番講義室）までの距離と入力内容のダイアログが現れます。〈スクショを見る〉
「OK」を押すと元の画面に戻ります。〈スクショを見る〉

設定

以下の3つのファイル（index.html, geobbs.js, submit.php）をウェブページに置いて index.html にアクセスするだけです。PHPについては各自のレンタルサーバーの設定に合わせてください（僕の使ってるさくらインターネットでは「CGI・PHP・SSI について」に載ってます）。

index.html 〈コードを見る〉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="geobbs.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<p>名前</br>
  <input type="text" id="NAME" placeholder="ほげほげ"></p>

<p>学籍番号<br/>
  <input type="text" ID="NUMBER" placeholder="ABCD1234"></p>
 
<p>回答<br/>
  <textarea ID="ANSWER" cols="50" rows="5" placeholder=""></textarea></p>

<button onclick="geo()">送信</button>

<p id="OUTPUT"></p>

</body>
</html>

geobbs.js 〈コードを見る〉

function distance(lat1, lng1, lat2, lng2) {
  lat1 *= Math.PI / 180;
  lng1 *= Math.PI / 180;
  lat2 *= Math.PI / 180;
  lng2 *= Math.PI / 180;
  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
}

function geo() {
    navigator.geolocation.getCurrentPosition(geogeo);
}

function geogeo(position) {
    // 現在位置
    var lat1 = position.coords.latitude;
    var lng1 = position.coords.longitude;
    var accu = position.coords.accuracy.toFixed();

    // 目的地（文法経一番講義室）の緯度と経度
    var lat2 = 34.805130;
    var lng2 = 135.453851;

    // 目的地までの距離
    var dist = (distance(lat1, lng1, lat2, lng2)*1000).toFixed();

    // 出力
    var geo_text = "<hr/>\n";
//    geo_text = "緯度：" + lat2 + "<br/>\n";
//    geo_text += "経度：" + lng2 + "<br/>\n";
    geo_text += "文法経一番講義室までの距離：" + dist + "メートル<br/>\n";
    geo_text += "位置精度：" + accu + "メートル<br/>\n";
    var date = new Date(position.timestamp);
    geo_text += "取得時刻：" + date.toLocaleString() + "<br/>\n";
    geo_text += "<hr/>\n";

    // 結果の取得 
    var name = document.getElementById("NAME").value;
    var number = document.getElementById("NUMBER").value;
    var answer = document.getElementById("ANSWER").value.replace(/\r?\n/g, '：');

    geo_text += "名前：" + name + "<br/>\n";
    geo_text += "学籍番号：" + number + "<br/>\n";
    geo_text += "回答：" + answer + "<br/>\n";

    // tsv形式
    var tsv = date.toLocaleString() + "," + dist + "," + accu + "," + name + "," + number + "," + answer + "\n";

    // 結果の表示
    document.getElementById('OUTPUT').innerHTML = geo_text;

    // 書き出し
    $.ajax({
        type: "POST",
        url: "submit.php",
        data: {"data": tsv},
        success: function(tmp) {
            alert('Submission succeeded.\n---\n' + tmp);
        }
    });
}

submit.php 〈コードを見る〉

<?php
  $data = $_POST["data"];
  echo "$data";
  $file = "log.cgi";
  file_put_contents($file, $data, FILE_APPEND | LOCK_EX);
?>

出力結果

出力結果は log.cgi ファイルに以下のようなタブ区切りのテキストファイルとして保存されます。

12/28/2019, 9:33:07 AM	642	65	松村真宏	3141592	本年もお世話になりました。
2019/12/28 9:52 AM	662	65	松村真宏	3141592	来年もよろしくお願いいたします。
1988/12/27 10:23:00	656	29	松村真宏	3141592	ご自由にお使いください。

log.cgi はブラウザからは直接見れません。ダウンロードしてテキストエディタで開くか，拡張子を .cgi から .txt に変更してExcelで開けば見ることができます。

テキスト中の改行は「：」に置換しています。

カスタマイズについて

geobbs.js の以下の箇所を書き換えることで目的地を任意の位置に設定できます。

    // 目的地（文法経一番講義室）の緯度と経度
    var lat2 = 34.805130;
    var lng2 = 135.453851;

目的地の緯度と経度はGoogleマップから取得できます。例えば，上記の文法経一番講義室の位置情報は以下のようにして取得しました。

index.html, geobbs.js, submit.php は必要最小限の構成なので，分かる人は適宜書き換えて自由にカスタマイズしてください。

その他

スマホのほうが位置情報の精度が1桁高いので，スマホでの使用をお勧めします（PCからでも使用できます）
PCから使う場合，Safariはスマホ並に位置情報が良く（数十メートル），Firefoxは精度が良かったり悪かったり（数十メートルから数百メートル），Chromeは悪いです（数百メートル）。
スマホアプリの場合，位置情報サービスをオンにしないと動かないものもありますので，その場合はiPhoneでは「設定」>「プライバシー」>「位置情報サービス」から位置情報をオンにしてください（iPhoneの場合は「iPhone、iPad、iPod touch で位置情報サービスと GPS のオン／オフを切り替える」，Androidは「Android スマートフォンの位置情報を使用するアプリを選択する」をご参照ください。
Chrome, Firefox, Safariで日時を取得する date.toLocaleString() 関数の出力結果が異なる（Chromeは 2019/12/28，Firefoxは 28/12/2019，Safariは 1988/12/27 といった感じ）ので，適宜補正してお使い下さい。

使用上の注意

位置情報を取得しますので，適正な手続きの上ご使用ください。

更新履歴

2020-01-07 v0.02 出力ファイルの形式を変更
2019-12-28 v0.01 公開