doGet(e)の内容を２つ組み込みたい

実現したいこと

google APP Scriptでwebアプリでストップウォッチ機能を作成しました。

　登録(submit)ボタンを起点に計測したタイムをスプレに記入すると同時に、
入力した名前や番号も一緒にスプレに記入したいと
考えています。

[ ]現在、番号、名前は登録できるようになったのですがタイムがスプレに反映されません。

前提

https://somachob.com/stopwatch-spreadsheet/
上記のページを参考にストップウォッチを作成しました
ストップウォッチのjs.html は上記URLを見て作成していますが、
ここには記入していません。ストップウォッチ自体は正常に動作します

ただ、ストップウォッチ以外にも入力事項があり、それも一緒に
スプレッドシートへ書き込みをしたいと思っています

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7     <div class="timer">00:00.000</div>
8    <div class="check">
9    <button class="start-stop">スタート</button>
10    <button class="reset">リセット</button>
11    </div>
12    <?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
13    　　<hr>
14	<div>
15	<form>
16        <div class="form-group">
17	<label for="member-id"> 番号</label>
18        <div class="form-text">
19	<input type="text" name="number"required placeholder="半角数字" pattern="^[0-9A-Za-z]+$"class="txt"id="member-id" onchange="outputMemberName(this.value)">
20　　　</div>
21        </div>
22	<div class="form-group">
23　　　<label for="member-name">名前</label>
24          <div class="form-text">
25	<input type="text" class="txt" readonly="true" id="member-name">
26	</div>
27        </div>
28        </hr>
29        <hr>
30	<div class="wrap">
31	<input type="button"class="submit" onClick="addBtnClick()" value="登録する">
32	</div>  
33	 </form>
34     　 </hr>
35	</div>
36
37<script>
38      // -----------------------------------------------------
39      // メンバーIDからメンバー名を取得してインプットボックスmember-nameへ出力する関数
40      // *js関数1
41      // -----------------------------------------------------
42      // 引数:メンバーID
43      function outputMemberName(memberId) {
44        // memberIDを引数にしてgetMemberName（*gs関数3）を実行する
45        // getMemberNameが成功したら…
46        // 返り値がある場合はインプットボックスmember-nameへ返り値を出力し、否ならばインプットボックスをリセットする
47        google.script.run.withSuccessHandler(function(memberName){
48          if (memberName) {
49            document.getElementById('member-name').value = memberName;
50          } else {
51            document.getElementById('member-name').value = '';
52          }
53        }).getMemberName(memberId);
54      }
55      // -----------------------------------------------------
56      
57      // -----------------------------------------------------
58      // 「登録するボタン」をおしたときの関数 *js関数2
59      //  補足）二重サブミットを防ぐためにsubmitでフォームを送る仕様にしないことにした
60      // -----------------------------------------------------
61      function addBtnClick() {
62        // 実行してよいか確認する
63        const checkAddFlg = window.confirm('登録を実行してもよろしいですか？');
64
65        if(checkAddFlg) { //OKをクリックしたら…
66          // フォームの入力値を取得する 
67          const memberId = document.getElementById('member-id').value;
68          const memberName = document.getElementById('member-name').value;
69
70          // 取得した入力値を引数にしてaddData（*gs関数4）を実行する
71          // addDataが成功したら、js関数dataAddSuccess（*js関数3）を実行する
72          // addDataが失敗したら、js関数dataAddFail（*js関数4）を実行する
73          google.script.run.withSuccessHandler(dataAddSuccess).withFailureHandler(dataAddFail).addData(memberId, memberName);
74        } else {
75          alert("登録をキャンセルしました");  
76        }
77      }
78
79      // -----------------------------------------------------
80      // addBtnClick（*js関数4）においてaddData（*gs関数4）が成功した時の関数
81      //  *js関数3
82      // -----------------------------------------------------
83      function dataAddSuccess() {
84        // アラートを表示し、入力フォームの値をリセットする
85        alert("登録に成功しました");
86        document.getElementById('member-id').value = '';
87        document.getElementById('member-name').value = '';
88      }
89      // -----------------------------------------------------
90
91      // -----------------------------------------------------
92      // addBtnClick（*js関数4）においてaddData（*gs関数4）が失敗した時の関数
93      //  *js関数4
94      // -----------------------------------------------------
95      function dataAddFail() {
96        // アラートを表示する
97        alert("登録に失敗しました");  
98      }
99      // -----------------------------------------------------
100
101	  </script>
102
103  </body>
104</html>
105

