#目標:Webページ上からSlackにメッセージを送信する
Slackにメッセージを送信することができる、SlackのWebHookを使ってみます。
##準備
ワークスペースを作成していない場合は、新規作成してください。
https://slack.com/create
ワークスペースを作成















##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に通知を飛ばしたくなることはよくあるので、覚えておくと今後役に立つでしょう。