![見出し画像](https://assets.st-note.com/production/uploads/images/127773514/rectangle_large_type_2_581c2fabbc99fc9b8f6ecc5a565f502a.jpeg?width=1200)
【GAS】ジョギングのお伴にいかが?GASを使ったWEBアプリ「かんたん走行記録」で、GPSの位置情報をスプレッドシートに記録しよう!(最終)実装用のスプレッドシートとGASのコードをご紹介
スマートフォンなどから、手軽に入手できる様になったGPS情報を日常生活で活かす例として、自身の位置情報をスプレッドシートに自動記録するWEBアプリを作ってみました。
ジョギングの時の記録に使えそうなので、「かんたん走行記録」アプリと称してみました。
これまでの解説記事です。
①テンプレートにJavaScriptを記載してGPSの位置情報を取得する
②WEBページ上で取得した位置情報をGoogleスプレッドシートに書き込む
③スプレッドシート上で距離計算やGoogleマップの参照URLを生成し、WEBページに戻す
④watchPosition関数のスリープ処理と、WEBページのスリープ回避
今回の記事では、このWEBアプリを実装するためのGASのコードとスプレッドシートのひな形をご紹介します。
本記事では実装コードをご紹介していますが、様々な理由により、この説明通りにいかない場合がしばしばあります。こうした場合の対応は、申し訳ありませんが、自己責任・自己解決でお進めくださるよう、お願いいたします。
GASによるプログラムはの内容は、個人や小規模なグループ内での利用を想定しており、規模の大きなグループや商用での利用は想定しておりませんのでご注意下さい。
GASで作るWEBアプリについて
GASで作るWEBアプリは、以下の構成となっています。
スプレッドシート
データベース代わりになります。Googleドライブ内に作成します。
スクリプト
Googleドライブ内で稼働するマクロ言語です。「プロジェクト」というファイルをGoogleドライブ内に作成し、その中で記述します。
「デプロイ」と呼ばれる処理でURLと紐付けすることで、アクセスすると稼働する「WEBアプリ」となります。
テンプレート
HTMLコードとJavaScriptコードを記述したのもで、ユーザにレスポンスされると、ブラウザ上でWEBページとして表示されるものです。
(JavaScriptはGoogleスクリプトとよく似ているのですが別物です)
スクリプト同様に「プロジェクト」の中で記述します。
GASによるWEBアプリでは、以上3つが必要となります。
![](https://assets.st-note.com/img/1705453136814-XJYFbmAgBR.png)
WEBアプリの細かい実装手順は、以下にまとめました。ネットで情報を得ることもできますが、まとまった資料で見たい方はどうぞ。(手間代程度の値段ですが、Amazon読み放題で無料で読めると思います)
デプロイなど詳しい手順は上記を参考にしてください。
「かんたん走行記録」実装用のスプレッドとコード
スプレッドシート
以下がデータベース代わりのスプレッドシートのひな形です。
Googleドライブ内にスプレッドシートを新規作成し、上記をダウンロードしたもの(エクセル形式です)を、スプレッドシートのファイルメニューからインポートしてください。
ダウンロードしたファイルをエクセルで開くと循環参照の警告が出ますが、実際には循環していませんので大丈夫です。スプレッドシートに取り込んだ後はエラーは出ません。
インポートが済むと、「記録」というシートが一つ追加された状態になるはずです。
![](https://assets.st-note.com/img/1705455654039-dabqqArbyY.png)
スプレッドシートの名前は何でも結構ですが、このシート名は変えないでください。
以上でスプレッドシートの準備は終了です。
最後にブラウザのヘッダからURLを参照し、表示している時のURLおよびスプレッドシートIDを控えておいてください。
スプレッドシートIDは、URLでspreadsheets/d/と/editに挟まれた部分です。
~/spreadsheets/d/★スプレッドシートID★/edit
なお、WEB画面にあるリンクから参照する場合は、公開設定しておいてください。
スクリプトのコード記述
Googleドライブ内で、「新規」⇒「その他」⇒「GoogleAppsScript」を選んで「プロジェクト」ファイルを作成します。
![](https://assets.st-note.com/img/1705456219593-7hqKdAoi3w.png)
![](https://assets.st-note.com/img/1705456267379-fiFpgun0k2.png)
![](https://assets.st-note.com/img/1705456276899-wm5fADOVun.png)
プロジェクトファイルを開くと、デフォルトで「コード.gs」ファイルがあるので、コードエディタでこれを開いてこの中にスクリプトを記述します。
![](https://assets.st-note.com/img/1705456304389-nX87VLhDkk.png)
元のコードを削除した上で、以下のコードをコピー&ペーストし、「★スプレッドシート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から呼び出されて実行する関数★★★★
//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;
}
★スプレッドシートID★の書き換えを忘れないでください。
作業が済んだら保存します。
テンプレートのコード記述
スクリプトと同じプロジェクト内に、「INDEX.html」というテンプレートファイルを追加します。
ヘッダの「+」をクリックし、
![](https://assets.st-note.com/img/1705456747648-afxfIUiONr.png)
「HTML」を選択し、
![](https://assets.st-note.com/img/1705456783413-VfB4ixDJxP.png)
テンプレート名を「INDEX.html」として追加します。(この名称はスクリプト中で利用していますので、変えないでください)
![](https://assets.st-note.com/img/1705456829186-5m4jnycemk.png)
元のコードを削除した上で、記事の最後にある有料部分のコードを貼り付けます。
貼り付けたら、一旦保存して、デプロイします。
デプロイについて
以下の手順ですが、詳細はネットなどで確認ください。
エディタの上にある「デプロイ」ボタンをクリックし・・・
![](https://assets.st-note.com/img/1705502336704-oqzxGVh2CT.png)
「新しいデプロイ」をクリックし・・・
![](https://assets.st-note.com/img/1705502377617-fL3nyPFgAU.png)
ウェブアプリとしてのデプロイを選択します。
![](https://assets.st-note.com/img/1705502743465-P0IMSG71o0.png)
アクセス者が「自分」、アクセスできるのは「全員」にします。(Googleへログインしていない場合でも使える設定です)
![](https://assets.st-note.com/img/1705502499625-9584Gfh2jS.png?width=1200)
ここで「デプロイ」をクリックした後、誰がデプロイしているのか(自分のユーザ名をクリック)、デプロイを許可するか(許可、またはArrowをクリック)聞かれた後、最終的に完了します。
![](https://assets.st-note.com/img/1705502966359-wCsLsHBt5g.png)
最後にURLが表示されるので、控えておきましょう。
テンプレートのコードを記事の最後の有料部からどうぞ。
・コードは実装して稼働することを手元環境で確認しておりますが、環境によっては稼働しない場合もあるかもしれません。こうしたトラブル等をフォローできないため、申し訳ありませんが、不具合時に自己責任・自己解決で対応する事をご了承くださる方だけご利用ください。
・表示させたWEBページからボタンをクリックしても反応しない場合があります。そんな場合は「yahoo!検索」など先にブラウザを開いて、デプロイしたURLを改めて読み込む様にすると、稼働する場合があります。
・ブラウザから、WEBアプリのGPS情報利用の許可を求められた場合は、「許可」をお願いします。
・個人や小規模なグループ内での利用を想定しており、規模の大きなグループや商用での利用は想定しておりませんのでご注意下さい。
テンプレートのコードからは、以下のノウハウが得られます。
■GPS情報を取得するJavaScriptのwatchPosition関数の実装例
■watchPosition関数の返り値を、JavaScriptの無名関数で処理した例
■watchPosition関数を適当なインターバルをとって利用する例
■ブラウザ画面をスリープさせないJSライブラリ「NoSleep」の実装例
■WEBページからスクリプト内の関数を操作する、GAS専用のJavaScript関数google.script.runの実装例
■上記でスクリプト内の関数の返り値をWEBページに反映させるコードの実装例
万一うまく稼働しなかった場合は、上のノウハウが参照できることでご容赦願いますm(_ _)m。(多くの行に説明をコメントしているので、意味するところは判ると思います)
![](https://assets.st-note.com/img/1705503577875-cErRQGXGdz.png)
←前の記事
ここから先は
¥ 300
この記事が気に入ったらサポートをしてみませんか?