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

Building Reacjilator (translation bot) for Slack using Slack API

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)
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!