3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

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

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

ヘッダーバーの横が空いてたので、そこにボタンを入れました。
スクリーンショット 2018-06-09 13.49.23.png

コード

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
などを参考にしました。

押してもらう

ポチっ
スクリーンショット 2018-06-09 13.40.43.png

Slackに届いた!

スクリーンショット 2018-06-09 13.56.30.png

終わりに

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

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

 

以前のslackの関係の記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?