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

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

---

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

---

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

+ [script.google.com](https://script.google.com) にアクセス :desktop:

![script.google.com](https://qiita-image-store.s3.amazonaws.com/0/193558/b2b28e64-2ca4-6c51-2fa4-992e89c55673.png)

+ *Start Scripting* をクリック :mouse_three_button:
![Start Scripting をクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/c003ea1e-45e4-106f-9cc4-b5acafded1fa.png)

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

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

![スクリプト入力画面](https://qiita-image-store.s3.amazonaws.com/0/193558/c870e177-8f04-8e30-4f67-7212805c45e5.png)

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

---

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

```javascript:コード.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: をクリックしてください。

![保存ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/e0977365-6027-83e8-390b-5b5f8d19e07b.png)

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

---

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

![html テンプレートファイルを作成](https://qiita-image-store.s3.amazonaws.com/0/193558/f99a5166-cc02-30c0-8cf6-0e06d7039af7.png)

```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: をクリックしてください。

![実行ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/de3082c5-6cd2-38af-cfec-045e4c84c06b.png)

![実行ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/131b0c16-3247-eb1a-40bf-0f83b3fd379d.png)

![実行ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/193558/c9410726-b62a-9758-3420-f6cdbfbd0c69.png)


---

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

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

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

---

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

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

の二つを設定します。

---

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

![トリガーの設定](https://qiita-image-store.s3.amazonaws.com/0/193558/f2fe24d8-c8a0-e0ef-cb6b-e1baecfd2b02.gif)
（※重さ軽減のために画質とフレームレートを間引いています。ご了承ください。）

---

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

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

で入力してください。

---

# 表示結果
+ windows メール アプリ

![スクリーンショット (55)_.png](https://qiita-image-store.s3.amazonaws.com/0/193558/4a8416ca-9000-6cc7-525f-9c2ba35fc6dd.png)

+ Microsoft Outlook 2010

![スクリーンショット (56)_.png](https://qiita-image-store.s3.amazonaws.com/0/193558/bf297813-d071-627f-45b2-8842f8550961.png)

---

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

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