Slack WebHookを使ってみる

#目標：Webページ上からSlackにメッセージを送信する
Slackにメッセージを送信することができる、SlackのWebHookを使ってみます。

##準備
ワークスペースを作成していない場合は、新規作成してください。
https://slack.com/create
<img width="1680" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/b0fef107-1fc9-87f2-22b9-a27e70a0040c.png">
ワークスペースを作成

<img width="1680" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/2a4f95b2-6c0c-6516-471a-4dc098555bb4.png">
チャンネルを作成

<img width="1680" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/74426738-52b2-0f85-6b56-8548c79a4015.png">
後で

<img width="1680" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/cc819ac3-8546-953c-0c8e-464686fed0f2.png">
ここでは例としてnotificationチャンネル

<img width="1680" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/2d8969d4-606f-1629-4cc8-5dee19237843.png">

<img width="1680" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/4bb4a697-a86f-18ea-46a8-93c497f4261c.png">
⚙マークを押した後、アプリを追加するをクリック

<img width="1680" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/acdf66a7-0508-c856-e3a9-6b10d655c43e.png">

<img width="1680" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/42c37466-55ca-1bc5-226d-32065d6dfe3b.png">
アプリを管理する

<img width="1680" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/fea77755-7232-3f1e-fa38-00935aa582eb.png">
Start Building

<img width="1679" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/36c8c319-4eab-a2f6-0459-067c1c46c767.png">
AppName、ワークスペースを指定

<img width="1680" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/f7dca437-fb9e-c892-ab88-d846a6366b95.png">
CreateApp

<img width="1680" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/4069574e-68a6-0fcb-9ceb-bc3afc3dea8e.png">
Incoming Webhooks

<img width="1680" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/91e2c113-c0b2-f847-5659-66543ffb5ac0.png">
On

<img width="1680" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/b6aa233b-deac-7173-cf67-734df8760579.png">
チャンネルを選択

<img width="1680" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/44cc0660-2dd9-db23-2bfe-2b23c19888b3.png">
許可する

<img width="1680" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/228b0525-2c58-79d7-220c-9d69c2d4bc76.png">
時が満ちました。

##Slackにメッセージを送信する
<img width="1677" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/90064593-5a69-d790-6f80-27f8f96e1511.png">
Sample curl request to post to a channel:
にあるコードをコピーして、Terminalにペーストすると、Slackにメッセージを飛ばせます。

##Webページ上からSlackにメッセージを送信する
適当なhtmlファイルを作って、Webブラウザで開いてPOSTしてみます。
<img width="1680" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165099/b1a1d0e8-fa01-f765-37ef-d9aff0635247.png">

```html:index.html
<!DOCTYPE html>
    <head>
        <title>NotificationTest</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
        <input id="message" type="text">
        <button type="button">submit</button>
        
        <script>
            $('button').click(function() {
                $.ajax({
                    type: "POST",
                    url: "https://hooks.slack.com/services/XXXX/XXXX", // Webhook URL を適宜書き換え
                    data: '{"text":"' + $('#message').val() +'"}',
                    success: alert('success'),
                    dataType: 'json'
                });
            });
        </script>
    </body>
</html>
```

メールではなく、Slackに通知を飛ばしたくなることはよくあるので、覚えておくと今後役に立つでしょう。