Posted
JavaScriptを使って、Slackに外部から投稿する
ちょっとしたコミュニケーションをとるときにとても便利なチャットツール。最近だとSlackやChatwork、FacebookやLINEなんかもよく使われているのではないでしょうか。
僕の会社ではSlackを使っているのですが、デザインがおしゃれだし、
チャンネルを好きに追加して、同じテーマで議論したりするのは楽しいですよね。
今回はJavaScriptからSlackに投稿するサンプルを作ってみようと思います。
SlackAPIを使用すれば、とても簡単に実装する事ができます。
1.Slackアカウントを作成する
まずはSlackのアカウントを作成しましょう。
画面右上の「Create a new team」からアカウントを作る事ができます。
この画面まできたら、まずはチャットの準備完了です。簡単！
2.SlackAPIを使用するためのトークンを取得する
プログラムからSlackに投稿するためには、トークンと呼ばれる認証情報が必要になります。トークンは、Slack Web APIのサイトで作る事ができます。Slack Web APIサイトにアクセスして、Authenticationの近くにある「Create token」を押しましょう。
これでトークンが作成されます。
あとはこのトークンをもとに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へ投稿する事ができます。
他にも色々なメソッドが用意されていますので、良ければ試してみてはどうでしょうか。