Copy Smallchat

1. Slack Web API を使用して
Webページにサクッとお問合せ機能を
実装する
2018/10/25 Arcana Meetup #43 Kashiwagi Ryota

2. 自己紹介
• 株式会社スタジオ・アルカナのブログ（2016年、サーバーサイドエンジニアがゼロから
React/Reduxを学習したときの方法を振り返る）に感銘を受け2017年入社をする
• フロントエンジニアになろうとしているが、なんでもする
• 最近ジムに通い始めた

3. 裏テーマ

4. Smallchatをパ○ってみた

5. Smallchatとは？
• WebサイトにSlackと連携したチャット機能を持たせることができるもの
• Smallchat https://small.chat/

6. Smallchat
デモ

7. 構成
Webサイト

8. 構成
Webサイト
Slack Web API

9. Slack Web API とは？
• Slackのワークスペースの情報を照会するインターフェースです
• こんな感じで呼び出せます
呼び出す前にtokenを取得する必要あり

10. 使用する Slack Web API

11. メッセージを送信する
{
"ok": true,
"channel": "C1H9RESGL",
"ts": "1503435956.000247",
"message": {
"text": "Here's a message for you",
"username": "ecto1",
"bot_id": "B19LU7CSY",
"attachments": [
{
"text": "This is an attachment",
"id": 1,
"fallback": "This is an attachment's fallback"
}
],
"type": "message",
"subtype": "bot_message",
"ts": "1503435956.000247"
}
}
chat.postMessage
Method URL: https://slack.com/api/chat.postMessage
Preferred HTTP
method:
POST
Argument Example Required
token xxxx-xxxxxxxxx-xxxx Required
channel C1234567890 Required
text Hello world Required
thread_ts 1234567890.123456 Optional

12. メッセージを受信する
{
"messages": [
{
"type": "message",
"user": "U061F7AUR",
"text": "island",
"thread_ts": "1482960137.003543",
"reply_count": 3,
"replies": [
{
"user": "U061F7AUR",
"ts": "1483037603.017503"
},
{
"user": "U061F7AUR",
"ts": "1483051909.018632"
},
{
"user": "U061F7AUR",
"ts": "1483125339.020269"
}
],
"subscribed": true,
"last_read": "1484678597.521003",
"unread_count": 0,
"ts": "1482960137.003543"
},
{
"type": "message",
"user": "U061F7AUR",
"text": "three for the land",
"thread_ts": "1482960137.003543",
"parent_user_id": "U061F7AUR",
"ts": "1483125339.020269"
}
],
"has_more": true,
"ok": true,
"response_metadata": {
"next_cursor": "bmV4dF90czoxNDg0Njc4MjkwNTE3MDkx"
}
}
conversations.replies
Method URL: https://slack.com/api/conversations.replies
Preferred HTTP
method:
GET
Argument Example Required
token xxxx-xxxxxxxxx-xxxx Required
channel C1234567890 Required
Ts 1234567890.123456 Required

13. 構成
Webサイト

14. こうなる
ブラウザ
❷ポーリング
https://aws/メッセージ受信 https://slack.com/api/conversations.replies
https://aws/メッセージ送信
受信メッセージ
https://slack.com/api/chat.postMessage
受信メッセージ
❶送信
token
channel
text
thread_ts(ts)
ts
送信メッセージ(res)送信メッセージ(res)

15. デモ

16. まとめ
• 今回メッセージ受信をポーリングしていたので、機会があればSlackの
Real Time Messaging API を使ったWebSocket での通信も試してみたい
• サクッと作成するつもりだったが思いの外時間がかかった
• サーバーレス(Node.js)、コンテンツのウィジェット化の知識があれば、
時間はかからなかった
• コードが冗長になっている箇所を放置しているのでキレイにする

17. おわり