sample.js
1// -----------------------------------------------------
2// アプリを開いた時に実行する関数（index.htmlを表示する） *gs関数1
3// -----------------------------------------------------
4function doGet(e) {
5  let page = e.parameter.page;
6  if (!page) {
7    page = 'index';
8  }
9  return HtmlService.createTemplateFromFile(page).evaluate();
10}
11// -----------------------------------------------------
12
13// -----------------------------------------------------
14// スプレッドシートアプリからシートを取得する関数 *gs関数2
15// -----------------------------------------------------
16// 第一引数:スプレッドシートID、第二引数:シート名
17function getSheet(ssId, ssName){
18  // スプレッドシートを取得
19  const ss = SpreadsheetApp.openById(ssId);
20  // 指定されたシート名からシートを取得してリターン
21  const sheet = ss.getSheetByName(ssName);
22  return sheet;
23}
24// -----------------------------------------------------
25
26// -----------------------------------------------------
27// メンバーIDからメンバーの名前を取得する関数 *gs関数3
28// -----------------------------------------------------
29// 引数:照合させるメンバーID
30function getMemberName(val) {
31  // 関数getSheet(*gs関数2)を呼び出してスプレッドシート「サンプルマスタ」からシートオブジェクトを取得
32  const sheet = getSheet('***************************************', 'シート1');
33  // シートの最終行を取得
34  const lastRow = sheet.getLastRow();
35
36  // シートの2行目から最終行まで繰り返し処理
37  for (let i = 2; i <= lastRow; i++) {
38    // 1列目のi行目の値を取得し変数memberIdへ格納
39    const memberId = sheet.getRange(i, 1).getValue();
40    // memberIdがvalと等しければ、2列目i行目の値（memberName）を返す
41    if (String(memberId) === val) { // 修正
42      const memberName = sheet.getRange(i, 2).getValue();
43      return memberName;
44    }
45  }
46}
47// -----------------------------------------------------
48
49// -----------------------------------------------------
50// フォームの入力内容をスプレッドシートへ書き込む関数 *gs関数4
51// 補足）二重サブミットを防ぐためにdoPost(e)を使わない仕様にした
52// -----------------------------------------------------
53// 第一引数:メンバーID、第二引数:メンバー名、第三引数:区分、第四引数:数値、第五引数:内容
54function addData(memberId, memberName) {
55  // 関数getSheet(*gs関数2)を呼び出してスプレッドシート「サンプルテーブル」からシートオブジェクトを取得
56  const sheet = getSheet('***********************************', 'シート1');
57  // 登録日として現在の日時を取得する
58  const createdDate = new Date();
59  // シートの最終行に値を書き込む
60  sheet.appendRow([memberId, memberName]);
61  
62  // 通知メール用の本文を生成する
63  const mailMsg = `
64    ${memberName}さん（${memberId}番）がデータを登録しました。
65    登録日時：${createdDate}
66  `;
67  // 関数sendEmail(*gs関数5)を呼び出してメールを送信する
68  sendEmail(mailMsg);
69
70}
71// -----------------------------------------------------
72
73// -----------------------------------------------------
74// メールを送信する関数 *gs関数5
75// -----------------------------------------------------
76// 引数:メール本文
77function sendEmail(mailMsg) {
78  GmailApp.sendEmail("********@google.com", "【テスト】", mailMsg);
79}
80// -----------------------------------------------------

発生している問題・エラーメッセージ

該当のソースコード

下記コードを追加でAPPscriptへ追加し、新規でデプロイしたら
doGetが既に宣言されていますと出てしまいます
スプレッドシートのIDも全て記入済みです.
IDはcode.gsとsample.jsのサンプルテーブルからシートオブジェクトを取得のIDは同じものを使用しています。

