WebhookでIFTTTをトリガーにMicrosoft Flowを動かす

この投稿は[TAKA-SHU ひとり Advent Calendar 2018](https://adventar.org/calendars/3668) 15日目です。  

ノンコーディングで様々なWebサービスやアプリケーションを連携できるサービスが広がってきています。
今回はその代表的なサービスである**IFTTT**と**Microsoft Flow**を**Webhook**を使って連携したいと思います。

## IFTTT とは

「**if** **t**his **t**hen **t**hat」の略。
「if this（もしこれだったら）」「then that（そのときあれする）」というシンプルなルールを作成して別々のWebサービスを連携できる無料のサービス。
GoogleやInstagram、Amazon Alexaなど、一般消費者向けサービスのコネクタが充実している。
「1トリガー1アクション」が特徴で、単純でわかりやすい一方、条件分岐やループなどの処理は実行できない。

IFTTT：
https://ifttt.com/

## Microsoft Flow とは

Microsoft社が提供するタスク自動化ツール。
ノンコーディングで、繰り返し行う作業を自動的に実行できる。サーバーも不要。
Office 365のサブスクリプションに含まれているほか、Microsoftアカウントを作成すれば個人でも無料で利用できる。
IFTTTと異なり、1つのトリガーに複数のアクションを構成でき、複雑な処理も可能。
ExchangeやSharePoint,OneDrive,Microsoft TeamsなどのMicrosoft系はもちろん、ビジネス向けサービスのコネクタが充実しているのも特徴。

Microsoft Flow：
https://japan.flow.microsoft.com/ja-jp/

## Webhook とは

> アプリケーションの更新情報を他のアプリケーションへリアルタイム提供する仕組みや概念のこと。  
> イベント（リポジトリにプッシュなど）発生時、指定したURLにPOSTリクエストする仕組みのこと。  
> 参考：Webhookとは？ - Qiita [https://qiita.com/soarflat/items/ed970f6dc59b2ab76169](https://qiita.com/soarflat/items/ed970f6dc59b2ab76169)

## なぜIFTTTとMicrosoft Flowを連携するのか

* どちらか一方しかコネクタが無いサービスがある
* IFTTTでは1トリガー1アクションの制限がある
* IFTTT/Microsoft Flowで用意されているコネクタを利用することで、ロジック作成に注力できる
* ~~コードかきたくない~~

## 作成

今回は連携部分のみに集中するため、
「IFTTTのボタンが押されたら」→「Microsoft Flowで通知する」という単純な処理を構成します。

### Microsoft Flowでフローを作成する

先にフローを作成します。

[Microsoft Flow](https://japan.flow.microsoft.com/ja-jp/)にアクセスし、[マイフロー]-[新規]-[一から作成]

![1.png](https://qiita-image-store.s3.amazonaws.com/0/301095/0bf92315-58f8-ceea-4a65-8d146b47ff96.png)


[一から作成]

![2.png](https://qiita-image-store.s3.amazonaws.com/0/301095/9a1842a5-fa07-c50c-9b58-e98ce96d78fd.png)


フローのタイトルを任意で入力。
「要求」と検索して、[HTTP要求の受信時]を選択。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/301095/7157be0b-2e7f-ab3a-24af-6c2ac4761435.png)


[サンプルのペイロードを使用してスキーマを生成する]

![4.png](https://qiita-image-store.s3.amazonaws.com/0/301095/9be546a7-6fbf-accd-9250-7dd4a4c44687.png)


以下を入力して[完了]

```(json)
{
    "Message":"xxx"
}
```

![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/0b6f6e37-70b3-dd2e-10d7-ef2027b80a12.png)


[新しいステップ]

![6.png](https://qiita-image-store.s3.amazonaws.com/0/301095/67e74888-1af2-c580-4c42-dd273dcb6f8a.png)


「Notifications」と検索して、[Send me a mobile notification]を選択

![7.png](https://qiita-image-store.s3.amazonaws.com/0/301095/c2c344a8-b132-263c-cd17-8c5e9baa54ca.png)


[Text]に[Message]を入力

![8.png](https://qiita-image-store.s3.amazonaws.com/0/301095/7a694409-d1e7-f73f-43c9-aa6a7994bf08.png)


[保存]

![9.png](https://qiita-image-store.s3.amazonaws.com/0/301095/14695fa4-e2d0-76b1-489d-754be3972503.png)


[HTTP要求の受信時]に[HTTP POSTのURL]が生成されているので値を控えておく

![10.png](https://qiita-image-store.s3.amazonaws.com/0/301095/008c0daa-cf71-4e3e-a434-c9681bfc7ff4.png)


### IFTTTのAppletの作成

[IFTTT](https://ifttt.com/)にアクセスして[New Applet]

![11.png](https://qiita-image-store.s3.amazonaws.com/0/301095/60c37df7-94e3-5f86-d3b5-cf1f6a40b1c4.png)


[+this]

![12.png](https://qiita-image-store.s3.amazonaws.com/0/301095/3a0d7824-c557-7233-d26f-8ca4c61868b1.png)


「Button」と検索して、[Button widget]を選択

![13.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/3ae887b1-b32c-61a4-2e7c-ee41cf9552f8.png)


[Button press]

![14.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/06a07c7b-4dce-7b5f-aacf-a52b57a7bbdf.png)


[+that]

![15.png](https://qiita-image-store.s3.amazonaws.com/0/301095/0d84d3f5-7090-0706-82a1-b914716d5b0a.png)


[Webhooks]

![16.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/73592454-cf8e-b276-6eae-e26bd3389c2d.png)


[Make a web request]

![17.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/356f6e1b-a3e3-9347-f34c-7c42b67af63a.png)


[URL]：Microsoft Flowで生成された[HTTP POSTのURL]
[Method]：POST
[Content Type]：application/json
[Body]：

```(json)
{"Message":"IFTTTのボタンが押されたよ"}
```

![18.png](https://qiita-image-store.s3.amazonaws.com/0/301095/06029724-460c-a04b-e6ee-ba127a499bd0.png)


[Create action]をクリックして完成。

## 実行

スマートフォンのウィジェットにIFTTTを追加して、ボタンをタップ

<img width="356" alt="19.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/301095/d5c39259-9e40-8b4e-7fd2-8f430d6774bf.jpeg">


Microsoft Flowに通知が届きます！

<img width="346" alt="20.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/301095/e9d4c29e-4f0f-e20f-e54f-02324454166b.jpeg">


Microsoft Flowの実行履歴にも残ってます。

![21.PNG](https://qiita-image-store.s3.amazonaws.com/0/301095/7c239522-6e18-59e5-0286-219d7ba54879.png)

## 最後に

今回はjsonで渡すデータも埋め込みで作りましたが、トリガーからの情報を受け渡すこともできます。
また、反対にMicrosoft FlowをトリガーにIFTTTを動かすこともできるはずなので、別の機会に試したいと思います。