#目標:Webページ上からSlackにメッセージを送信する
Slackにメッセージを送信することができる、SlackのWebHookを使ってみます。
##準備
ワークスペースを作成していない場合は、新規作成してください。
https://slack.com/create
ワークスペースを作成
![2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F2a4f95b2-6c0c-6516-471a-4dc098555bb4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6dcc0485361a8f6542d8f1073268759a)
![3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F74426738-52b2-0f85-6b56-8548c79a4015.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fa77c2b0df4ac87f763f465b213038e3)
![4.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2Fcc819ac3-8546-953c-0c8e-464686fed0f2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a8f69c2550284ee0a895a99f0635f59)
![5.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F2d8969d4-606f-1629-4cc8-5dee19237843.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=db12047757388b1559f1ed055c466a84)
![6.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F4bb4a697-a86f-18ea-46a8-93c497f4261c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=166cc881b07a8888ee9344d5ed9fb7f5)
![7.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2Facdf66a7-0508-c856-e3a9-6b10d655c43e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bb4ef146dfa88df8e372d57264d2acd5)
![8.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F42c37466-55ca-1bc5-226d-32065d6dfe3b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0f0f4968c9894acc93763e37762dc6e6)
![9.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2Ffea77755-7232-3f1e-fa38-00935aa582eb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=741f2ce2b9f412d5cc08bdbb5c17779e)
![10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F36c8c319-4eab-a2f6-0459-067c1c46c767.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9792b127709dfbc96a1b7afab12fc884)
![11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2Ff7dca437-fb9e-c892-ab88-d846a6366b95.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2e6f7fcd449e782cfc36057ad42cf70e)
![12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F4069574e-68a6-0fcb-9ceb-bc3afc3dea8e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d1c28e1dd5c20b1e42392e752bd1eaa5)
![13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F91e2c113-c0b2-f847-5659-66543ffb5ac0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c017db68d6739c7d769f4b8837ac7bab)
![14.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2Fb6aa233b-deac-7173-cf67-734df8760579.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d96f062e819490dbbc04b2e66593a2fc)
![15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F44cc0660-2dd9-db23-2bfe-2b23c19888b3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a18a93c9865d332e6bb862788c3a665d)
![16.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F165099%2F228b0525-2c58-79d7-220c-9d69c2d4bc76.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7392c98593bb89ffe8b3312caa6d17cc)
##Slackにメッセージを送信する
Sample curl request to post to a channel:
にあるコードをコピーして、Terminalにペーストすると、Slackにメッセージを飛ばせます。
##Webページ上からSlackにメッセージを送信する
適当なhtmlファイルを作って、Webブラウザで開いてPOSTしてみます。
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に通知を飛ばしたくなることはよくあるので、覚えておくと今後役に立つでしょう。