【GAS】ジョギングのお伴にいかが?GASを使ったWEBアプリ「かんたん走行記録」で、GPSの位置情報をスプレッドシートに記録しよう!(3)テンプレートからwatchPosition()関数でGPSの位置情報を取得する
スマートフォンなどから、手軽に入手できる様になったGPS情報を日常生活で活かす例として、自身の位置情報をスプレッドシートに自動記録するWEBアプリを作ってみました。
ジョギングの時の記録に使えそうなので、「かんたん走行記録」アプリと称してみました。
上記のWEBアプリは、Googleの無料サービスである、Google Apps Script(GAS)で作成可能ですが、先回の記事では、GASで作るWEBアプリ一般についての解説を致しました。
今回の記事では、本アプリのキーとなる、GPSの位置情報の取得についてご説明します。
Googleドライブ内にプロジェクトとスプレッドシートを用意しよう
GASによるWEBアプリを作る際の、お定まりの手順ですが、まずは、スクリプトやテンプレートを記載するための「プロジェクト」と「スプレッドシート」を、ご自身のGoogleドライブ内に作成します。
プロジェクトの作成
「新規」⇒「その他」⇒「Google Apps Script」を選択して、プロジェクトファイルが作成されます。
プロジェクトファイルを開くと、デフォルトで「コード.gs」という名前のスクリプトファイルがあります。ここにスクリプトを記載していきます。
テンプレートを作成するには、ヘッダ部分の「+」をクリックし、「HTML」を選択します。
ファイル名を求められますので「INDEX」と打ち込み、テンプレート・ファイル名とします。
以上で、GASのコードを書き込む準備ができました。
スプレッドシートの作成
スプレッドシートは、Googleドライブ直下の「Googleスプレッドシート」をクリックすると作成されます。
こちらも、名前は何でもかまいません。作成したら、ブラウザのヘッダ部分を参照して、このスプレッドシートへのURLをメモ帳などに控えておきましょう。
このスプレッドシートは、WEBアプリのデータベース代わりに利用します。
ユーザのデバイスにある位置情報は、テンプレート内の関数で取得する
さて、それではプログラムを書き始めましょう。まずは、今回のキーである、GPSの位置情報を取得するコードからご説明します。
ここで注意すべきことは、GPS情報を有しているのは、ユーザの手元にあるスマートフォンなどの端末であることです。
Googleドライブ内にある「スクリプト」にコードを記述しても、Googleドライブ(どこかにある大規模なサーバが実体です)からはこの情報を読み取ることはできません。
GPSの位置情報を取得するためのコードは、「テンプレート」に記述します。
テンプレートは、レスポンスとしてアクセス者に返して、アクセス者の端末にあるブラウザ上で稼働しますので、位置情報を取得するには、ここにコードを記述しておくわけです。
テンプレート内に記述するコード
テンプレート内に記述する内容は、ほぼHTML文とJavaScriptです。
HTML文は、ブラウザで表示させる装飾(タグ)付きの文書で、JavaScriptはブラウザ用の一種のマクロ言語です。
書き方は大体以下の様になっています。
<!DOCTYPE html>
<html>
<script>
//--- JavaScriptの記述--
</script>
<body>
<!--HTML文の記述-->
</body>
</html>
ここに記述するHTMLやJavaScriptは、GAS固有のものではなく、WEBページの「ソース文書」として広く用いられているもので、いわゆる「スクリプト(Google Script)」とは別物である点にご注意ください。
文法がそっくりですので混同しがちですが、JavaScriptに関する説明は、Google Scriptの参考書を見ても記載がないので気をつけましょう。
位置情報をブラウザから取得する関数、WatchPosition()
ブラウザ上のマクロ言語であるJavaScriptには、GPS位置情報をブラウザから取得する関数として、getCurrentPosition()関数とWatchPosition()関数が用意されています。
getCurrentPosition()関数は、一度だけ端末の現在位置を取得し、WatchPosition()関数は、停止されるまで連続的に現在位置を取得します。
今回は経時的な走行記録を取りたいので、後者の関数を利用します。
以下が、この関数を使った処理を、テンプレートの<Script>セクションに記述したところです。
<script>
・・・・
// ブラウザからgeolocationが使える場合に実行
if (navigator.geolocation) {
// watchPosition関数を使用
var watchId =navigator.geolocation.watchPosition(
// 無名関数を使って位置情報を引数POSに入れて処理
function (pos) {
// タイムスタンプの取得
var date = new Date(pos.timestamp);
// 位置情報を文字列として保存(区切り文字として■を使用)
var myPos ="POS■" + pos.coords.latitude ;//緯度
myPos+= "■" + pos.coords.longitude ;//経度
myPos+= "■" + pos.coords.speed ;//速度
myPos+= "■" + date.toLocaleString();//時刻
)
}
・・・・
</script>
多少、ご説明しましょう。
if (navigator.geolocation) {・・・}
navigator.geolocationは、ブラウザ内のGPS情報に関するオブジェクトです。if構文の条件式にこれを入れることで、GPS情報を取得できることを確認しています。
var watchId =navigator.geolocation.watchPosition(・・・)
navigator.geolocationの子関数である、watchPosition( )を作動させています。作動時に返されるID値を変数 watchIdに保存しており、後で停止命令などに利用します。
function (pos) {・・・}
watchPosition( )の中に、watchPosition関数が返すGPS情報posの処理を記載しています。
関数名なしで、いきなり変数posをカッコで囲んで処理を記載するのは、JavaScript専用の構文であり、「無名関数」といいます。これがwatchPosition( )の引数部分に書かれているので、慣れないと面食らうかもしれません。
pos.coords.longitude()など
watchPositionが取得した情報は変数posに保存されており、ここからいろんな情報が取り出せます。
緯度:pos.coords.latitude
緯度:pos.coords.longitude
速度:pos.coords.speed
時刻:pos.timestamp
最後の時刻だけは、関数dateで日付形式にしたあと、関数date.toLocaleString()で現地時間に直してから使います。
今回のコードでは、セパレータ文字として「■」を挟んだ1つの文字列に結合して文字列としてmyPos変数に保存しています。
以上、テンプレート内にコードを記述して、GPS位置情報を取得する部分のご説明でした。
次回は、これをスプレッドシートに保存するためのコードについてご説明します。
←前の記事
次の記事⇒
この記事が気に入ったらサポートをしてみませんか?