【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」と打ち込み、テンプレート・ファイル名とします。
プロジェクト名、スクリプト・ファイル名は、今回は何でもかまわないのですが、テンプレート・ファイル名だけは、プログラムから呼び出すために「INDEX」としてください。（この名称は、WEBサイトのトップページとして、しばしば使われるものです）
以上で、GASのコードを書き込む準備ができました。
スプレッドシートの作成
スプレッドシートは、Googleドライブ直下の「Googleスプレッドシート」をクリックすると作成されます。
こちらも、名前は何でもかまいません。作成したら、ブラウザのヘッダ部分を参照して、このスプレッドシートへのURLをメモ帳などに控えておきましょう。
このスプレッドシートは、WEBアプリのデータベース代わりに利用します。
ユーザのデバイスにある位置情報は、テンプレート内の関数で取得する
さて、それではプログラムを書き始めましょう。まずは、今回のキーである、GPSの位置情報を取得するコードからご説明します。
ここで注意すべきことは、GPS情報を有しているのは、ユーザの手元にあるスマートフォンなどの端末であることです。
Googleドライブ内にある「スクリプト」にコードを記述しても、Googleドライブ（どこかにある大規模なサーバが実体です）からはこの情報を読み取ることはできません。
GPSの位置情報を取得するためのコードは、「テンプレート」に記述します。
テンプレートは、レスポンスとしてアクセス者に返して、アクセス者の端末にあるブラウザ上で稼働しますので、位置情報を取得するには、ここにコードを記述しておくわけです。
テンプレート内に記述するコード
テンプレート内に記述する内容は、ほぼHTML文とJavaScriptです。
HTML文は、ブラウザで表示させる装飾（タグ）付きの文書で、JavaScriptはブラウザ用の一種のマクロ言語です。
書き方は大体以下の様になっています。
<!DOCTYPE html>
<html>
<script>
//--- JavaScriptの記述--
</script>
<body>
<!--HTML文の記述-->
</body>
</html>
<body>～</body>で挟まれた行にはHTML文を、<script>～</script>で挟まれた行にはJavaScriptを記載します。
ここに記述するHTMLやJavaScriptは、GAS固有のものではなく、WEBページの「ソース文書」として広く用いられているもので、いわゆる「スクリプト（Google Script）」とは別物である点にご注意ください。
文法がそっくりですので混同しがちですが、JavaScriptに関する説明は、Google Scriptの参考書を見ても記載がないので気をつけましょう。
とはいえ、全く固有事項がないかというとそうではなく、テンプレート内でだけ使える便利なタグや、JavaScript関数も用意されています。（ややこしいのですが）
位置情報をブラウザから取得する関数、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位置情報を取得する部分のご説明でした。
次回は、これをスプレッドシートに保存するためのコードについてご説明します。
最後の記事でコードはまとめて再掲の予定です。
←前の記事
次の記事⇒
この記事が気に入ったらサポートをしてみませんか？