質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

accra
accra

総合スコア1

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

3クリップ

384閲覧

投稿2022/10/25 11:11

前提

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]の値が上手く取得できませんでした。プログラミングやシステム開発自体始めたばかりでネット検索以外頼れるものもなかったのでどうかお力を貸して頂きたいです、よろしくお願い致します。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

総合スコア2109

qnoir, accra👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

qnoir

2022/10/25 13:47 編集

<!-- <?!= HtmlService.createHtmlOutputFromFile('style').getContent(); ?> --> のところは消し忘れでしょうか? GASのテンプレートエンジンはコメント化した部分も愚直にパースしてしまいます。 多分質問者さんの環境だとエラーになりますね。
Cocode

2022/10/25 13:49

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

2022/10/25 22:33

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

0

例えば出勤の時
.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}

といった感じで処理すればいいのではないでしょうか

投稿2022/10/25 13:12

YAmaGNZ

総合スコア9439

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

accra

2022/10/25 22:24

ありがとうございます、お陰様で無事に解決できました。勉強を続けていつかはここの皆様に恩返しできるよう精進して参ります。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。