GASで出退勤アプリを作った

2023/02/09

Google Apps Scriptで出退勤アプリを作りました。タイムカードの代替です。Googleアカウントを持っている人限定で各自のPCからボタンを押すことで時刻とアカウント（Gmailアドレス）がスプレッドシートに記録されます。

1 動作説明
2 スプレッドシートDBの準備
3 ソースコード]
4 実行

動作説明

以下が出退勤アプリの動作を動画にしたものです。[入室]ボタンを押すとスプレッドシートに日時、IN, Gmailアドレスをスプレッドシートに記録してくれることがわかると思います。また、入室ボタンを押した跡は退室ボタンに切り替わるので、どちらのボタンを押すかという人の判断は不要で機械的に作業ができます。

スプレッドシートDBの準備

このアプリを作るにあたって、以前紹介したスプレッドシートをデータベースのように扱うことができるGASを設置する必要があります。以下を参考に設置してください。

非IT企業に勤める中年サラリーマンのIT日記

【GAS】Googleスプレッドシートをデータベースにするプログラムを作った（２）

前回、Googleスプレッドシートをデータベースのように扱えるプログラムを作りましたが、今回はそのバージョンアップ版です。このプログラムの概要図のように１つのスプレッドシートをデータベース化して複数のユーザーからアクセスするような仕組みです。詳細は前回の記事をご覧ください。テーブルの内容はこんな感じです。１行目を項目行で、１列目は=row()を使って行番号を示しています。ソースコードGitHubにアップしていますので、そちらを参照ください。https://github.com/satoshi71/spreadsheet-db 今回...

ソースコードはGitHubに掲載しています。

https://github.com/satoshi71/spreadsheet-db

テーブル名（DBのスプレッドシート上のシート名）を「出退勤台帳」としました。フィールド名は「ID」「DateTime」「DIV」「USER」の４つです。

ソースコード]

GAS側のソースコードは以下のとおりです。最初（doGet関数）にデータベースの最後の記録を読みに行って、表示を入室ボタンか退室ボタンかを判断します。applyData関数はボタン押下後の処理となりデータベースに記録するプログラムです。

function doGet() {
  var t = HtmlService.createTemplateFromFile('index.html');

  let user = Session.getActiveUser(); // 実行者を取得
  let contact = ContactsApp.getContact(user); // 実行者の連絡帳データを取得
  let email = contact.getPrimaryEmail();   // メールアドレスを取得

  let data = db.readRecords('出退勤台帳',"USER='" +email+ "'", "ID");
  if(data!=null) data.reverse();
  
  if(data!=null && data[0][2]=='IN'){
    t.inout="out";
    t.text="退室";
  }else{
    t.inout="in";
    t.text="入室";
  }
  return t.evaluate();
}

function applyData(div){
  let user = Session.getActiveUser(); // 実行者を取得
  let contact = ContactsApp.getContact(user); // 実行者の連絡帳データを取得
  let email = contact.getPrimaryEmail();   // メールアドレスを取得
  let dt = new Date();
  let data = {'DateTime':dt,'DIV':div, 'USER':email　};
  let b = db.insertRecord('出退勤台帳', data);

  console.log(b);
}

HTML側のソースコードは以下の通りです。＜? ?＞でGASを埋め込んでいます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>出退勤</title>
    <style>
      .btn{
        width: 200px;
        height: 100px;
        text-align: center;
        line-height:90px;
        border: 1px solof #000;
        font-size: 28pt;
        font-weight: bold;
        margin-left: 10px;
        margin-top: 10px;
      }
      .in{
        background: #00f;  
      }
      .in:hover{
        background: #55f;
        cursor: pointer;
      }
      .out{
        background: #f00;  
      }
      .out:hover{
        background: #f55;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="btn <?=inout?>" id="enter"><?=text?></div>

    <script>
      let button = document.getElementById('enter');
      
      button.addEventListener('click', event => {
        let status = button.textContent;
        if(status == '入室'){
          // alert(button.textContent)
          button.className = 'btn out';
          button.textContent = "退室";
          google.script.run.applyData("IN");
        }
        if(status == '退室'){
          button.textContent = '入室';
          button.className = 'btn in';
          google.script.run.applyData("OUT");
        }
      });
    </script>
  </body>
</html>

実行

GASをウェブアプリケーションとして実行する方法は以下をご覧ください。冒頭で紹介した動作になるはずです。

非IT企業に勤める中年サラリーマンのIT日記

Google Apps Scriptでデプロイしてウェブアプリとして公開する方法【2021年更新】

基本的なことですが最近GASのエディターのUIが見直されて、デプロイの手順が少し変わったので書き直します。まず、スクリプトエディタ−の画面右上に「デプロイ」というボタンがあるのでそれをクリックすると以下のようなプルダウンメニューが現れます。その中から「新しいデプロイ」を選びましょう。以下のウィンドウが現れるので歯車アイコンをクリックし、プルダウンメニューから「ウェブアプリ」を選びます。以下のウィンドウが現れます。説明文を記載の上（入力しなくてもOK）、アクセスできるユーザーを選択したら「...

GASで出退勤アプリを作った

動作説明

スプレッドシートDBの準備

ソースコード]

実行

共有:

関連