Google Apps Scriptで勤怠管理システム風なものを作る

Googleさんて無料でいろんなサービスを提供してくれて本当に助かります。 Google Apps Scriptも無料で試してみることができて、ウェブアプリも作れるなんてなんてこったい。

Google AppSheetっていうノーコードツールもあって、使用用途が合えば簡単にシステムが作れる！なんてこったい。AppSheetは余談でした。

Google Apps Scriptで勤怠管理システム風なものを作ってみました。 下記はGitHubにソースコードを置いていて、README.mdのほぼコピペです。

https://github.com/miyazaDaniels/gas-attendance-system

（ハードコーティングがあったり冗長な箇所があったりしてなんか恥ずかしいのですが、とりあえず公開しておこうと思います）

概要

Google Apps Scriptで勤怠の打刻ができるウェブアプリケーションです。Googleスプレッドシートを用意して使用します。

使用方法

新規Googleスプレッドシートの作成

1. 以下のような新規Googleスプレッドシートを作成します。

   • logシートには、date, id, name, statusの見出し項目のみ用意します。ウェブアプリケーションで打刻するとレコードが記載されます。
   • membersシートには、id, nameの見出し項目とデータを用意します。

2. スプレッドシートのメニューから、拡張機能 > Apps Scriptをクリックします。

Apps Scriptの作成

1. Apps Script上で「ファイルを追加」し、4つのファイルを準備します。このリポジトリのファイルから中身をコピーします。

   • コード.gs (= code.gs)
   • index.html
   • JavaScript.html
   • Stylesheet.html

2. コード.gsにあるSPREAD_SHEET_IDの値を作成したGoogleスプレッドシートのIDに変更します。（IDはURLに含まれています。https://docs.google.com/spreadsheets/d/[スプレッドシートのID]/edit）

3. 変更を保存します。

4. ウェブアプリとして「デプロイ」します。

動作確認

Apps Scriptのデプロイ時に表示されるURLにアクセスして、動作確認します。

参考サイト

参考にさせていただきました。ありがとうございます。

• https://tonari-it.com/gas-web-doget-html-output/
• https://qiita.com/Yami_37/items/b4ed2bd2e20ffe7dfbca
• https://myscreate.com/pure-modal/