Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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など)も雑で、説明も皆無なのですみません。
ですが、少しでも参考になればと思います。

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

lemon2003
The Coder (雑魚ーダー) フロントエンドメイン Qrunch: https://lemon2003.qrunch.io/
https://resume.id/lemon2003
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした