Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Tomomi Imura
February 09, 2018

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

Building Reacjilator (translation bot) for Slack using Slack API

Tomomi Imura

February 09, 2018
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Tomomi Imura
    ● Slack 本社 Developer Relations 所属
    ● api.slack.com の中の人
    ● 英語、日本語、JavaScript を話す
    ● カリフォルニア州、サンフランシスコ市の住

    ● ネコ大好き
    ● HTTP Status Cats 作者

    View full-size slide

  3. Slack 社内ボット: Off The Grid (フードトラック) Bot

    View full-size slide

  4. Slack 社内ボット

    View full-size slide

  5. Slack 社内ボット

    View full-size slide

  6. Slack 社内ボット

    View full-size slide

  7. Slack 社内ボット

    View full-size slide

  8. Slack 社内ボット

    View full-size slide

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

    View full-size slide

  10. 1. Setting up Your Internal
    Integration App

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Creating an App
    Go to:
    https://api.slack.com/a
    pps?new_app=1
    アプリの名前を
    つける
    ワークスペースを選択
    2
    3
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Enable Events
    1
    2
    3
    イベントをオンに
    する
    イベントを受け取る
    URL (自分のサーバ
    + /events ルート・
    パス)
    * 仮のローカルサーバ
    URLは ngrok がおすす
    め!

    View full-size slide

  18. Adding a Bot User
    1
    2 ボットの名前

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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

    View full-size slide

  22. 2. Google Cloud API Keys

    View full-size slide

  23. Create a Google Cloud Project
    1
    Go to:
    http://console.cloud.google.com/
    projectcreate
    2
    適当なプロジェクト名をつ
    ける

    View full-size slide

  24. Generate an API Key
    1
    2

    View full-size slide

  25. 3. User Experience Design

    View full-size slide

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

    View full-size slide

  27. 4. Using Slack API

    View full-size slide

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

    View full-size slide

  29. Listening to Events

    View full-size slide

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

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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 で翻訳されたメッセージをスレッドに表示
    }
     }
    });

    View full-size slide

  34. Getting a Message
    リアク字のつけられたメッセージを取得
    ● conversations.history
    または
    ● conversations.replies
    メソッドを使う。
    メッセージを取得。ただしスレッドは含ま
    ない、親メッセージのみ
    スレッドに返答されたメッセージを含
    む。親メッセージ、子メッセージ両方
    取得できる

    View full-size slide

  35. 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 と、タイムスタンプはイ
    ベント発生時のペイロードから取得

    View full-size slide

  36. 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]
    を取得して、そこで得られるメッセージ
    ・テキストを翻訳する

    View full-size slide

  37. 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 {
    // 翻訳されたメッセージを、スレッドへ投稿
    }
    });

    View full-size slide

  38. Post the Translated Message to the Thread
    翻訳されたメッセージを送信する
    ● chat.postMessage
    または
    ● chat.postEphemeral
    メソッドを使う。
    チャンネルのメンバー全員が見れるように送信
    特定のメンバーのみが見れるように送信

    View full-size slide

  39. 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 フォーマット

    View full-size slide

  40. Using Message Builder
    https://api.slack.com/docs/messages/builder

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Blueprint: よくあるワークフローのサンプルコード
    新規ユーザ
    通知
    新規メンバーへのカスタムメッセージ。行
    動規範への署名のうながし
    アクショナブル通

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

    View full-size slide

  45. Thank you
    Now let’s go hacking!

    View full-size slide