gasでえげつなく雑なクリスマスまでのカウントダウンを実装する

GoogleAppsScript

Last updated at 2018-12-05Posted at 2018-12-04

1 / 13

GoogleAppsScript のトリガーを利用してクリスマスのカウントダウンメールを送信します。
メールは(雑に)装飾したいと思います。

tl;dr

GoogleAppsScript にトリガーを設定
クリスマスまでの残り日数を計算
リストアップされたメールアドレスへメールを送信

Step1

残り日数を取得するスクリプトを作る準備をします。
(ご存知の方は読み飛ばしていただいてかまいません。)

script.google.com にアクセス

Start Scripting をクリック

ここで、Googleアカウントにログインしていない場合は、ログインを要求されます。

ログインに成功すると、次のような画面が開きます。

ここに実行内容を入力していきます。

Step2

コードを入力していきたいと思います。
以下のコードをコピペしてください。

コード.gs

function sendNotification(){  
  var d = new Date();
  
  var htmlTemplate = HtmlService.createTemplateFromFile("notificationTemplate");
    
  htmlTemplate.remaindingDays = calculateRemaindingDays(11, 25);
  
  var htmlMessage = htmlTemplate.evaluate().getContent();
  
  // 送信先を配列でリストアップ
  var adressList = [
    "testmail1@example.com",
    "testmail2@example.com"
  ]
  
  MailApp.sendEmail({
    to: adressList.join(","),
    subject: "カウントダウン",
    body: "",
    htmlBody: htmlMessage
  });
}

function deleteTrigger() {
  var allTriggers = ScriptApp.getProjectTriggers();
  for (var i = 0, l = allTriggers.length; i < l; i++) {
    ScriptApp.deleteTrigger(allTriggers[i]);
  }
}

function calculateRemaindingDays(targetMonth, targetDate){
  var d = new Date();
  var year = d.getFullYear();
  var month = d.getMonth();
  var date = d.getDate();
  
  var targetD = new Date(year + (month > targetMonth || (month == targetMonth && date > targetDate ? 1 : 0)), targetMonth, targetDate);
  
  return Math.ceil((targetD.getTime() - d.getTime()) / 8.64e7);
}

貼り付けられたら、上部の保存ボタンをクリックしてください。

最終的にhtml の Email の送信をしたいので、そのためのテンプレートも作成したいと思います。

Step3

[ファイル]-[新規作成]-[HTMLファイル] をクリック
ファイルを作成 ダイアログがでたら、ファイル名(この場合はnotificationTemplate) を入力
notificationTemplate.html に次のコードをコピペ
保存ボタンをクリック

notificationTemplate.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <base target="_top">
  <style type="text/css">
    body {
      background: #D3EDFB;
      color: #666666;
      font-family: sans-serif;
    }

    .mainData {
       color: #333333;
    }
  </style>
</head>

<body>
  <main class="main">
    <? if(remaindingDays){ ?>
      <div class="notChristmas">
        <p>クリスマスまで</p>
        <p>
          <span>あと</span>
          <span class="mainData"><?= remaindingDays ?></span>
          <span>日</span>
        </p>
      </div>
      <? } else { ?>
      <div class="christmas">
        <p>
          <span class="mainData">Merry Christmas!!!</span>
        </p>
      </div>
      <? } ?>
  </main>
</body>

</html>