【Slack】Webhookを時間になったら送信する【Postman】

# はじめに
以下の目的で作ってみたのでまとめる。
* Postmanの使い方を練習する
* API（Webhook）の使い方を練習する

:point_down:参考にしたページ（作成の流れは公式の手順通りではあるので）

https://api.slack.com/messaging/webhooks#getting_started



# Slack側の設定
### Webhookを受信できるように設定
公式の手順でいうところの 2. Enable Incoming Webhooks から作業を始める。
~~1. Create a Slack app は割愛。~~ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/bb85ac8c-0313-bcbf-7b48-3b6c3859b68a.png)
アプリのメニューからWebhookの設定ページへ移動。
<img width="160" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/c53d6e66-8dc1-8274-a0c9-813bc7e1e674.png">
Webhookを受信できるよう、オンに設定する。
<img width="620" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/72927845-9801-2c7e-b4f1-2e3cb2e01af6.png">
オンにすると、画面下にWebhookURLの情報が表示される。
WebhookURLと、このWebhookURLで投稿する先のチャンネル名が
記載されているのでコピーする。
<img width="620" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/cb926396-277c-848a-753d-3d520a5b7695.png">

:::note info
設定ページに書いてある通りWebhookでPOSTする時に
Content-Typeヘッダーは`application/json`となっている必要があるので、
Postmanでリクエストを作成する際は留意しておく。 
:::

WebhookURLが作成されていない場合は
「Add New Webhook to Workspace」を押下すると
投稿先のチャンネルを選択する画面へ移動するので選択する。
<img width="380" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/860b74a7-02dc-ccf1-89b4-768a3201cd24.png">
この後は、Webhookの設定ページへ戻り、WebhookURLをコピーする。
Slack側での設定は以上で終わり。

### 【整理】WebhookでPOSTする際に必要な情報
* WebhookURL
* Webhookのボディの中身
（今回はボディをJSON形式で書く、ということもありContent-Typeヘッダーは`application/json`）

