メール受信→Slack通知（webhookで）

Slackのフリー版を使っているとアプリの上限があって、よくアプリが追加できなくなってしまいます。

たまたま、メール受信→Slackの連携を考えたのですが、
メールとかIFTTTとかが追加できなくなってしまいます。

でも既にIncoming webhook追加している場合は、IFTTTのthenイベントをwebhookにしてslackに投げることで、同じようなことができたのでメモしておきます。
なお、IFTTTでapplet公開しようかと思ったんですが、Webhookをサービスに使ったアプレットは公開できないようです。
（それができるとサービスを迂回できてしまうからかもしれません。。）

## 1. Slack側: Incoming Webhookの準備

まずはappsからincoming webhookを追加しておきます。
もし上限いっぱいで追加できなかったらこの記事は意味ないですね、、、
- [Incoming Webhookのページ](https://slack.com/apps/A0F7XDUAZ-incoming-webhooks)

<img width="300" alt="スクリーンショット 2018-04-26 11.46.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/132069b5-ee49-4f2e-e10a-28bf7b325708.png">
`Add Configuration`を押す

<img width="300" alt="スクリーンショット 2018-04-26 11.46.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/2544dace-873d-ce67-9008-d6e1ec6cece5.png">
適当に送信先チャンネル(ここでは#general)を選択し、
`Add Incoming Webhooks Integration`を押します。

<img width="300" alt="スクリーンショット 2018-04-26 11.46.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/55b93274-cdc3-05f1-c93d-3070ba8fed4f.png">
画面が切り替わるので、`Webhook URL`をコピーしておきます。

以上でslack側の最低限の設定は終わりです。
下の方にwebhookの簡単なドキュメントがあります。


さらに下にこの通知を受信した時の喋る人のアイコンや名前なども設定できるので、わかりやすさのために設定しておくといいと思います。
これはどんなconfigurationでも共通した設定項目かと思います。

<img width="300" alt="スクリーンショット 2018-04-26 11.51.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/a5c2b1fb-e47d-7536-9f83-3571024911b2.png">

## 2. IFTTT側:

IFTTTではGmailの連携をします。
IFTTTの方の解説はちょっと適当にスクショだけにします。

https://ifttt.com/create/
作成画面にいき、

<img width="300" alt="スクリーンショット 2018-04-26 11.56.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/0471ed4d-a09b-bd5d-3636-a0c0b5dcb2a6.png">
IFのところをGmailに設定します。

<img width="300" alt="スクリーンショット 2018-04-26 11.56.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/9f23c9a2-d3b6-6e82-f6b1-8b3593b1b2a0.png">
ここでconnectしていないとconnectが必要になります。

次にトリガーを選びます。
<img width="300" alt="スクリーンショット 2018-04-26 11.56.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/61933c56-a1fa-42f2-a26b-f423753fd48a.png">
どんなメールを受信した時にイベント発火するかを設定します。
トリガー条件はなんでもいいですが、
自分は既に設定済みのGmail内のfilter(from:xxだったらlabelをつける)に対応させたかったので、`New email in inbox labeled`を選択しました。


<img width="300" alt="スクリーンショット 2018-04-26 11.57.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/a8bc9858-cd47-73fd-78ce-deea1524acdf.png">
対応するラベルを入力しました。
他のトリガーだと設定項目が変わるはずです。

<img width="300" alt="スクリーンショット 2018-04-26 11.57.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/af6f9f2f-653e-4ceb-d709-f30ea4d893ca.png">
次にthenにwebhookを選びます。
<img width="300" alt="スクリーンショット 2018-04-26 11.57.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/ac49bb84-7acd-a43c-a847-54131b1bf719.png">

<img width="300" alt="スクリーンショット 2018-04-26 11.57.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/6cfb3388-b973-54d0-f76f-1558be1dc775.png">
アクションは一個だけなので、それを選びます。

あとはweb requestの中身を作ります。
slack incoming webhookなのでdocumentや下の記事を参考に設定すればいいと思います。
[SlackのIncoming Webhooksを使い倒す](https://qiita.com/ik-fib/items/b4a502d173a22b3947a0)

参考までに自分の設定を晒します。
<img width="474" alt="スクリーンショット 2018-04-26 11.58.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/42594/e109484b-4484-c445-35fd-1c85fa728f2c.png">
URLは1で生成したwebhookのURLを設定します。

bodyは適宜色々カスタマイズしてください。
Ingredientを使ってメールの内容を参照しています。

```json:body
payload={
  "attachments": [{
    "fallback":"{{Subject}}",
    "author_name": " {{FromName}}",
    "title": "{{Subject}}",
    "text": " {{BodyPlain}}",
    "footer": " {{ReceivedAt}}"
  }]
}
```
BodyがritchなHTMLの場合は注釈にあるようにescapeする必要があると思います。

受信したらこんなslackが投稿されると思います。
![スクリーンショット 2018-04-26 12.06.36_2.png](https://qiita-image-store.s3.amazonaws.com/0/42594/c94e65bf-188d-e829-65af-8bd43177ccfa.png)
 わかりづらいですが、`aa`が件名、`bbb`が本文ですw
（名前はぼかしてます）

## おまけ

Gmailアカウントを連携させたくない、別のアドレスから受信している等の場合はトリガーを変更させればいいかと思います。
ただし、その場合はアクションの方もIngredientの内容が変わるので適宜変更する必要があります。

Emailトリガーで設定したバージョンのbodyも参考までに載せておきます。

```json:body
payload={
  "attachments": [{
    "fallback":"{{Subject}}",
    "author_name": "{{From}}",
    "title": "{{Subject}}",
    "text": " {{Body}}",
    "footer": "{{ReceivedAt}}"
  }]
}
```