#実現したいこと
ボタンクリック時にzapierに飛んで、Aボタンを押した時はslackのchanelAへ、Bボタンを押した時はchanelBへメッセージを投稿する機能。
##trigerの選択
まずはtrigerとなるツールを選択します。
今回の場合は以下のwebhookを選びます。
###choose an event
今回はCatch Hookを選択。
###set up trigger
この時点でエンドポイントを自動生成してくれるので、このURLを保存しておきます。
###test trigger
triggerがちゃんと機能するかここでチェックしておきましょう。
先ほど取得した[エンドポイント + "?key=value"]にアクセスしてみてください。(クエリごとに処理を変えるため、クエリパラメータをつけましょう。)
その後テストを確認してみると、以下のようにquerystringが取得できていればok。(今回のクエリパラメータは"?type=hoge")
##actionの選択
一つの処理のみしたい場合はそのままslackを選択すればいいのですが、今回の場合はボタンごとに処理を分岐させたいのでPathを選択しましょう。
###分岐条件の設定
分岐の名前をつけて、今回の条件を設定しましょう。typeがAと完全に一致するときにこの分岐に入ります。ボタンクリック時には"type=A"とクエリパラメータを指定してあげます。もう一方の分岐も同様です。
###Actionの設定
slackを選択し、action Eventにsend Channel Messageを指定。
あとは、アカウントを指定し、送りたいチャンネルとメッセージを記述すればok。
#参考
今回エンドポイントトリガーとして使用したサンプルコードを記載しておきます。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script language="javascript" type="text/javascript">
function OnButtonClick(type) {
axios
.get("endpointを記載してください", {
params: {
type: type,
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<input
type="button"
value="send A to slack"
onclick="OnButtonClick('A');"
/><br />
<input
type="button"
value="send B to slack"
onclick="OnButtonClick('B');"
/><br />
<br />
<div id="reusult"></div>
</body>
</html>