【GAS】ジョギングのお伴にいかが？GASを使ったWEBアプリ「かんたん走行記録」で、GPSの位置情報をスプレッドシートに記録しよう！（4）WEB画面の位置情報を情報をスプレッドシートに書き込む

Particlemethod

2024年1月8日 14:30

スマートフォンなどから、手軽に入手できる様になったGPS情報を日常生活で活かす例として、自身の位置情報をスプレッドシートに自動記録するWEBアプリを作ってみました。

ジョギングの時の記録に使えそうなので、「かんたん走行記録」アプリと称してみました。

先回の記事では、本アプリのキーとなる、GPSの位置情報の取得についてご説明しました。

今回は、この位置情報をスプレッドシートに書き込む所について、ご説明します。

ユーザの端末上で取得した位置情報を表示させる

先回の記事では、ブラウザからGPSの位置情報を取得する方法をご説明しました。

その方法は、テンプレートに位置情報を取得する関数をJavaScriptで書いておくことで、ブラウザから位置情報を取得するというものでした。

具体的には、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>

ここで得られた情報は、HTML文書と組み合わせるコードを記述しておくことで、以下の様に、ブラウザ上の文字情報として表示させることができます。

WEBページへの表示

作動例をお見せしましょう。以下がこのWEBアプリを起動したところです。（ここで表示される文字やボタンは、テンプレート内でHTML文書として記載しているものです）

「記録開始」のボタンをクリックして、しばらくすると・・・

こんな風に、取得した位置情報を、緯度、経度などの文字で表示します。

文字表示の部分の実装は、テンプレートに以下の様なコードを書いておきます。



　　・・・
    <ul id="location">
      <!--空のリスト--> 
    </ul>
　　・・・

</html>


<script>
　　・・・

      // 位置情報の取得とリスト用テキストの作成
        var location = "<li>" + "緯度：" + pos.coords.latitude + "</li>";
        location += "<li>" + "経度：" + pos.coords.longitude + "</li>";
        location += "<li>" + "速度：" + pos.coords.speed + "</li>";
        location += "<li>" + "時刻：" + date.toLocaleString() + "</li>";


      // WEBページ上のリスト更新
        document.getElementById("location").innerHTML = location;

　　・・・
</script>

上のコードで行っているのは次の内容です。

最初に、<html>セクションに、カラのリスト要素<ul></ul>を記述しています。タグ<ul>内には、ID名 id="location"を記述し、あとからID名を指定して、要素を特定できる様にしています。

次に、<script>セクションに、以下を記述し、この要素（id名"location"）内のテキストを変更しています。

document.getElementById("location").innerHTML = location;

document.getElementById("location")は前記のリスト要素で、innerHTMLはリスト内の表示内容です。これを、随時書き換えることで、常に最新の位置情報を表示します。

位置情報をGoogleスプレッドシートに書き込むには

さて、テンプレート内にコードを実装することで、ユーザの画面上では位置情報を表示できましたが、このWEBアプリでは、それをGoogleスプレッドシートに記録することが目標です。

その記録については、プロジェクト内の「スクリプト」に書き込みのためのコードを記述して実装します。

以下はスクリプト・ファイルの内容です。

以下が、キーとなるコード部分を書いた関数（”シート書込み”）です。（変数名は漢字で仮に書いています）

function シート書込み(位置情報,シート名){
　　・・・

  //アプリケーションを取得｜★スプレッドシートID★は各自のものを記入
  var 対象ファイル = SpreadsheetApp.openById('★スプレッドシートID★');

  //対象シートをシートの名前を指定して取得
  var 対象シート = 対象ファイル.getSheetByName(シート名);
  
  //データを記入
  対象シート.getRange(書込行,2列目,1行範囲,1列範囲).setValue(位置情報);
　　・・・
｝

上記のコードで行っている処理は、以下の様なものです。

　スプレッドシートのファイルを特定します。
　var 対象ファイル = SpreadsheetApp.openById('★スプレッドシートID★');

　シートを特定します。
　var 対象シート = 対象ファイル.getSheetByName(シート名);

　位置情報をセルに書き込みます。
　対象シート.getRange(書込行,2列目,1行範囲,1列範囲).setValue(位置情報);

中心的な処理は、getRange(セルを指定).setValue(書込内容)という関数で行っています。

スクリプト中にある関数を作動させる

ここからは、テンプレート・ファイルの内容に戻ります。

さて、端末で表示させた位置情報をスプレッドシートに書き込むには、ユーザの端末上で稼働しているテンプレート（WEBページ）の側から、スクリプト・ファイル内にある”シート書込み”関数に、必要な情報を送ってこれを作動させる必要があります。

一般のWEBアプリでは、WEBページ（ここではテンプレート）と、サーバ（ここではGoogleドライブ）の連携は、なかなか実装が難しいのですが、GASではgoogle.script.run関数を使うことで簡単にできてしまいます。

この関数の子要素として、スクリプト・ファイル内の関数を、引き渡す情報も含めて記述すれば、実装は完了です。

google.script.run.スクリプト内の関数(引き渡す変数)

とても便利な関数で、WEBアプリをGASで作る時には欠かせない関数です。

これを、テンプレートの<script>セクションに以下の様に記述することで、取得した位置情報をスプレッドシートに記録します。

<script>
・・・  
// スプレッドシートに転送
    google.script.run.シート書込み(位置情報,シート名);
・・・
</script>

位置情報は、移動や経度を、区切り文字（ここれでは”■”）を挟んで1つの文字列に結合したものを使っています。

ここで、一旦記事を切ります。

記録先のスプレッドシートでは、新たに入った位置情報を、最後の行に逐次追加し、あわせて、位置情報の文字列を、区切り文字を頼りに、個々の情報に分解して保存しています。

これらの最終行の把握の処理や文字列の分解は、スプレッドシート上のワークシート関数で行っています。

次回は、記録に使うスプレッドシートについてご説明します。

←前の記事
次の記事⇒

この記事が気に入ったらサポートをしてみませんか？