search
LoginSignup
5

More than 3 years have passed since last update.

posted at

updated at

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

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

by lemon2003
1 / 13

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


tl;dr

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

Step1

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

script.google.com

  • Start Scripting をクリック :mouse_three_button: 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);
}

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

保存ボタンをクリック

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


Step3

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

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>

見るからに雑です。

コピペできたら、保存ボタン :floppy_disk: をクリックしてください。


Step4

  1. コード.gs タブをクリックしてタブ切り替え
  2. 関数を選択
  3. 上部の実行ボタン :arrow_forward: をクリックしてください。

実行ボタンをクリック

実行ボタンをクリック

実行ボタンをクリック


すると、承認が必要です ダイアログがでます。
1. 許可を確認 をクリック
2. アカウントの選択 ポップアップが出るので、自分のアカウントを選択
3. ~がGoogleアカウントへのアクセスをリクエストしています と出るので、許可をクリック :mouse_three_button:
4. ポップアップが消えます

メールは送信されましたか?

次は、毎日自動的に送信されるようにします。


Step5

トリガーを設定 :wrench: します。
ここでは

  • 毎日メールを送る用
  • クリスマスが終わり、トリガーを削除する用

の二つを設定します。


  1. 現在のプロジェクトのトリガー をクリック
  2. 一つ目は次のgifのようにする

トリガーの設定
(※重さ軽減のために画質とフレームレートを間引いています。ご了承ください。)


二つ目は先ほどにならって

実行する関数を選択
`deleteTrigger`
時間ベースのトリガーのタイプを選択
特定の日時
日時を入力
(YYYY-MM-DD HH:MM の形式で入力
(例: 2018-12-25 12:00))

で入力してください。


表示結果

  • windows メール アプリ

スクリーンショット (55)_.png

  • Microsoft Outlook 2010

スクリーンショット (56)_.png


最後に

コード(htmlなど)も雑で、説明も皆無なのですみません。
ですが、少しでも参考になればと思います。

それと、あまりデバッグしていないので、おかしければコメントください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5