Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Copy Smallchat Arcana meetup#43

181 views

Published on

Copy Smallchat

Published in: Software
  • Be the first to comment

  • Be the first to like this

Copy Smallchat Arcana meetup#43

  1. 1. Slack Web API を使用して Webページにサクッとお問合せ機能を 実装する 2018/10/25 Arcana Meetup #43 Kashiwagi Ryota
  2. 2. 自己紹介 • 株式会社スタジオ・アルカナのブログ(2016年、サーバーサイドエンジニアがゼロから React/Reduxを学習したときの方法を振り返る)に感銘を受け2017年入社をする • フロントエンジニアになろうとしているが、なんでもする • 最近ジムに通い始めた
  3. 3. 裏テーマ
  4. 4. Smallchatをパ○ってみた
  5. 5. Smallchatとは? • WebサイトにSlackと連携したチャット機能を持たせることができるもの • Smallchat https://small.chat/
  6. 6. Smallchat デモ
  7. 7. 構成 Webサイト
  8. 8. 構成 Webサイト Slack Web API
  9. 9. Slack Web API とは? • Slackのワークスペースの情報を照会するインターフェースです • こんな感じで呼び出せます 呼び出す前にtokenを取得する必要あり
  10. 10. 使用する Slack Web API
  11. 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. 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. 13. 構成 Webサイト
  14. 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. 15. デモ
  16. 16. まとめ • 今回メッセージ受信をポーリングしていたので、機会があればSlackの Real Time Messaging API を使ったWebSocket での通信も試してみたい • サクッと作成するつもりだったが思いの外時間がかかった • サーバーレス(Node.js)、コンテンツのウィジェット化の知識があれば、 時間はかからなかった • コードが冗長になっている箇所を放置しているのでキレイにする
  17. 17. おわり

×