WebページにシンプルなSlack投稿ボタンをつくる

社内配布のWebサービスで、フィードバックが欲しい...

アンケートとるのもあれなので、いいねボタンを埋め込もうと思います。

Likeボタンを適当な場所に仕込む

ヘッダーバーの横が空いてたので、そこにボタンを入れました。

コード

html

<button class="mdl-button mdl-js-button mdl-button--icon" onclick="sendLikeToSlack()">
    <i class="material-icons">thumb_up</i>
</button>

ボタンにonclickイベントをつけます。(Material Design Liteを用いてます。)

js

function sendLikeToSlack() {
    let xmlhttp = new XMLHttpRequest();
    //自分のwebhook URLを取得して、以下に代入
    let webhook_url = 'https://hooks.slack.com/services/******/******/******';
    let myJSONStr = '{"username": "ゆーざー" ,"text":"いいね",  "icon_emoji": ":heartpulse:"}';
    xmlhttp.open('POST', webhook_url, false);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(myJSONStr);
}

slackのwebhook_URLにXMLHttpRequest()でPOSTします。
webhook_URLの取得は多くの記事がありますが、
https://qiita.com/vmmhypervisor/items/18c99624a84df8b31008
などを参考にしました。

押してもらう

ポチっ

Slackに届いた！

終わりに

これ、ちょっとしたフォームを作れば、Slackにメッセージを送るようにできますね。
メールフォームみたいにシンプルに、slack投稿フォームをコピペで埋め込むことができるわけです。

いわゆるMVP(Minimum Viable Product)に使うことで、高速な仮説検証を回せそう...

　

以前のslackの関係の記事