:::note warn
ベースURIが`https://slack.com/api`のAPIを
打つ際に必要なユーザートークンやボットトークンは不要。
:::
:::note info
ボディの中身の書き方は公式に色々書いてあるが
ビルダーがあるので、ビルダーでメッセージを作って
JSON（ビルダー内ではPayloadと呼ばれているもの）を
コピペする方法が手っ取り早いと思うのでリンクを貼っておく。
[An overview of message composition](https://api.slack.com/messaging/composing)
[Formatting text for app surfaces](https://api.slack.com/reference/surfaces/formatting)
[Block Kit Builder](https://api.slack.com/tools/block-kit-builder)

ビルダーは[Slack API](https://api.slack.com/start)のメニューから開くこともできる。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/2b4da280-0dc1-29c5-6536-92e9797cbd5b.png">

:::


# Postman側の設定
### Webhookのリクエストを作成＆試しに送信
Postmanを開き、ワークスペースにある新規ボタンを押下。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/c1f8f386-a7df-7236-69f2-094a84cd2d9f.png">
HTTPリクエストを選択し、新規に追加する。
<img width="120" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/d0381e7b-66c3-6228-d271-75196d7af4a6.png">


以下の画面が表示されるので、リクエストの内容を入力していく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/147ab2d6-b92e-6e28-fd55-ea40191d4467.png)
ボディ以外の入力箇所と入力値は以下の通り。

| 入力箇所 | 入力値 |
|:-|:-|
| メソッド  | POST  |
| URL  | コピーしたWebhookURL （`https://hooks.slack.com/services/… `） |
| 認証  | 認証なし  |
|  ヘッダー （ボディ作成時に自動で設定されるため任意） | Content-Type : application/json  |

ボディは「Raw」を選択し、JSON形式に設定できている事を確認する。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/9caeb33b-4a2c-bce7-587d-404f547bec27.png">

最後にボディに適当にメッセージを入力する。
```javascript:body
{
    "text":"Hello, World!"
}
```
送信に成功するとレスポンスはokと返ってくる。
![240125_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/50e04476-9455-ba91-34fd-3bb19386e301.png)

そのためSlackを見ると、投稿先のチャンネルにメッセージが投稿されていることが分かる。
<img width="680" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/1bf0261b-6e87-e74c-6e8d-d646cee3589f.png">

Webhookでメッセージの送信ができたので
このリクエストの設定を元に、メッセージとスケジュールを設定する。

### 時間になったら送信する用のメッセージを作成
メッセージの作成は[Block Kit Builder](https://api.slack.com/tools/block-kit-builder)で行う。
左側にメッセージを作成するパーツみたいなものがあるので、
選択してテキストだけ書き換えて作成。
右側のPayloadはWebhookのボディに貼り付けたいので、
作成できたら、画面上の「Copy Payload」を押下してコピーする。

<details><summary>Payload全文</summary>

```javascript:Payload
{
	"blocks": [
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": ":mega: 定期投稿",
				"emoji": true
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "section",
			"text": {
				"type": "plain_text",
				"text": "Postmanでスケジュールされた投稿です。\n Webhookで投稿しています。\n スケジュールを変更する場合はPostmanを開いてください :flying_saucer:",
				"emoji": true
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "context",
			"elements": [
				{
					"type": "mrkdwn",
					"text": ":bubbles: <https://web.postman.co//|Postman Web版>"
				}
			]
		}
	]
}
```
</details>

![240125_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/50a2b7ff-f00d-5e68-2f50-68ae4c7ef287.png)

スケジュールを設定したいWebhookのボディに、コピーしたPayloadを貼り付ける。
作成が完了した後は「保存」を押下する。
（保存しないとスケジュールを設定できない為）
![240126_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/af8cf6ac-4ef1-4b99-4ce3-a8b9cf527232.png)


### スケジュールを設定する
Webhookはコレクション配下に保存されている為、
コレクションを押下して、実行メニューを開く。
![240126_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/563932a3-ab5a-4fa0-6139-52481149b8db.png)
実行メニューのスケジュールタブにある
「スケジュール実行」を押下して、スケジュールを編集する。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/762b7795-4a85-2889-3804-b56e043987b1.png">
編集画面の左側は実行するAPIを選択する。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/c561ced9-a038-0e6c-b2a4-1bd58aaceeda.png">
編集画面の右側は、今回はスケジュール名・スケジュールを実行する頻度を設定する。
その他の項目はお好みで。
設定できたら画面右下の「Schedule Run」を押下して保存する。
![240126_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/2a657269-965c-a4d0-a55a-02cc7ae5c1a8.png)
スケジュールの概要が表示されていれば、スケジュールは作成完了となる。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/341a897e-2864-a0ac-d8a1-0860b238472b.png">

Postman側も設定は以上で終わり。

# 設定通り動くか確認
今回は、リクエストを午前11時に送信するようスケジュールを作成した。
Slack側を見てみると作成した通りの時間に
メッセージが投稿されている事を確認できた。
![240126_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/8aa49a4b-ff34-713f-1879-1320449c112a.png)

ちなみにPostman側でスケジュールの「表示」を押下すると
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/e7b85191-71e8-6088-2811-7f0b7b0c08be.png">
ログ等を確認できる。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608279/49b6666c-710d-c137-f222-db8bc9ac45e6.png">


# まとめ
今回作ってみたことで目的の
* Postmanの使い方を練習する
* API（Webhook）の使い方を練習する

は達成できたと思う。
また、Webhookを送信するために必要な情報・準備について
Slackのユーザートークンやボットトークンが必要なAPIと比較して
自分の中で整理できた事は良かった。

最近はPostmanの使い方からAPI関連を色々触ってみている
（RPAの作成に役立つと思い）のでまた何か作ったら記事にまとめたい。
 ~~できればSlack以外のAPIにも触れたいところ~~