gasのwebアプリにてテキストフォームの内容と別の文字をwebアプリ側もしくはgasのスクリプトで一括してスプレッドシートに書き込みたいです

前提

gasのwebアプリで会社の勤怠管理システムを作成しているのですがwebアプリのテキストフォームからの社員証id取得とgasのスクリプトによる"出勤"と現在時刻の書き込みを同時に行っており処理の順番がバラバラでスプレッドシート上で行が合ったりズレたりするのを何とかしたいです。シートへの書き込みはwebアプリからappendrow,gasからはLastRow取得からのsetvalueで行っています。appendrowが先に処理されれば合うのですが当然後になると行がずれます。

実現したいこと

そもそもwebアプリのテキストフォームからiのd取得、そして"出勤"、打刻をwebアプリ側もしくはgas側で一括してスプレッドシートにappendrowしたい

javascript


<script type="text/javascript">
  function sendText(){
      google.script.run
        .withSuccessHandler(inform())
       
      //webアプリのテキストフォームに記入された番号リスト内容を書き込む
        .writeSheet(document.forms['formText'].elements['message'].value
     //gasで"出勤"と現在時刻を書き込むスクリプト
      google.script.run.syukkin();
      
    }  
    function inform() {
      alert('スプレッドシートに書き込みました');
    }
    }

</script>

gas

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
  htmlOutput.setTitle("出退勤");
  return htmlOutput;

}

function openSheet() {
  var id = "スプレッドシートのid";
  var ss = SpreadsheetApp.openById(id).getSheetByName("データ");
  let lastrow = ss.getLastRow()
  return ss;
}

