[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. 2.

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

    の中の人 • 英語、日本語、JavaScript を話す • カリフォルニア州、サンフランシスコ市の住 人 • ネコ大好き • HTTP Status Cats 作者
  2. 10.
  3. 12.

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

    • 自分のワークスペースのみ にインストール • OAuth 認証トークンは自分 のワークスペースのものひ とつだけ Installable Apps • 配布可能で、どのチームのワー クスペースにでも自由にインス トール可能 • ボタンで認証。OAuth 認証トー クンは各ワークスペースで生成 される
  4. 13.

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

    • 自分のワークスペースのみ にインストール • OAuth 認証トークンは自分 のワークスペースのものひ とつだけ Installable Apps • 配布可能で、どのチームのワー クスペースにでも自由にインス トール可能 • ボタンで認証。OAuth 認証トー クンは各ワークスペースで生成 される We’re building this today!
  5. 18.

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

    + /events ルート・ パス) * 仮のローカルサーバ URLは ngrok がおすす め!
  6. 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
  7. 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
  8. 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
  9. 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 で翻訳されたメッセージをスレッドに表示 }  } });
  10. 35.

    Getting a Message リアク字のつけられたメッセージを取得 • conversations.history または • conversations.replies メソッドを使う。

    メッセージを取得。ただしスレッドは含ま ない、親メッセージのみ スレッドに返答されたメッセージを含 む。親メッセージ、子メッセージ両方 取得できる
  11. 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 と、タイムスタンプはイ ベント発生時のペイロードから取得
  12. 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] を取得して、そこで得られるメッセージ ・テキストを翻訳する
  13. 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 { // 翻訳されたメッセージを、スレッドへ投稿 } });
  14. 39.

    Post the Translated Message to the Thread 翻訳されたメッセージを送信する • chat.postMessage

    または • chat.postEphemeral メソッドを使う。 チャンネルのメンバー全員が見れるように送信 特定のメンバーのみが見れるように送信
  15. 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 フォーマット
  16. 46.

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

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