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

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

これまでの解説記事です。

①テンプレートにJavaScriptを記載してGPSの位置情報を取得する

②WEBページ上で取得した位置情報をGoogleスプレッドシートに書き込む

③スプレッドシート上で距離計算やGoogleマップの参照URLを生成し、WEBページに戻す

④watchPosition関数のスリープ処理と、WEBページのスリープ回避

今回の記事では、このWEBアプリを実装するためのGASのコードとスプレッドシートのひな形をご紹介します。

GASで作るWEBアプリについて

GASで作るWEBアプリは、以下の構成となっています。

スプレッドシート

データベース代わりになります。Googleドライブ内に作成します。

スクリプト

Googleドライブ内で稼働するマクロ言語です。「プロジェクト」というファイルをGoogleドライブ内に作成し、その中で記述します。

「デプロイ」と呼ばれる処理でURLと紐付けすることで、アクセスすると稼働する「WEBアプリ」となります。

テンプレート

HTMLコードとJavaScriptコードを記述したのもで、ユーザにレスポンスされると、ブラウザ上でWEBページとして表示されるものです。

（JavaScriptはGoogleスクリプトとよく似ているのですが別物です）

スクリプト同様に「プロジェクト」の中で記述します。

GASによるWEBアプリでは、以上3つが必要となります。

WEBアプリの細かい実装手順は、以下にまとめました。ネットで情報を得ることもできますが、まとまった資料で見たい方はどうぞ。（手間代程度の値段ですが、Amazon読み放題で無料で読めると思います）

デプロイなど詳しい手順は上記を参考にしてください。

「かんたん走行記録」実装用のスプレッドとコード

スプレッドシート

以下がデータベース代わりのスプレッドシートのひな形です。

Googleドライブ内にスプレッドシートを新規作成し、上記をダウンロードしたもの（エクセル形式です）を、スプレッドシートのファイルメニューからインポートしてください。

インポートが済むと、「記録」というシートが一つ追加された状態になるはずです。

スプレッドシートの名前は何でも結構ですが、このシート名は変えないでください。

以上でスプレッドシートの準備は終了です。

最後にブラウザのヘッダからURLを参照し、表示している時のURLおよびスプレッドシートIDを控えておいてください。

なお、WEB画面にあるリンクから参照する場合は、公開設定しておいてください。

スクリプトのコード記述

Googleドライブ内で、「新規」⇒「その他」⇒「GoogleAppsScript」を選んで「プロジェクト」ファイルを作成します。

プロジェクトファイルを開くと、デフォルトで「コード.gs」ファイルがあるので、コードエディタでこれを開いてこの中にスクリプトを記述します。

元のコードを削除した上で、以下のコードをコピー＆ペーストし、「★スプレッドシートID★」部分を、ご自身のさきほど用意したスプレッドシートのものに書き換えてください。

function doGet(e) {

//-- --かんたん走行記録-- --

/* --作成者：ParticleMethod-- --
-- --作成日：2023.12.28--- */

/*-- --個人使用でご利用ください。（ノー・クレームでお願いします）著作権は作成者に帰属します。
------参考note記事（https://note.com/prog_article5/n/nda6825314197）----*/


  //HTMLファイルのテンプレートをファイル名を指定して取得
  var myHTML = HtmlService.createTemplateFromFile('INDEX');
  
  return myHTML.evaluate().addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
  }

//★★★★ＨＴＭＬから呼び出されて実行する関数★★★★

//HTMLテーブルの値myCellsをシートに書き込む関数
function SetSheet(myPos,mySName){

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



  //対象シートをシートの名前を指定して取得
  var mySheet = myApp.getSheetByName(mySName);
  
  //スプレッドシートに値を書き込み

  //A列最終行を取得
  var lastRow1 = mySheet.getRange(3, 1).getValue();
  //行Noを記入
  mySheet.getRange(lastRow1+4,1,1,1).setValue(lastRow1+1);
  //データを記入
  mySheet.getRange(lastRow1+4,2,1,1).setValue(myPos);
 
 
  //返り値の変数を定義 
  var myTotal = new Array(3) ;

  //レコード数を取得
  myTotal[0]=mySheet.getRange(3,1,1,1).getValue();

  //走行距離を取得
  myTotal[1]=mySheet.getRange(5,13,1,1).getValue();

  //地図のリンクを取得
  myTotal[2]=mySheet.getRange(3,11,1,1).getValue();

  //結果を返す 
  return myTotal;

}

作業が済んだら保存します。

テンプレートのコード記述

スクリプトと同じプロジェクト内に、「INDEX.html」というテンプレートファイルを追加します。

ヘッダの「＋」をクリックし、

「HTML」を選択し、

テンプレート名を「INDEX.html」として追加します。(この名称はスクリプト中で利用していますので、変えないでください)

元のコードを削除した上で、記事の最後にある有料部分のコードを貼り付けます。

貼り付けたら、一旦保存して、デプロイします。

デプロイについて

以下の手順ですが、詳細はネットなどで確認ください。

エディタの上にある「デプロイ」ボタンをクリックし・・・

「新しいデプロイ」をクリックし・・・

ウェブアプリとしてのデプロイを選択します。

アクセス者が「自分」、アクセスできるのは「全員」にします。（Googleへログインしていない場合でも使える設定です）

ここで「デプロイ」をクリックした後、誰がデプロイしているのか（自分のユーザ名をクリック）、デプロイを許可するか（許可、またはArrowをクリック）聞かれた後、最終的に完了します。

最後にURLが表示されるので、控えておきましょう。

テンプレートのコードを記事の最後の有料部からどうぞ。

テンプレートのコードからは、以下のノウハウが得られます。

万一うまく稼働しなかった場合は、上のノウハウが参照できることでご容赦願いますm(_ _)m。（多くの行に説明をコメントしているので、意味するところは判ると思います）

←前の記事