Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

社内配布の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の関係の記事

https://qiita.com/maatumoDev/items/f9497d5b37757db1b276

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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