Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@maatumoDev

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の関係の記事

3
Help us understand the problem. What is going on with this article?
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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?