Slackでほんやくコンニャク


#概要

Slackで投稿した文章に対して、SlackAppのアクションを実行すると
翻訳した文章がスレッドに投稿されます。
![Sep-12-2019 18-59-47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/bb795362-3c7d-975e-3f4d-0129576a62ab.gif)


##使うもの

- Slack
- Google Translate API
- Integromat

##全体像
SlackAppのアクションで送信したHTTPリクエストはIntegromatで受け取ります。
Integromat側で、リクエストに含まれる情報を元にGoogle Translate APIを投げて
その結果をSlackに投稿します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/a55ed562-55c4-94e9-d555-8320eb1c1a5a.png)


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

## Integromatの基本的な操作方法

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

## Google Translate APIの設定

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


#Integromat:Webhooksモジュールを追加
![Sep-12-2019 21-23-34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/5e153259-9ad1-61f2-d5ae-edd3909edeb8.gif)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/4cb63b80-6643-1f9b-06ff-6ee78cace80b.png)

このURLをSlackに設定するので控えておきます。
あとでテスト実行するので、画面はこのままにしておいてください。
![WebhookURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/c5557d43-5e09-93f7-b102-0ea094d0a9d1.png)



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

![SlackAppCreate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/d2540d30-284b-e0f3-6cd2-cef4f1ac7ea1.png)

##アクション実行時のリクエスト先を設定
InteractiveComponents をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/4eb4821f-c789-3c27-467c-5be4af0e6ea3.png)

On にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/d7542fc0-2377-024b-b34b-3fda526900b5.png)

RequestURLには、先ほどIntegromatで取得したURLを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/05e4a1a3-c52d-1ef1-bda4-26e3d4d7ed83.png)

Create New Actions をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/4fd82cf7-5926-9fa7-65d6-21914a32d08f.png)

Callback IDは、Google Translate API実行時の翻訳後の言語指定に使うので、ISO-639-1コードに準拠させます。
[このページ](https://cloud.google.com/translate/docs/languages)で確認出来ます。
たとえば日本語に翻訳させたいならjaです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/156c0221-b8b5-afdd-4f74-2bda1e122d79.png)

Save Changes をクリックします。

##Appのインストール
左ペインの OAuth & Permissions を選択し、Install App to Workspace をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/f8c04f8c-6b39-1f23-5c21-7fed954adbf6.png)
Agree をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/5a611519-f036-e018-2fa9-71e0ad288446.png)

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

##Webhookモジュールでデータ構造を設定する
Integromat側のWebhooksの設定画面が以下のようなリッスン中の画面になっていることを確認します。
![WebhookURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/c5557d43-5e09-93f7-b102-0ea094d0a9d1.png)


この状態で、Slack側でアクションを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/aa58729b-f19d-165d-0fce-c069c43c76ef.png)

Successfuly determined. となります。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f39393339382f31326332393166362d323936302d653439392d376131302d3637656533383430653966322e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/d6b5487a-6546-cae5-d74d-459d2cd6968d.png)



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

```json: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
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/2aeeff31-96b3-cb09-780f-22bcf69abd0d.png)

Slack側でアクションを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/aa58729b-f19d-165d-0fce-c069c43c76ef.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/74511470-d94e-9a05-5a63-e30c644da375.png)

Detailsをクリックするとこのような画面になるので、吹き出しの数字をクリックして実行内容を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/d08e264d-5a31-6722-0e3f-64eda12026aa.png)


**Webhookモジュールの実行結果**
payloadの中にリクエスト内容が入っています。
![スクリーンショット 2019-09-11 22.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/81288f1a-28c5-7af1-d1c5-db26fc19a0dc.png)

**ParseJSONモジュールの実行結果**
リクエストの内容がパースされていることを確認出来ます。
![スクリーンショット 2019-09-11 22.37.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/11a9c5fb-a481-f451-3060-33ebca13fd9f.png)


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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/f3ac3ebd-fb5f-4f78-6c14-8836803953d1.png)


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

モジュールとモジュールの間の線の下にあるスパナをクリックします。
ここで次のモジュールにつなげるための条件設定をします。
![スクリーンショット 2019-09-11 22.46.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/2583aeb7-9887-3cda-5202-3f3865915593.png)

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

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

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

![スクリーンショット 2019-09-11 22.51.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/467689ec-a6e9-11fa-7b25-5dd561e4c1a9.png)

これで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を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/c0284163-66c6-64e1-4f8e-a57b8cd9be17.png)


#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。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99398/b3e89501-495c-7c2f-49bd-f825f63fd919.png)


##そのほかの設定
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を設定すると
翻訳結果を投稿するボットの名前やアイコンを設定できます。

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