code.gs
1const doGet = () => {
2  return htmlOutput = HtmlService.createTemplateFromFile("index")
3      .evaluate()
4      .setTitle("ストップウォッチ")
5      .addMetaTag("viewport", "width=device-width,initial-scale=1");
6};
7
8//時間をスプレッドシートに書き込み
9const setTime = (time) => { 
10  //表示形式の加工
11  const sec = Math.floor(time / 1000);
12  const minSec = Math.floor(time/(60*1000)) + "分" + Math.floor(time%(60*1000)/1000) + "秒" ;
13
14  //書き込み用の配列を作成
15  const array = [new Date(),time,sec,minSec];
16
17  //データ書き込み用シートの指定
18  const ss = SpreadsheetApp.openById("********************************");
19  const sheet = ss.getSheetByName("シート1");//スプレッドシートのシート名 
20
21  //データの書き込み
22  sheet.appendRow(array);
23};
24

試したこと

ここのコードにつけ加えてみました

sample.js
1
2function addData(memberId, memberName) {
3  .setTitle("ストップウォッチ")//←エラーと出ます
4      .addMetaTag("viewport", "width=device-width,initial-scale=1");
5const setTime = (time) => { 
6  //表示形式の加工
7  const sec = Math.floor(time / 1000);
8  const minSec = Math.floor(time/(60*1000)) + "分" + Math.floor(time%(60*1000)/1000) + "秒" ;
9
10  //書き込み用の配列を作成
11  const array = [new Date(),time,sec,minSec];
12
13  const sheet = getSheet('***********************************', 'シート1');
14  // 登録日として現在の日時を取得する
15  const createdDate = new Date();
16  // シートの最終行に値を書き込む
17  sheet.appendRow([memberId, memberName]);

追加したところがエラーと出てしまいます
知識が乏しくわかる方ご教授いただけると嬉しいです

行動規範の内容に同意します

回答1件

ベストアンサー

シートへの書き込み処理は、index,htmlのaddBtnClick()内で行われているので、ここにストップウォッチの時刻を書き込むようにすればよいと思います。

index.html
1＜略＞
2      function addBtnClick() {
3        // 実行してよいか確認する
4        const checkAddFlg = window.confirm('登録を実行してもよろしいですか？');
5
6        if(checkAddFlg) { //OKをクリックしたら…
7          // フォームの入力値を取得する 
8          const memberId = document.getElementById('member-id').value;
9          const memberName = document.getElementById('member-name').value;
10          const timerResult = getTimerResult();  // 追加
11          // 取得した入力値を引数にしてaddData（*gs関数4）を実行する
12          // addDataが成功したら、js関数dataAddSuccess（*js関数3）を実行する
13          // addDataが失敗したら、js関数dataAddFail（*js関数4）を実行する
14          google.script.run.withSuccessHandler(dataAddSuccess).withFailureHandler(dataAddFail)
15            .addData(memberId, memberName, timerResult);  // 修正
16        } else {
17          alert("登録をキャンセルしました");  
18        }
19      }
20
21      /***  追加：日付とstopウォッチの時刻を返す関数 ***/
22      const getTimerResult = () => { 
23        const timerDisplayString = document.querySelector(".timer").innerHTML;
24        const splitString = timerDisplayString.split(":");
25        const min = parseInt(splitString[0]);
26        const sec = parseInt(splitString[1].split(".")[0]);
27        const milliSec = parseFloat(splitString[1].split(".")[1]);
28        const minSec = min  + "分" + sec  + "秒" ;
29        return [timerDisplayString, sec, minSec];
30      }
31＜以下略＞

index.html から addData関数を呼び出す時の引数を追加したので、受け取る側の関数本体（code.gsのaddData）と、その中でシートに書き込む部分を修正します。

code.gs
1＜略＞
2// 第一引数:メンバーID、第二引数:メンバー名、第三引数: 日付とストップウォッチの時刻の配列
3function addData(memberId, memberName,timerResult) {
4  // 関数getSheet(*gs関数2)を呼び出してスプレッドシート「サンプルテーブル」からシートオブジェクトを取得
5  // const sheet = getSheet('***********************************', 'シート1');
6  const sheet = getSheet(SSID, 'シート1');
7
8  // 登録日として現在の日時を取得する
9  const createdDate = Utilities.formatDate(new Date(), 'Asia/Tokyo','YYYY/MM/dd');
10  // シートの最終行に値を書き込む
11  sheet.appendRow([String(memberId), String(memberName), createdDate, ...timerResult]);
12
13＜以下略＞