今回製作したwebアプリのほとんどはChatGPTなどの生成AIに助けてもらいました。
目標は見えていても、それに対してどんなスクリプトが必要か知識がなかったので、生成AIをふんだんに利用。
しかし教えてくれたコードをそのまま使っても始めから上手く動作するわけでもなく・・・
生成AI×プログラム初心者の二人三脚(AIに脚があるかはさておき)で製作。
東西東西
「会社の(出退勤報告)ツール作ってみたら？」
できることは増やしたいのでとりあえずやってみようと、始めてみました。
前職で自分の業務改善のために初めて触ったGoogleAppsScript(以下GAS)。
「こういうもの」とほとんど覚えているので、理屈は理解してない箇所が多いです。
目標はこちら
●GASのdoGetとdoPostを使ってHTMLファイルと連携
●フリーメモ欄を用意する
●出勤、退勤ボタンがクリックで切り替わるようにする
●出勤、退勤ボタンが押されるとそれらをスプレッドシートに送信する
●同時にGoogleチャットにも送信する
求められることができるか不安でしたが、
まずはちょっとずつ目標を達成していきます。
今回はこちらを試してみます。
●GASのdoGetとdoPostを使ってHTMLファイルと連携
●出勤、退勤ボタンが押されるとそれらをスプレッドシートに送信する
●同時にGoogleチャットにも送信する
まず初めからつまづきました。
doGet・doPostがわかりません、さっそくAIに聞いてみます。
「doGet」と「doPost」は、Google Apps Script（GAS）でよく使われる関数で、ウェブアプリケーションとしてスクリプトを公開する場合に使用します。これらは、HTTPリクエスト（GETやPOST）に対するエントリーポイント（入り口）として動作します。
今回のやりたいことは、
「出勤」「退勤」を押す（doGetで表示）
⇒スプレッドシートに書き込み、同時にGoogleチャットに送信する（doPost）
なので、
まずは外部ファイルのHTMLを作成してみます。
HTMLは昔にほんの少しだけ触ったことがありますがあまり覚えていないので、
検索やAIを頼り一旦、出退勤ボタンだけ用意しました。
▼hogehoge.html
<!DOCTYPE html>
<html>
<head>
<html lang="jp">
<base target="_top">
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>出退勤連絡</h1>
</header>
<main>
<div>
<button class="s-button" id="selectS">出勤</button>
<button class="t-button" id="selectT">退勤</button>
</div>
</main>
</body>
</html>
doGetを用意しないとWebアプリを表示できないので、こちらもAIに聞いてみます。
深堀するために調べても、どのサイトも定型文のようになっているので必要な箇所だけ変更します。
▼コード.gs
function doGet(e) {
const template = HtmlService.createTemplateFromFile('実際のHTMLファイル名');
const htmlOutput = template.evaluate()
.setTitle('タブに表示される名前')
if (!e.parameter.page) {
return htmlOutput;
}
return HtmlService
.createTemplateFromFile(e.parameter.page).evaluate()
}
doPostでスプレッドシートに書き込むコードとチャットに送信するコードを用意するため、
AIに聞いて必要に応じて書き換えて対応します。
内容はボタンの値と送信した時間、送信者のメールアドレスを取得してスプレッドシートに書き込み、Googleチャットへ送信するdoPostです。
const ss = SpreadsheetApp.openById('スプレッドシートのID');
const webHookUrl = '実際のWebhook URL'
function doPost(e){
let sh = ss.getActiveSheet();
let email = Session.getActiveUser().getEmail();
let valueFromForm = e.parameter.value;
const time = new Date();
sh.appendRow([valueFromForm,email,time]);
let textData;
textData = `${email}さんが${valueFromForm}(${time})しました。`;
const options = {
'method': 'post',
'contentType': 'application/json; charset=UTF-8',
'payload': JSON.stringify({text : textData}),
}
Logger.log("Options: " + JSON.stringify(options));
UrlFetchApp.fetch(webHookUrl, options);
}
doPost内の「valueFromForm = e.parameter.value」でHTMLの「value」を取得するように宣言したので、
HTMLにも「出勤」「退勤」の値（value）を送信するよう加えます。
<!DOCTYPE html>
<html>
<head>
<html lang="jp">
<base target="_top">
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>出退勤連絡</h1>
</header>
<main>
<div>
<div class="btn">
<form method="post" id="hiddenValue">
<button onclick="setValue('出勤');" class="s-button" id="selectS">出勤</button>
<button onclick="setValue('退勤');" class="t-button" id="selectT">退勤</button>
</form>
</div>
</div>
</main>
</body>
</html>
<script>
function setValue(value) {
document.getElementById('hiddenValue').value = value;
let date = {
'value' : value,
}
console.log(date);
google.script.run.withSuccessHandler(function() {}).doPost({parameter: date});
}
</script>
「document.getElementById」でformタグのIDを取得し、doPostするようにしています。
デプロイをしてテストしてみます。
スプレッドシートの書き込みとチャットの送信はされましたが、
画面が白いままブラウザを更新しても戻らなくなってしまいました。
調べたところformタグが悪さをしているようなので別のタグに切り替えてみます。
<div>
<div class="btn">
<input type="hidden" name="value" id="hiddenValue" />
<button onclick="setValue('出勤');" class="s-button" id="selectS">出勤</button>
<button onclick="setValue('退勤');" class="t-button" id="selectT">退勤</button>
</div>
</div>
これで送信後も画面は維持され、
出退勤ボタンのクリックでスプレッドシートに書き込めるようになり、Googleチャットにも送信できるようになりました。
次は送信する内容を増やします。
次回の更新にご期待ください！
