wacw blog | JavaScript を使い、ブラウザから Slack に投稿

定型文をブラウザ上のボタンをクリックすることで投稿できるようにしたい。ついでにボタンもある程度オシャレにしたい。

（１）Slack のトークンを取得する。

Legacy tokens | Slack
https://api.slack.com/custom-integrations/legacy-tokens

（２）以下のような、HTML、JavaScript、CSS ファイルを作成する。

SlackPost.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Slack Sample</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <a href="#" class="slack-submit">Post to Slack!</a><br>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="sample.js"></script>
</body>
</html>

style.css

.slack-submit{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
}
.slack-submit:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

sample.js

$(function () {
    $('.slack-submit').on('click', function () {
    var url = 'https://slack.com/api/chat.postMessage';
        var data = {
            token: '[１で取得したトークン]',
            channel: '#general',
            username: '投稿ボタン',
            text: 'Hello Slack!',
            icon_emoji: ':smile:'
        };

        $.ajax({
            type: 'GET',
            url: url,
            data: data,
            success: function (data) {
                alert( '投稿完了！');
            }
        });
    });
});

これでブラウザから定型文を投稿できる。

参考：
JavaScriptを使ってSlackのチャンネルに投稿してみる
https://qiita.com/cawpea/items/98e6271f627c3b9a5e12

CSSで作る！押したくなるボタンデザイン100（Web用）
https://saruwakakun.com/html-css/reference/buttons

初心者でも簡単にできる！HTMLにCSSを適用させる方法 | TechAcademyマガジン
https://techacademy.jp/magazine/9647