GASをフル活用して有給管理システムを自作する〜利用コードと実際画面フロー〜

GAS
2019.04.16
この記事は約8分で読めます。
スポンサーリンク
もしも_楽天

読んで欲しい人

  • GASを使ってみたい人
  • 有給管理システムが必要だが手をつけられていない方
  • コストゼロで有給管理を行いたい会社
  • GASを中心にした内部システム構築を行なっている方

注意事項

今回の記事では出来上がりのイメージや実際のコードのみを表示しています。そのため、フォームやSSの設計・設定やSlackBotの登録などについては、後日コードの説明をする際に、詳細に説明はします。今回は画面だけみてわかる人及びコードの参考にしてもらうためのものです。

実際動作イメージ

Step1: botから申請Formを呼び出す

Step2:　Formに入力する

Step3: 承認者に有給申請のメールが飛ぶ

Step4: メール内の承認する・否認するのクリックに応じてHtml表示をする

Step5: 有給申請者に承認・否認の結果通知メールが飛ぶ

上記の流れで、基本メールベースにしてありますが、Form入力→申請通知→承認結果報告→申請者へのメール通知、というWFプロセスが完了しました。

申請案件やステータス等はSSに集約されるようにしてあります。（GoogleFormの入力結果シートを改修）

有給申請管理シート

申請者ID（今回は社員番号を識別値として利用）をベースに、承認者メアドを特定する社員マスタもSS上に設置しておくことで、申請者に応じた相手先にメールが飛びます。

mail_adress_masterシート

個人別の有給休暇残数及び当期有給取得数は別シートで一覧表示

コード

GASは以下のコード群（今回はSlack使う等を指定ないため、function3つで処理できています）を表示します。

function sendMessage(e) {
  /*
  <summary>
  　Formで登録された内容をeパラメタとして受け取り、SS上から必要データを取り出して、
   承認者向けにメールを送付する。メールの内容として、承認・否認の選択肢を付与する。
   SSには登録されたデータのStatusを”申請中”として登録する
  */
  
  //eパラメタ等から対象シートのRowを取得、ついでにSSに申請中と登録
  var row = e.range.getRow();
  var sheet = SpreadsheetApp.openById("XXXX").getSheetByName("有給申請管理");　//XXXXをSSのIDへ変更
  sheet.getRange(row,8).setValue("申請中");
  
  // メールに貼り付けるBodyをgenerateBody関数から作成
  var bodies = generateBody(e.values);
  
  // urlはこのGASをウェブアプリで公開した、アドレス＋パラメータとして、rowとanswerをつける
  var url = "https://script...."+ "?row=" + row +"&answer=";　//https:...以下ををスクリプトをウェブアプリケーションとして公開した際に表示されるURLへ変更
  
  
  //承認者のメアドを取得。事前にシート対象セルに計算式をはめ込む（ここは、GAS上で条件分岐を入れて検索してもOK）
  sheet.getRange(row, 9).setValue("=if(G"+ row +"=\"全日\",1,0.5)");
  sheet.getRange(row, 10).setValue("=lookup(B"+ row + ",mail_adress_master!A:A,mail_adress_master!C:C)");
  sheet.getRange(row, 11).setValue("=lookup(B"+ row +",mail_adress_master!A:A,mail_adress_master!D:D)");
  var approver = sheet.getRange(row,11).getValue(); 
  
  var recipient = approver;
  var subject = "有給休暇取得申請のお知らせ";

  var body = "";
  body += '有給休暇取得申請がありました\n\n';
  body += bodies.plane;
  body += "承認する場合は以下をクリック";
  body += url + "ok";
  body += "承認しない場合は以下をクリック";
  body += url + "ng";
  
  var html ="";
  html += '<h1>有給休暇取得申請のお知らせ</h1>';
  html += '<p>以下の有給休暇取得申請がありました</p>';
  html += bodies.html;
  html += "<p>承認する場合は、<a href="+ url + "ok>【承認する】</a>をクリックしてください</p>"
  html += "<p>承認しない場合は、<a href="+ url + "ng>【否認する】</a>をクリックしてください</p>"
  
  GmailApp.sendEmail(recipient, subject, body, {htmlBody:html});
  
}



