Slackでほんやくコンニャク

#概要

Slackで投稿した文章に対して、SlackAppのアクションを実行すると
翻訳した文章がスレッドに投稿されます。

##使うもの

• Slack
• Google Translate API
• Integromat

##全体像
SlackAppのアクションで送信したHTTPリクエストはIntegromatで受け取ります。
Integromat側で、リクエストに含まれる情報を元にGoogle Translate APIを投げて
その結果をSlackに投稿します。

#この記事にかかれていないこと

Integromatの基本的な操作方法

各モジュールの細かい設定のみ説明しています。
直感的に作っていける画面なので数分触れば慣れるでしょう。

Google Translate APIの設定

初期設定時にスクショなどを取ってなかったので省略しています。
特にドキュメントを見なくても出来たので、そんなに難しくはないはず。

#Integromat:Webhooksモジュールを追加

WebhooksモジュールでAddをクリック
-> Custom Webhooks を選択
-> Add をクリック
-> Webhook nameを設定

このURLをSlackに設定するので控えておきます。
あとでテスト実行するので、画面はこのままにしておいてください。

#Slack:アプリを追加
##SlackAppの作成
https://api.slack.com/apps にアクセス
-> Create New App
-> App Nameを入力して Create

##アクション実行時のリクエスト先を設定
InteractiveComponents をクリックします。

On にします。

RequestURLには、先ほどIntegromatで取得したURLを設定します。

Create New Actions をクリックします。

Callback IDは、Google Translate API実行時の翻訳後の言語指定に使うので、ISO-639-1コードに準拠させます。
このページで確認出来ます。
たとえば日本語に翻訳させたいならjaです。

Save Changes をクリックします。

##Appのインストール
左ペインの OAuth & Permissions を選択し、Install App to Workspace をクリック

Agree をクリック

#Integromat:リクエストのデータ構造を分析する
通常はWebhookモジュールで受け取るリクエストのデータ構造を設定しておくことで
リクエスト内容を次のモジュールで利用できますが
SlackAPPからのリクエストはpaylodの中に詳細がまとめて入ってしまうので
Parse JSONモジュールを利用して、リクエストデータを解析します。

##Webhookモジュールでデータ構造を設定する
Integromat側のWebhooksの設定画面が以下のようなリッスン中の画面になっていることを確認します。

この状態で、Slack側でアクションを実行します。

Successfuly determined. となります。

##JSONモジュールを追加
JSONモジュールを追加
-> Parse JSONを選択
-> Data Structure で Addを選択
-> Generatorに以下の内容を設定。

datastracture

{
    "type": "",
    "token": "",
    "action_ts": "",
    "team": {
        "id": "",
        "domain": ""
    },
    "user": {
        "id": "",
        "name": ""
    },
    "channel": {
        "id": "",
        "name": ""
    },
    "callback_id": "",
    "trigger_id": "",
    "message_ts": "",
    "message": {
        "client_msg_id": "",
        "type": "",
        "text": "",
        "user": "",
        "ts": "",
        "team": "",
        "edited": {
            "user": "",
            "ts": ""
        },
        "thread_ts": "",
        "reply_count": 2,
        "reply_users_count": 1,
        "latest_reply": "",
        "reply_users": [
            ""
        ],
        "replies": [
            {
                "user": "",
                "ts": ""
            },
            {
                "user": "",
                "ts": ""
            }
        ],
        "subscribed": true,
        "last_read": ""
    },
    "response_url": ""
}

##いったん動かしてみる
ここまでの設定で何をしているのか確認するために、いったん保存して実行してみます。
保存時に注意書きがでますが、気にせずSave anyway

Slack側でアクションを実行します。

Integromatのシナリオに戻って、HISTORYを確認します。

Detailsをクリックするとこのような画面になるので、吹き出しの数字をクリックして実行内容を確認します。

Webhookモジュールの実行結果
payloadの中にリクエスト内容が入っています。

ParseJSONモジュールの実行結果
リクエストの内容がパースされていることを確認出来ます。

#Integromat:フィルター設定(token検証)
SlackAPPでは、APPに設定したURLにHTTPリクエストを投げているだけなので
このURLさえ知っていれば誰でもリクエストを投げることができてしまいます。

自分のSlackAPP以外からのリクエストをはねるために
リクエストに含まれるtokenがSlackAPPのtokenと一致していることを確認します。

Integromatで実現するには
モジュールとモジュールをつなぐ線のところでフィルターをかけます。

##Integromat:フィルター設定
Google Translateモジュールを追加しておきます。

モジュールとモジュールの間の線の下にあるスパナをクリックします。
ここで次のモジュールにつなげるための条件設定をします。

Labelはスパナの上に表示させる文字なので適当に。

Slack APPからのリクエストに含まれるtoken = SlackAPPのVerification Token
であることを確認したいので、Conditionは以下の通りにします。

• 片方にParse JSONのtokenを設定
• もう片方にSlackAPPのBasic Informationの中にあるVerification Tokenを設定
• 演算子にはText operatorsのEqual toを選択

これでtokenが一致したリクエストのみが次に進めるようになります。

#Integromat:Google Translateモジュールを追加

##Google Translate APIについて
2019/9/12現在、Google Translate APIは50万字まで無料です。
detectメソッドを使って言語を検出すると料金がかかりますが
translateメソッドでソースとなる言語を指定せず、自動検出する分には無料で使えるようです。
（本当に無料なのか請求くるまでドキドキする）
https://cloud.google.com/translate/pricing
料金や制限については改訂があるかもしれないので、自己責任でお願いします。

##Connection
APIキーが必要になります。

##そのほかの設定
callback_idに翻訳後の言語のコードを設定していたので、Target language(To)にはcallback_idをそのまま設定します。
Text to translateには翻訳したい文章なので、message: textを設定します。

#Integromat:Slackモジュールを追加
特定のチャンネルにただメッセージを投稿するだけならCreate a Messageでよいのですが
今回は元の文章にスレッドでメッセージを投稿させたいので、Make an API Callを選択します。

##Connection
SlackのConnectionには2通りあります。
お好きな方をどうぞ。

###IntegromatのAppを追加する方法
お手軽な方が良い場合はこちらをどうぞ。
ConnectionのAddからContinueをクリックすると別タブで認証画面が開くので
AllowをクリックするだけでOKです。
SlackにIntegromatのAppが追加され、Integromat側でもConnectionが作成されます。

###今回作成したAppのClientIDとClientSecretを使う方法
少し手間ですが、権限を出来るだけ絞りたい場合はこちらがよさそう。

Slack App側の設定
作成したSlack AppのOAuth & Permissionsにある「Redirect URLs」に以下のURLを設定します。
https://www.integromat.com/oauth/cb/slack/

ClientIDとClientSecretの確認
作成したSlack Appの Settings > Basic Information > App Credentials から確認できます。

Integromat側の設定
SlackモジュールのConnectionのAddをクリックした後
Show addvanced settings にチェックを入れることで、入力画面が出てきます。
あとは画面に従って設定していけばOK。

##そのほかの設定
Connectionの作成に成功したら、あとは以下の通り設定

• URL

chat.postMessage

• Headers

Key	Value
Content-Type	application/json

• Query String

Key	Value
channel	Webhookモジュールの「channel: name」
text	Google翻訳モジュールの「Translated text」
thread_ts	ParseJSONモジュールの「message_ts」

必須項目は上記のみですが、usernameやicon_emojiを設定すると
翻訳結果を投稿するボットの名前やアイコンを設定できます。

#完成！
これで完成です。
スレッドにすることで翻訳結果が目隠しになるので、語学学習とかに使えそうな気がします。