JavaScriptを使って、Slackに外部から投稿する
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

ちょっとしたコミュニケーションをとるときにとても便利なチャットツール。最近だとSlackやChatwork、FacebookやLINEなんかもよく使われているのではないでしょうか。

僕の会社ではSlackを使っているのですが、デザインがおしゃれだし、
チャンネルを好きに追加して、同じテーマで議論したりするのは楽しいですよね。

今回はJavaScriptからSlackに投稿するサンプルを作ってみようと思います。
SlackAPIを使用すれば、とても簡単に実装する事ができます。

1.Slackアカウントを作成する

まずはSlackのアカウントを作成しましょう。
画面右上の「Create a new team」からアカウントを作る事ができます。

Slack homepage

この画面まできたら、まずはチャットの準備完了です。簡単!

Slack chat home

2.SlackAPIを使用するためのトークンを取得する

プログラムからSlackに投稿するためには、トークンと呼ばれる認証情報が必要になります。トークンは、Slack Web APIのサイトで作る事ができます。Slack Web APIサイトにアクセスして、Authenticationの近くにある「Create token」を押しましょう。

slack-webapi

slack-createtoken-before

これでトークンが作成されます。

slack-createtoken-after

あとはこのトークンをもとにSlackAPIを呼び出す事ができます。

SlackAPIを使って実装してみる

今回はシンプルにSlackに投稿するためのpostMessageメソッドを使用してみましょう。

postMessageメソッドをリクエストするためのURLは’https://slack.com/api/chat.postMessage’になるので、これをAjaxでコールしてみます。
また、postMessageメソッドを使うにあたり、色々なパラメータを設定する事ができるのですが、今回は必要最低限の情報として、以下のパラメータを設定してみました。

token
先ほど取得したトークン
channel
投稿先のチャンネル
username
投稿時のアカウント名
text
投稿内容

実際のコードはこんな感じになります。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slack Sample</title>
</head>
<body>
	<a href="#" class="slack-submit">Post to Slack!</a>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="sample.js"></script>
</body>
</html>
$(function () {
    $('.slack-submit').on('click', function () {
	var url = 'https://slack.com/api/chat.postMessage';
        var data = {
            token: 'あなたのトークン',
            channel: '#general',
            username: 'oreno-bot',
            text: 'Hello Slack!'
        };

        $.ajax({
            type: 'GET',
            url: url,
            data: data,
            success: function (data) {
                alert( 'Can I post to Slack? :' + data.ok );
            }
        });
    });
});

このHTMLを表示して、「Post to Slack!」リンクをクリックして、JavaScriptを実行してみると・・・

Slack posted

ちゃんと投稿されていますね!
こんな感じで簡単にSlackへ投稿する事ができます。
他にも色々なメソッドが用意されていますので、良ければ試してみてはどうでしょうか。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone