Webhookを使ってGitHubの変化をZapierで検知する

GitHubの変化に合わせて何かしたい時は多いと思うので、Zapierでの実現方法を書いておきます。

## Zapの設定
方法は2つあります。
統合されたGitHubのトリガーを使うことで簡単に設定できますが、イベントの数が少ないためやりがいことが実現できないことも多いです。その場合はWebhookを用いて実現します。今回は両方紹介します。

### GitHubのトリガーを使用する

#### GitHubのトリガーで使えるイベント
以下のイベントがGitHubのトリガーでサポートしているものです。これに当てはまる場合はGitHubのトリガーを使うのが良いと思います。
新規や追加系のイベントは結構用意されています。

|Event|||Event||
|---|---|---|---|---|
|New Branch|ブランチの作成||New Collaborator|コラボレーターの追加|
|New Commit Comment|コミットに対するコメントの作成||New Commit|コミットの作成|
|New Repo Event|リポジトリでのイベント||New Gist|（公開・非公開）Gistの作成|
|New Global Event|自分または自分に対する全てのイベント||New Issue|Issueの作成|
|New Label|ラベルの作成||New Mention|コミット・コメント・Issue・PRでのメンション|
|New Milestone|マイルストーンの作成||New Notification|通知の作成|
|New Organization|組織の作成||New Pull Request|PRの作成|
|New Release|リリースの作成||New Repository|リポジトリの作成|
|New Review Request|新規レビューリクエスト||New Team|チームの作成|
|New Watcher|ウォッチャーの追加||||

#### 設定方法
Change triggerでGitHubを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/e2bee6e7-e5dd-232a-83bb-d08b6ebb710c.png" width=50%>

後はイベントを選択し案内に沿って設定していくだけで完了です。とても楽です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/b0e2186d-81e0-3797-c6f1-88578580b06d.png" width=50%>

GitHubのトリガーを用いる場合はGitHub側の設定は必要ありません。

### Webhookを使用する
Webhookを使用した方法であれば[GitHubでサポート](https://docs.github.com/ja/webhooks-and-events/webhooks/webhook-events-and-payloads)している全てのイベントに対応できます。

※ この機能は`Premium app`に該当し、無料アカウントでは使うことができません。

#### 設定方法
Change triggerでWebhook by Zapierを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/04f90663-b525-5571-badc-c0fdefee8b47.png" width=50%>

Eventで`Catch Hook`を選択します。
`Catch Row Hook`も機能としてはほとんど同じですが、制約があったりして使い所は正直わかりません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/d38804b8-95c5-a138-3fea-2ebe42e8b057.png" width=50%>

必要に応じて`Pick off a Child Key`を設定してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/8bec6556-8c59-493a-6ec2-0d7baba0f312.png" width=50%>

ContinueしてTest triggerにURLが表示されたらZapierでの準備は完了です。次はGitHubの設定を行います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/36c2242a-0326-b46c-970e-ee8b374f885d.png" width=50%>

## GitHubの設定

GitHubで先ほどZapで取得したWebhook URLを設定します。

#### 設定方法
リポジトリ上部のSettingsを開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/689c9536-2203-37eb-f458-2a9445f9df8c.png" width=50%>

左側のメニューにあるWebhooksを開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/b3327152-1dda-19f8-3c8f-f8237fb86183.png" width=30%>

右上にあるAdd Webhookを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/6285597f-82e8-b3bc-8c83-840ac3411d6a.png" width=50%>

Payload URLに先ほどZapで取得したURLを設定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/5e517d64-caf4-04b8-5585-28ba4e77403d.png" width=50%>

特定のイベントのみを受信したいことがほとんどだと思うので、その場合は`Let me select individual events.`を選択し、受信したいイベントを選んでください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/5d18bacb-07b9-62ec-b40c-574c0082f35d.png" width=50%>

他の設定は特別設定しなくて大丈夫です。Add Webhookが完了したらGitHub側での設定は完了です。
Zapierに戻り先ほどのZapでTest Triggerをし、イベントが受け取れることを確認してください。