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の関係の記事
https://qiita.com/maatumoDev/items/f9497d5b37757db1b276