SendGrid,Heroku,Gmailを使って無料で特定のメールだけをSlackチャンネルに転送する

# はじめに
今までZapierとgmailを使って特定のメールをSlackチャンネルに転送をしていました。
Zapierは設定がとっても楽チンで非常に良かったんですが、
無料プランだと1月当たり100通しか転送できず別の方法を考えることにしました。

Slackも無料プランのためEmailアドオンが使うことができず、
それでも無料でチャンネルにメール転送したいと思い実際にやってみました。
（個人アカウントへの転送はSlackが無料プランでもメールアドレス発行出来るので出来ます）

# 本記事での目標
Gmailで件名に【TEST】が入っているメールを受け取ったら、
Slackのテストチャンネルに、送信元、件名、本文が自動で投稿されるようにする。

# 目次
- [今回使用するもの、サービス](#今回使用するものサービス)
- [概要図](#概要図)
- [手順](#手順)
    - [sendgrid : domain-authentication設定](#sendgrid--domain-authentication設定)
    - [Slack : Incoming Webhookの設定](#slack--incoming-webhookの設定)
    - [プログラム作成](#プログラム作成)
    - [herokuデプロイ](#herokuデプロイ)
    - [SendGrid : Inbound Parse設定](#sendgrid--inbound-parse設定)
    - [Gmail : フィルタリング & 転送](#gmail--フィルタリング--転送)
- [終わりに](#終わりに)

# 今回使用するもの、サービス
- SendGrid(Parse Webhook) : メール受け取り、Herokuに用意したAPIにPOSTする
- Heroku(Node, Express) : 受け取ったメールをパース、整形し、Slackのincomig-webhookにPOSTする
- freenom : 無料ドメイン取得、Parse Webhookを利用するため必要
- gmail : メールをフィルタリングし、Slackに送りたいメールだけ転送する
- Slack : Incoming Webhookでメール内容受け取り、任意チャンネルに投稿する


# 概要図
![summary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/97ba7db3-396b-14f0-3738-870a245d70ef.png)

# 手順

※各サービスのアカウント作成とfreenomでのドメイン取得方法に関しては割愛します。

※今回用に事前にfreenomで以下ドメインを取得しました。
![2019-10-06_21h45_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/e9c05a63-3e37-55e1-d26c-3b8293fffe77.png)

## SendGrid : Domain Authentication設定
SendGridでメールを受け取るためのドメインの設定をします。

SendGrid管理画面から**Sender Authentication**をクリック
![2019-10-06_21h41_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/63e8cda8-7764-6b7e-db98-227e65ad83c6.png)

**Authentication Your Domain**をクリック
![2019-10-06_21h41_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/0328bf3e-2451-c223-7b7c-0e9182971b4f.png)

**Next**をクリック
![2019-10-06_21h44_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/54db12fa-3a45-9ace-282f-b4f0e845c83a.png)

**Domain You Send From**に取得したドメインを入力し**Next**をクリック
![2019-10-06_21h45_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/5d75f19a-90e3-565a-ce85-4393621ee9eb.png)

ここまで来たら以下画像のように3件のCNAMEレコードが表示されるのでfreenomで追加します。
![2019-10-06_21h46_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/c5da2357-b1a5-9591-29c8-07ec02e44533.png)

CNAMEレコード追加
![2019-10-08_16h34_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/070ba1cd-fb60-c720-2454-9dc2b7011098.png)

SendGridで**Verify**をクリックし3件全て**Verified**になったらOKです。
**※注意※**ドメイン取得から使用できるようになるまで最大3日程度かかる場合があります。
![2019-10-08_16h40_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/ac261c07-156d-f75a-02cf-ec17d047aa58.png)

## Slack : Incoming Webhookの設定
チャンネルにIncoming Webhookアプリを追加、**Webhook URL**を取得します。

![2019-10-08_16h45_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/3ad440a3-23ea-85e1-39e1-932314244341.png)

![2019-10-08_16h46_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/5f7442c7-6302-d5d3-23d5-8a0cc1d4a379.png)

![2019-10-08_16h46_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/cb8a54a4-d3ee-a041-e1a0-2ea9d00fc5f7.png)

![2019-10-08_16h47_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/8d1547c2-68e3-fe3e-7ac0-6b010a18117f.png)

**Webhook URL**をゲット☆
![2019-10-08_16h48_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/c1d1c602-8d3e-7087-7374-d638f54ddc44.png)

## プログラム作成
※nodeは10.13.0を使用しています。

適当なディレクトリを作成し、必要モジュールをインストール

- express : Webアプリケーションフレームワーク
- multer : メールがmultipart/form-data形式で飛んでくるため使用
- axios : Incoming WebhookへPOSTするため使用
- html-to-text : HTML形式メール対応のため使用

```bash
$ mkdir test
$ cd test
$ npm -y init
$ npm i --save express multer axios html-to-text
$ touch index.js
```

プログラム本体：index.js

```javascript:index.js
const multer = require("multer");
const axios = require("axios");
const htmlToText = require("html-to-text");
const app = require("express")();

app.set("port", process.env.PORT || 3000);

const webhookUrl =
  "https://hooks.slack.com/services/*********/*********/**********************"; // 各自webhookUrlを設定ください

app.post("/", multer().any(), (req, res) => {
  (async () => {
    try {
      await axios.post(webhookUrl, {
        text: `
From : ${req.body.from}
Subject : ${req.body.subject}
Body :
${req.body.text || htmlToText.fromString(req.body.html)}
`
      });
      res.status(200).send({ success: true });
    } catch (e) {
      console.error(e);
      res.status(500).send({
        success: false,
        error: e
      });
    }
  })();
});

app.listen(app.get("port"), () => {
  console.log(`Express server listening on port ${app.get("port")}`);
});
```

## Herokuデプロイ
※Heroku CLIをインストールしておいてください（https://devcenter.heroku.com/articles/heroku-cli）

Heroku上で空のアプリを用意しておいてください。
今回はアプリ名takahirosato-test-appで作成しました。

login

```bash
$ heroku login
```

さっき作ったtestディレクトリ下で以下実行

```bash
$ git init
$ heroku git:remote -a takahirosato-test-app
```

node_modulesをignore

```bash
$ echo "/node_modules/" > .gitignore
```

Procfile作成

```bash
$ echo "web: node index.js" > Procfile
```

commit & push

```bash
$ git add .
$ git commit -am "make it better"
$ git push heroku master
```

エラーがでなければオッケイ☆

## SendGrid : Inbound Parse設定

SendGrid管理画面から**Inbound Parse**をクリック

![2019-10-08_17h41_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/af1e7ea0-4f7a-5c59-56fe-f5405b23f354.png)

**Add Host & URL**をクリック
![2019-10-08_17h44_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/783d7524-06b9-745c-4297-777d9b94b8b8.png)

こんな感じで設定
![2019-10-08_17h45_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/33ab7707-f997-73cd-f67a-fd95ebc357b6.png)

ここまでで、とりあえずem8892.takahirosato.tkに送られるメールは全てSlackのテストチャンネルに転送されるようになりました。

↓こんな感じで届きます。
![2019-10-08_17h51_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/2967852f-82da-ded0-f287-5abd72a14442.png)

## Gmail : フィルタリング & 転送

Gmailで受け取ったメールから特定のメールだけを転送するよう設定します。

Gmailの設定から**メール転送とPOP/IMAP**をクリック

![2019-10-08_17h57_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/d4434525-3123-5a4a-f56b-9f538dbbbf7c.png)

**転送先アドレスを追加**をクリックしアドレス入力
※@の前は何でも良いです
![2019-10-08_17h55_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/9d3ad0b0-6053-1ad0-1806-6fcb3c19fb80.png)

続行
![2019-10-08_17h54_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/9fb97fa3-c510-9496-d4c5-89920bd43ea0.png)

確認コードがSlackに届きます

![2019-10-08_18h01_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/cdf5ee05-1542-c529-3dbe-a096e0794c07.png)

確認コードを入力して転送先アドレス設定完了

![2019-10-08_18h02_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/2c68e54e-20dc-0f77-5d38-06d3c9e9cd83.png)

新規フィルタ作成
検索フォームの▼をクリック
![2019-10-08_18h07_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/f26e9c59-9196-9cee-bf9d-63e00557d2b2.png)

含むに【TEST】を入力し**フィルタを作成**をクリック
![2019-10-08_18h07_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/1ab63e2f-5b3b-8fe3-b2d4-4ee294efe718.png)

**次のアドレスに転送する**にチェックを入れ、先程登録したアドレスを設定し**フィルタを作成**をクリック
![2019-10-08_18h08_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135659/221002c2-0f93-f5f5-47a9-7b85d63d30f5.png)


ここまでで、このGmailアカウントに送られたメールの内、件名に【TEST】が含まれるものだけがSlackのテストチャンネルに送られるようになりました。

めでたい

## 終わりに

実際に職場のメールとSlackで2ヶ月ほど使用しましたが、Herokuの1月当たりの無料使用可能時間（550時間）の内、数十時間程度しか使用してなかったので、Zapierと比べてかなり余裕ありそうです。
また、今回はSlackへの転送でしたが、SendGridとHerokuの組み合わせはかなり色々できそうだなと思いました。
添付ファイルも受け取れるので、添付Excelの中身を見てSlackに報告なんてこともやってます。
GASにAPI作ってスプレッドシートに書き込むみたいなのも楽しそう。