[Japanese] Building a Translation Bot - 翻訳ボットを作ろう

1b741e5d8f5efe12c6307db4ebfab8f9?s=47 Tomomi Imura
February 09, 2018

[Japanese] Building a Translation Bot - 翻訳ボットを作ろう

Building Reacjilator (translation bot) for Slack using Slack API

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

February 09, 2018
Tweet

Transcript

  1. Tomomi Imura (@girlie_mac) February, 2018 1 Making Bots with Slack

    API
  2. Tomomi Imura • Slack 本社 Developer Relations 所属 • api.slack.com

    の中の人 • 英語、日本語、JavaScript を話す • カリフォルニア州、サンフランシスコ市の住 人 • ネコ大好き • HTTP Status Cats 作者
  3. Slack 社内ボット: Off The Grid (フードトラック) Bot

  4. Slack 社内ボット

  5. Slack 社内ボット

  6. Slack 社内ボット

  7. Slack 社内ボット

  8. Slack 社内ボット

  9. Building a Translation Bot 翻訳ボットを作ろう Tomomi Imura (@girlie_mac)

  10. None
  11. 1. Setting up Your Internal Integration App

  12. Internal Integrations vs. Installable Apps 基本的にどちらも Slack アプリ。だけど違いは? Internal Integrations

    • 自分のワークスペースのみ にインストール • OAuth 認証トークンは自分 のワークスペースのものひ とつだけ Installable Apps • 配布可能で、どのチームのワー クスペースにでも自由にインス トール可能 • ボタンで認証。OAuth 認証トー クンは各ワークスペースで生成 される
  13. Internal Integrations vs. Installable Apps 基本的にどちらも Slack アプリ。だけど違いは? Internal Integrations

    • 自分のワークスペースのみ にインストール • OAuth 認証トークンは自分 のワークスペースのものひ とつだけ Installable Apps • 配布可能で、どのチームのワー クスペースにでも自由にインス トール可能 • ボタンで認証。OAuth 認証トー クンは各ワークスペースで生成 される We’re building this today!
  14. Creating an App Go to: https://api.slack.com/a pps?new_app=1 アプリの名前を つける ワークスペースを選択

    2 3 1
  15. Creating an App: Get Credentials 1 2 .env 認証情報を取得

  16. Creating an App: App Descriptions アプリのディスプレイ情 報(名前、詳細、アイコ ンなど) 1 2

  17. Emoji Reaction (“Reacji”) Events reaction_added イベントが発生

  18. Enable Events 1 2 3 イベントをオンに する イベントを受け取る URL (自分のサーバ

    + /events ルート・ パス) * 仮のローカルサーバ URLは ngrok がおすす め!
  19. Adding a Bot User 1 2 ボットの名前

  20. OAuth Token 1 2 認証トークン .env

  21. OAuth Scopes 1 必要なスコープを全 て選択

  22. OAuth Scopes Scopes Required for chat:write:bot ボット経由でメッセージを送信 reactions:read 絵文字リアクションにアクセス channels:read

    パブリック・チャンネル情報にアクセス channels:history パブリック・チャンネルのメッセージにアクセス *:history プライベートなど他のチャンネルのメッセージにアクセス If you want to include private channels, DM, and group channels, you also need to enable mpim.history, im.history, groups.history
  23. 2. Google Cloud API Keys

  24. Create a Google Cloud Project 1 Go to: http://console.cloud.google.com/ projectcreate

    2 適当なプロジェクト名をつ ける
  25. Generate an API Key 1 2

  26. 3. User Experience Design

  27. UX Matters ユーザーにとって使いやすいアプリを作る • 全てのメッセージを翻訳しない(ユーザーが選択した メッセージのみ翻訳。) • スレッドに表示(本文の邪魔にならない。どのメッセー ジの翻訳かが後でもわかる。) • ボットからの返信(翻訳)のフォーマットを工夫して読み

    やすく。
  28. 4. Using Slack API

  29. Storing Credentials in .env File ENV 環境変数ファイルを作成 SLACK_CLIENT_ID= SLACK_CLIENT_SECRET= SLACK_VERIFICATION_TOKEN=

    SLACK_AUTH_TOKEN= GOOGLE_PROJECT_ID= GOOGLE_KEY= .env
  30. Listening to Events

  31. Emoji Reaction (“Reacji”) Events reaction_added イベントが発生

  32. Receiving Events (Node.js) Express.js を使ってイベントを POST 経由で受け取るルートを設定 const express =

    require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); const server = app.listen(process.env.PORT || 5000); app.post('/events', (req, res) => {   ... }); 1
  33. Events Response req.body.event Response event:{ type: 'reaction_added', user: 'U5R3PALPN', item:

    { type: 'message', channel: 'C5TS6D8CC', ts: '1508284331.000239' }, reaction: 'flag-jp', item_user: 'U5R3PALPN', event_ts: '1508284554.000254' } :flag-jp: emoji 「リアク字が発生!」イベント。 他にどういうイベント・タイプがある? https://api.slack.com/events
  34. Receiving Events Emoji Reaction (Reacji) がユーザによって加えられた時のイベント発生 app.post('/events', (req, res) =>

    {  if (req.body.event.type === 'reaction_added') {   let emoji = req.body.event.reaction;   if(emoji.match(/flag-/) && req.body.event.item.type === 'message') {    // 絵文字(国)と言語をマッピング e.g. jp (日本)→ ja (日本語)    // conversations.replies API で、リアク字のつけられたメッセージを取得    // Google Translation API を使ってそのメッセージを指定の言語に翻訳    // chat.postMessage API で翻訳されたメッセージをスレッドに表示 }  } });
  35. Getting a Message リアク字のつけられたメッセージを取得 • conversations.history または • conversations.replies メソッドを使う。

    メッセージを取得。ただしスレッドは含ま ない、親メッセージのみ スレッドに返答されたメッセージを含 む。親メッセージ、子メッセージ両方 取得できる
  36. Getting a Message リアク字のつけられたメッセージを取得 request.post('https://slack.com/api/conversations.replies', {form: {token: oauthToken, channel: ch,

    ts: ts, limit: 1, inclusive: true}}, function (error, response, body) { if (!error && response.statusCode == 200) { // 取得成功! JSON.parse(body).messages[0]) } }); Channel ID と、タイムスタンプはイ ベント発生時のペイロードから取得
  37. API Response { messages:[ { type: 'message', user: 'U061F7AUR', text:

    'Have you booked your flight to Tokyo?', thread_ts: '1508538072.000022', parent_user_id: 'U5R3PALPN', reply_count: 0, replies: [], subscribed: false, ts: '1508539599.000251', reactions: [ ... ] } ]} JSON.parse(body).messages[0] を取得して、そこで得られるメッセージ ・テキストを翻訳する
  38. Translate the Message w/ Google API const translate = require('@google-cloud/translate')({

     projectId: process.env.GOOGLE_PROJECT_ID,  key: process.env.GOOGLE_KEY }); translate.translate(message.text, lang, (err, translation) => { if (err) { console.log(err); } else { // 翻訳されたメッセージを、スレッドへ投稿 } });
  39. Post the Translated Message to the Thread 翻訳されたメッセージを送信する • chat.postMessage

    または • chat.postEphemeral メソッドを使う。 チャンネルのメンバー全員が見れるように送信 特定のメンバーのみが見れるように送信
  40. let options = { method: 'POST', uri: 'https://slack.com/api/chat.postMessage', form: {

    token: oauthToken, channel: channel, attachments: JSON.stringify(attachments), as_user: false, username: 'Reacjilator Bot', thread_ts: ts } }; request(options, (error, response, body) => { if (error) {console.log(error) } }); Post the Translated Message to the Thread 表示するメッセージは JSON string フォーマット
  41. Using Message Builder https://api.slack.com/docs/messages/builder

  42. Hooray! Yay!

  43. “” https://github.com/slackapi/reacjilator

  44. “” アプリ配信したい?OAuth 説明GIFアニメはこちら https://github.com/slackapi/echobot-oauth-demo

  45. Blueprint で始めよう Blueprint は アプリ開発のテンプレート 基本的なワークフローのコードサンプル → api.slack.com/best-practices/blueprints

  46. Blueprint: よくあるワークフローのサンプルコード 新規ユーザ 通知 新規メンバーへのカスタムメッセージ。行 動規範への署名のうながし アクショナブル通 知 ヘルプデスクへ届いたチケットのトリアー ジ、割付など

    承諾 鍵付きチャンネル上に特別だれかを条件 付きでメッセージ(社内ニュースなど)を書 き込める承諾 アカウント 紐つけ サードパーティのアカウントと Slack アカウ ントの紐つけ チャンネル毎 Webhook チャンネルのメンバーが簡単に使えるウェ ブフックのアドレスの自動生成 チャンネル名 規則 チャンネル名の命名規則をユーザに守ら せるボット
  47. Thank you Now let’s go hacking!