Slack WebhookのURL取得方法

## 概要
仕事でSlackのWebhookを使う機会があったので、備忘録として残します。
ネットでは旧方式での記事が多いので、初心者でもわかりやすいように画像多めで記事にします。

## 取得方法について
取得方法には以下があります。

__・旧方式（カスタムインテグレーション）__
従来使われてきた方式です。
公式で非推奨とされており、将来的になくなる可能性があると明記されています。
[参考](https://api.slack.com/legacy/custom-integrations/messaging/webhooks)
<img width="650" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/c2c55d37-a9fc-8706-bf1f-fd0a245c8fe7.png">



__・新方式（Slack app)__
旧方式に比べて少しカスタム系の設定が面倒ですが、URL発行自体はめちゃ簡単です。
1つのWebhook URLから1つのチャンネルにしか通知を飛ばせないので、セキュリティリスクが低いのが特徴のようです。

もちろん推奨は`新方式`なので、今回は新方式の手順を残します。

## URL取得手順（新方式）

■下記にアクセスして、「Create an app」をクリックします
[Slack api](https://api.slack.com/)

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/7e16ff63-9630-62b6-ca48-14495afe0893.png">

■「From scratch」をクリック
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/ec5f6350-00a6-3fa1-0e33-fb40378b7278.png">

■ アプリ名を作成
App Name　：　任意のアプリ名を入力します（後で変更もできます）
Pick a workspace　：　投稿したいSlackのワークスペースを選択します
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/bf6730ee-b95f-2b99-8e6d-440d1193e5db.png">

■ 「Incoming Webhook」をクリックします（Featuresから選んでもOK）
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/3d00090a-7d2f-1fca-3053-0166cdb21782.png">

■ WebhookをONにします
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/6b428638-1c1e-1f3c-7e1f-579164e40541.png">

■ 「Add New Webhook to Workspace」をクリックします
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/d9ebf681-c118-c4ba-ac6e-7096a4b36660.png">

■ 別画面が開き、投稿先のチャンネルを選択して「許可する」ボタンをクリックします
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/6b8bc731-0a3b-fc74-680e-74cc98f277fc.png">

■ WebhookのURLが発行されます
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/dddea52a-c694-0082-34ff-c987c3ba46dc.png">

## 投稿テスト
発行されたWebhookを使って、チャンネルに投稿できるか確認してみます。

■ ターミナルで直接curlで投稿する場合
ポイント：ローカルとかだとURLの前に`-k`オプションをつけないとSSL証明書エラーでコケます
```bash
curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' -k https://hooks.slack.com/services/XXXXXXXXXXXXXXXXXXXX
```

■ phpで投稿する場合
```php
// curlを初期化
$ch = curl_init();

// 取得したWebhookのURL
$webhookUrl = 'https://hooks.slack.com/services/XXXXXXXXXXXXXXXXXXXX'

// header情報
$header     = array('Content-type: application/json;charset=utf-8');

// 投稿したい内容
$postData   = json_encode( array( 'text' => 'Hello, World!' ) );

// 通信オプションをセット
curl_setopt($ch, CURLOPT_URL, $webhookUrl);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_HEADER, $header);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

// 通信開始
curl_exec($ch);

// 通信解除
curl_close($ch);
```

■ 投稿するとSlackのチャンネルに以下のような内容で投稿される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/757d67e5-50ad-eaee-ecd5-757b0214ffed.png)

## 投稿内容を改造したい場合
Block Kit Builderで投稿内容をプレビューしながら作成できるのでお試しください。
[slack Block Kit Builder](https://app.slack.com/block-kit-builder/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/710cc680-0468-e1e4-cc52-c148cfae47a1.png)

以上となります。
参考になれば幸いです。