function doGet(e){
  /*
  <summary>
  　承認者がメールで選択したのち、選択した結果をSSのStatus項目に反映する。
   また、申請者には結果をメールする。そして、承認者には選択した結果をブラウザ画面で表示する
  */
  
  var row = e.parameter.row;
  var sheet = SpreadsheetApp.openById("XXXX").getSheetByName("有給申請管理"); //XXXXをSSのIDへ変更
  var values = sheet.getRange(row, 1, 1, 7).getValues()[0];
  Logger.log(values);
  
  var bodies = generateBody(values);
  var answers = e.parameter.answer;
  var result = {
    ok:"承認",
    ng:"否認"
  };

  var recipient = values[5];
  
  if(answers){
  sheet.getRange(row, 8).setValue(result[answers]);
 
  var subject = "有給休暇取得申請" + result[answers] +"のお知らせ";
  var body = "";
  body += '以下の有給休暇取得申請が'+ result[answers] +'されました。\n\n';
  body += bodies.plane;
  
  var html = '';
  html += '<h1>有給休暇取得'+ result[answers] +'のお知らせ</h1>';
  html += '<p>以下の有給休暇取得申請が'+ result[answers] +'されました。</p>';
  html += bodies.html;
    
  GmailApp.sendEmail(recipient, subject, body, {htmlBody:html}); 
  
  var html = '';
  html += '<h1>有給休暇取得申請の'+ result[answers] + '</h1>';
  html += '<p>あなたは以下の有給休暇取得申請を'+ result[answers] +'しました</p>';
  html += bodies.html;
  
  return HtmlService.createHtmlOutput(html);
  };
}

function generateBody(values){
  
  var staff_num = values[1];
  var staff_name = values[2];
  var date = values[3];
  var hours = values[6];
  
  var plane = "";
  plane += '社員番号: ' + staff_num + '\n';
  plane += '氏名: ' + staff_name + '\n';
  plane += '有給取得日: ' + date + ' \n';
  plane += '時間: ' + hours + '\n';
  
  var html = '';
  html += '<ul>';
  html += '<li>社員番号: ' + staff_num + '</li>';
  html += '<li>氏名: ' + staff_name + '</li>';
  html += '<li>有給取得日: ' + date + ' </li>';
  html += '<li>時間: ' + hours + '</li>';
  html += '</ul>';
  
  return {plane:plane, html:html};
}

まとめ

今回は解説も何もなしで、実際画面およびコードだけを載せました。解読いただきつつ、何よりGASだけで簡易なワークフローシステムは構築可能だということを理解していただければと思います。追加コストの支出を嫌がる会社も多いでしょうから、自前でメンテナンスできるGAS能力を身につけつつ、有給取得管理くらいは自前で作ってみてもいいかと思います。

次回以降実際の設計や設定の解説や、コードの説明をしていきます。

また、追加機能として、①メール内容のリッチ化②Slackへの有給未取得者通知③承認者が承認してくれない場合のSlack通知、などを導入していく予定です。

連載目次： GASで有給取得申請管理

  1. GASをフル活用して有給管理システムを自作する
  2. GASをフル活用して有給管理システムを自作する〜利用コードと実際画面フロー〜
  3. 【コード解説シリーズ】GASをフル活用して有給管理システムを自作する〜まずは設定から〜
  4. 【コード解説シリーズ】GASをフル活用して有給管理システムを自作する〜申請者がForm登録したタイミングで承認者にメールを送る（GAS htmlメールの設定とトリガー設定）〜
  5. 【コード解説シリーズ】GASをフル活用して有給管理システムを自作する〜承認者がメールの承認・否認を選択→申請者へ結果通知、承認者へ完了Web画面表示〜
スポンサーリンク