移動履歴を記録するWebアプリ

以前Google MAPをブログやWebページに掲載する方法を紹介しました。このGoogle MAPにはタイムライン機能も備わっていて、設定しておけば自分がいつどこへいったのかを記録していてくれます。

非常に便利ですが、ずっとGPSをONにしておく必要があるので電池の持ちや、ON、OFFの設定忘れによるプライバシー問題などが気になる人もいるのではないでしょうか。

そこで、自分のアクションで、地点のGPS情報と日次と時刻、メモを取っておけるウェブアプリを作成してみました。

データをWebに流すことはせず、1件ずつ端末内のテキストファイルに落とします。

Geolocation

アプリのコアになる部分は、Geolocation APIです。

次のようにnavigatorからオブジェクトを取得することができますが、安全なコンテキスト(≒https)でしか利用できません。

geolocationオブジェクトは次の3つのメソッドを持ちます。

• getCurrentPosion

  getCurrentPosionを使うことで現在の位置情報を取得します。取得成功時に引数に渡したコールバック関数が呼び出されます。

• watchPosition

  watchPositionに関数を渡すと、端末の位置情報が変化した際に渡した関数が呼び出されれるようになります。

• clearWatch

  watchPositionは戻り値にIDを返します。このIDを渡すことで位置情報の監視を停止します。

getCurrentPosionとwatchPosition

getCurrentPosionとwatchPositionはどちらも同じ定義で最大3つの引数を受け取ります。ひとつは成功時のコールバック関数、もうひとつはエラー処理用の関数、さいごにオプションです。

オプションはPositionOptionsオブジェクトとして定義されています。そのプロパティには高精度の結果を求めるかどうかのboolean値を設定する「enableHighAccuracy」、位置情報取得のタイムアウトをミリ秒で指定する「timeout」、キャッシュの有効期限をミリ秒で設定する「maximunAge」があります。

例えば次のようなコードを作成して表示させてみます。

<script>
  geo.getCurrentPosition(getPosition,
    getPositionError,
    {enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0 //0は常に取得する
    });

  function getPosition(position) {
    console.log(position);
  }
  function getPositionError(error) {
    console.log(error);
  }
</script>

ブラウザでは位置情報を伝えていいかの確認メッセージがでます。ここで「ブロック」を選択すると、エラーとなりgetPositionErrorが呼び出されます。

GeolocationPositionError {code: 1, message: 'User denied Geolocation'}
code: 1
message: "User denied Geolocation"

許可すると位置情報がコールバック関数に返ってきます。

coords: GeolocationCoordinates
accuracy: 2996.1275365177
altitude: null
altitudeAccuracy: null
heading: null
latitude: ...

成功時のコールバック関数が受け取るオブジェクトには、timestampとcoordsのふたつのプロパティがあり、timestampにデータ取得時のタイムスタンプ、coordsに位置情報オブジェクトが入っています。

coordsオブジェクトのプロパティには次のようなものがあります。

• latitude

  緯度です。東京なら36度(北緯)です。日本国内でとりうる値はおおむね20度～46度です。

  南緯はマイナス値になります。

• longitude

  経度です。東京なら140度(東経)です。日本国内でとりうる値はおおむね122度～145度です。

  西経はマイナス値になります。

• alititude

  高度です。取得できない場合はnullが入ります。

• accuracy

  緯度と経度の正確さです。誤差の範囲をメートルであらわしています。2000なら2キロということになります。

• altitudeAccuracy

  高度の正確さです。取得できない場合はnullが入ります。

• heading

  方角です。0～360度であらわされ、0が北、90が東となります。次のspeedが0(null)の時は取得できずに場合はnullが入ります。

• speed

  メートル単位の秒速です。取得できない場合はnullが入ります。

先ほどの成功時の関数を、経度と緯度をログに表示する関数を変更すると次のようになります。

function getPosition(position) {
  let coordinates = posision.coords;
  console.log('緯度:'coordinates.latitude + '.経度:' + coordinates.longitude);
}

GoogleMapで表示

取得した緯度と経度を使ってGoogleMapで表示させることができるので、その機能を使って後から行った場所を思い出したり、区間の距離を計算します。

表示のさせ方は「https://google.com/maps/place/緯度,経度」です。

アプリではデータをタブ区切りにして、日次、緯度、経度、精度、マップのアドレス、メモを一行で出力してファイルに保存します。

アプリ

メモを任意入れて、保存を押すと端末内に行動履歴を保存(ダウンロード)します。また確認を押すと位置情報の取得だけしてダウンロードはしません。自動生成されるGoogleMapのリンクからおよその位置を確認したうえで、手動でダウンロードができます。デフォルトだとダウンロードファイルの文字コードはUTF-8になります。エクセルで開きたい時など、文字化けするようなら「Shift-JISで保存」にチェックをいれて試してみてください。

Shift-JISへの文字コード変換にはpolygonplanet/encoding.jsを使わせていただいております。(MIT License)

現在の端末の位置情報を利用します。アプリにGPS(位置情報)利用の許可をした上でご利用ください。ここで表示される位置情報は当ブログ側には一切送信しておりません。