【コード解説】GASをフル活用して有給管理システムを自作する

読んで欲しい人

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

前回までのおさらい

前回は申請者function sendMessage(e)の解説でした。Formで申請された内容に基づいて、承認者にメールを送る所まで解説してきました。

今回はdoGet(e)関数、承認者がメールの承認・否認をクリックした後に起こす動きに対応するコードを説明していきたいと思います。

対象コード

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);
  };
}

コード解説

メール承認・否認のクリックurlにパラメータを仕込んでいましたので、それを受け取って承認者に結果通知等をする部分が今回のコード概要になります。

function doGet(e){…..}

functionのあとは、自分で実装したい内容に応じて関数名を入力してきましたが、今回は特殊（もともと設定されている）関数名doGet()を利用します。

このような特別な関数は他に、関数doPost()があり、こちらはデータを送るときに利用します。データをPost/Getする（do）関数ということです。最初はPostやGetがイメージつかないかもしれませんが、HTTPの基礎は書籍やブログが多く出てますので、ぜひ一度ウェブの全般理解のために読んでいただくといいと思います。。

Event Objectについて

  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];

さて、今回のeパラメータ（event object値）はメールに添付されたurlで承認・否認のリンクをクリックした際に、urlに織り込んでいたものになります。

var url = "https://script...."+ "?row=" + row +"&answer=";

urlに含まれている”?”以降の値をパラメータといい、今回の場合は、row（何行目か）とanswer(承認か否認か）をクリックするurlに含めていました。この2つの値が、eの中に含まれています。rowには数値(int)が、answerには文字（str: “ok” or “ng”)を設定していました。

上記eを用いて対象の行数と承認・否認を以下の部分で取り出しています。

var row = e.parameter.row;

var answers = e.parameter.answer;

また、この後メール本文中で、承認・否認を判定して表示するために、以下の連想配列（オブジェクト）を作成します。

var result = {
    ok:"承認",
    ng:"否認"
  };

if文による条件分岐

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);
  };

今回if文を利用して、回答するためのデータが取得されているか否かのチェックをしています。下記部分です。

if(answers){
....
}

if(answers)とすることで、answersに何らか値が含まれている場合、つまりイベントオブジェクトから承認者の選択がデータに含まれている場合、Trueが返されて処理が実施されます。

後は、if文内でsubject/body/htmlを作成して、メール送付およびhtml表示を行います。メール送付については、前回見ていきましたので、今回はHtmlServiceクラスを見ていきます。

HtmlService.createHtmlOutput(html)

HtmlServiceクラスは名前の通りHTML表示をするためのクラスです。今回は承認者にメール本文をクリックしてもらった後に表示する画面を作成しています。

HtmlServiceクラスには主に2つのパターンのhtmlOutputが存在しています。

createHtml系（htmlをそのまま表示するパターン）
createTemplate系（テンプレートを別途作成しておき、そこに値を動的に当てはめる場合）

今回はcreateHtml系のcreateHtmlOutputを利用して、if文ないで作成したhtmlを表示しています。

今回は関係ありませんが、createTmplate系で作成する場合、多くはevaluateで値をテンプレートに織り込んでから表示させることになります。

まとめ

長かった有給申請管理のワークフローについては今回までです。このワークフロー実装を練習するすることで、formとの連携や、メール送付、htmlの表示など多くのことが実現できるようになります。

イベントオブジェクトなど少し理解に手間取る可能性のある項目もありますが、ぜひ身につけていただきたい内容です。

この実装を習得すると、経費申請・備品購入申請など多くのワークフロー系タスクがGASで実装できるようになります。

【コード解説シリーズ】GASをフル活用して有給管理システムを自作する〜承認者がメールの承認・否認を選択→申請者へ結果通知、承認者へ完了Web画面表示〜