function writeSheet(e) {
  var ss = openSheet();
  let lastrow = ss.getLastRow()
  ss.appendRow([e]);

function syukkin(){
  const sheat = SpreadsheetApp.openByUrl("スプレッドシートのurl").getSheetByName("データ"); 

  let date = new Date();
  let lastrow = sheat.getLastRow()

sheat.getRange(lastrow,4).setValue(date)
sheat.getRange(lastrow,3).setValue("出勤")

試したこと

javascript,gas双方でsleepやthread等片方の処理を遅延させる方法を試してみたが遅延されなかったり遅延されてもgetrangeは処理開始時に取得されてしまっていたりと上手くいきませんでした。gasからappendrow([e],,["出勤"],[date])というような形が一番理想に近づいたがwebアプリから[e]の値が上手く取得できませんでした。プログラミングやシステム開発自体始めたばかりでネット検索以外頼れるものもなかったのでどうかお力を貸して頂きたいです、よろしくお願い致します。

Cocode

2022/10/25 11:15

writeSheet(e) と　syukkin()関数のとじカッコ } がないですがエラー起きてないでしょうか？

accra

2022/10/25 11:18

失礼致しました、ここに貼り付ける際に抜けてしまっただけですのでエラーは起きてないです。ご指摘ありがとうございます。

Cocode

2022/10/25 11:27 編集

よかったです！処理の流れを確認させてください🙇‍♀️ ①webアプリから「社員ID」と「出勤」の情報が送信される ②GASで現在時刻を取得する ③スプレッドシートに1行で「社員ID」「出勤」「時刻」を出力する ※ただし、現時点では1行で出力できず、複数行に分かれてしまっているので修正したい。ということでしょうか？

accra

2022/10/25 11:37

①は正確にはwebアプリから社員idのみ送信しており「出勤」と別に「退勤」もあるのですがwebアプリ上のボタンで呼び出すgasのスクリプトを分けています。₍"出勤"と"退勤"の文字が変わるだけですが₎ 後は仰る通りです、アプリから取得した「社員id」とgasで書き込む「出勤」と「時刻」がおそらく処理の順によってズレたりズレなかったりするので必ず1行で合うように修正したいです。よろしくお願い致します。

Cocode

2022/10/25 11:49

回答ありがとうございます。検証してみます。

accra

2022/10/25 11:53

ありがとうございます、お手数おかけ致します。

YAmaGNZ

2022/10/25 11:59

javascript側でのwriteSheetの呼び出しとsyukkinの呼び出しを分ける必要があるのでしょうか？

accra

2022/10/25 12:08

回答ありがとうございます。仰る通り分けるからズレが起きてしまっているので何とかどちらかでまとめたいのですがお恥ずかしいことにgas側でアプリのテキストフォームを取得したりwriteSheatでまとめて書き込む方法が試行錯誤してもできずに質問させて頂いた次第です。

YAmaGNZ

2022/10/25 12:27

writeSheatの引数に社員IDだけではなく出勤・退勤のフラグを渡すなり syukkinの引数で社員IDを渡すなり方法があるかと思います。

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

回答2件

ベストアンサー

webアプリ側で「社員ID」と「出勤or退勤」の情報を取得し、GAS側に送信
GAS側で現在日時を取得し、「現在日時」「社員ID」「出勤or退勤」をシートに出力（最終行に1行追加）

javascript:Code.gs
1function doGet() {
2  return HtmlService.createTemplateFromFile("index").evaluate();
3}
4
5/**
6 * Webアプリから受け取ったデータを、スプレッドシートに出力する関数
7 * @param {string} empId - 社員番号
8 * @param {string} stts - 出勤or退勤
9 **/
10function writeData(empId, stts) {
11  const ss = SpreadsheetApp.openById('スプレッドシートのID');
12  const sheet = ss.getActiveSheet(); // スプレッドシート内に複数シートがあるなら、.getSheetByName()などで指定してください
13  const date = new Date();
14  
15  // スプレッドシートに、社員ID、日時、出勤or退勤の情報を最終行に追加
16  sheet.appendRow([empId, date, stts]);
17}

html:index.html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6</head>
7
8<body>
9  <h1>出退勤管理</h1>
10
11  <label for="employee-id">社員ID</label><input type="text" id="employee-id" required>
12  <input type="button" value="出勤">
13  <input type="button" value="退勤">
14
15
16  <script>
17    // 出勤・退勤ボタン要素を取得
18    const btns = document.querySelectorAll('input[type=button]');
19
20    // ボタンを押した時のイベントを設定
21    btns.forEach(btn => btn.addEventListener('click', submitData, false));
22
23    /**
24     * データを送信する関数
25     * （社員ID、出勤or退勤の情報をGASに送信）
26     * @param {object} e - イベントオブジェクト
27     **/
28    function submitData(e) {
29      const employeeId = document.querySelector('#employee-id').value; // 社員ID
30      const status = e.target.value; // 押したボタンの値（出勤or退勤）
31      
32      // 打刻確認ポップアップ
33      const response = confirm(`${status}時刻を打刻しますか？`);
34
35      // 確認で「Cancel」なら、
36      if (!response) {
37        alert('キャンセルしました。'); // キャンセルのお知らせポップアップを表示し、
38        return; // ここで関数の実行を終了
39      }; 
40
41      // 確認で「OK」なら、
42      // GASのwriteDate()関数を実行（引数：社員ID、出勤or退勤）
43      // それが成功したらinformCompletion()関数を実行
44      google.script.run.withSuccessHandler(informCompletion).writeData(employeeId, status);
45    }
46
47    function informCompletion() {
48      // 打刻完了のお知らせポップアップ
49      alert('打刻を完了しました。');
50    }
51  </script>
52</body>
53
54</html>

投稿2022/10/25 13:21

編集2022/10/25 14:01

Cocode

総合スコア2314

退会済みユーザー

2022/10/25 13:47 編集

のところは消し忘れでしょうか？ GASのテンプレートエンジンはコメント化した部分も愚直にパースしてしまいます。多分質問者さんの環境だとエラーになりますね。

Cocode

2022/10/25 13:49

ご指摘ありがとうございます！削除しました。

accra

2022/10/25 22:33

とても丁寧にありがとうございます、無事に理想の形にできました。querySelectorというのは自分で調べてる最中にも何度か目にしましたがよくわからなかったのでこれから詳しく勉強して行こうと思います。学ばせて頂いた事をしっかり身に付けていつかは皆様のように誰かに教える立場になれる様に精進して参ります。改めまして本当にありがとうございました。

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

例えば出勤の時
.writeSheet(document.forms['formText'].elements['message'].value,1)
退勤の時は
.writeSheet(document.forms['formText'].elements['message'].value,2)
と呼び出して

GAS側で

GAS
1function writeSheet(id,flag) {
2  let ss = openSheet();
3  let date = new Date();
4  if (flag == 1) {
5    ss.appendRow([id,date,'出勤']);
6  } else if (flag == 2) {
7    ss.appendRow([id,date,'退勤']);
8  }
9}