Slackにインスタントな翻訳機能を提供する-レシピ構築編-

[前回の記事](https://qiita.com/yabikkio/items/a9d13e5c1ec14be5097f) の続きです。


まずは、作りたいボットの仕様をおさらいします。

> 1. Slackの投稿に絵文字リアクション :flag_jp: が付けられたら起動
> 2. 日本語訳に対応
> 3. 翻訳結果をスレッドに返信する

# コネクション
### Workbot for Slack
前回の記事で設定済みです。

### DeepL
あらかじめコミュニティライブラリから、DeepLコネクタをinstallしておきます。
* DeepLコネクタ：[JPDC版](https://app.jp.workato.com/custom_adapters/151157/details?community=true) [USDC版](https://app.workato.com/custom_adapters/151157/details?community=true)


<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/dc6ae8a1-a325-1ac5-1b08-b834cd78b1e2.png">

* **Service plan**：利用するDeepLアカウントのプランに応じて選択
（今回は無料版を使うため`DeepL API Free`を選択しています）
* **Auth key**：利用するDeepLアカウントで発行したAPIキーを入力

Connectボタンをクリックし、ステータスが`Connected`となればOKです。

# トリガー
「Workbot for Slack」コネクタを使います。
トリガーは「**new event**」、connectionは前回の記事で作成したものを使用します。
#### Event name
`Reaction Added (reaction_added)`を選択

#### Set trigger condition
 付けられたリアクションが :flag_jp:(日本の絵文字) の時だけ、ジョブが実行されるように条件を付けたいと思います。
 
トグルをonにすると条件を設定するフィールドが展開されるので、次の通り設定します。

* **Trigger data**：トリガー(Step1)の`Reaction`を選択
* **Condition**：`equals`を選択
* **Value**：「jp」を入力
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/f2672e94-9e01-bdfd-022d-80c8cf232276.png">

# アクション
## Step2 | メッセージの読み出し
### conversations.historyは使いません
トリガーから取得したメッセージIDを元に、メッセージ（テキスト）を取得します。
前回の記事では、カスタムワークボットに紐づけるSlackAppへのスコープ追加の際に、メッセージ取得には`conversations.history`を使うのかな？とアタリを付けたと思います。

実は、`conversations.history`では**返信の取得に対応していません**。
通常のメッセージは取れるけど、スレッド内のメッセージ（＝返信）は取れないのです。

一方で、よく似たものに`conversations.replies`があります。**これは返信を取得するために用意されたメソッドですが、(返信先である)元のメッセージの取得にも対応しています。**
今回のケースでは使い勝手がいいのでこちらを使います。

幸い、`conversations.replies`の要求スコープは`conversations.history`と同じです。
よかった！前回App側に設定したスコープで問題ないですね。

### ガイドに沿ってカスタムアクション設定
メッセージの取得については、Workbot for Slackコネクタの標準アクションに無いため、**カスタムアクション**を利用します。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/67594627-5283-fa77-f0e8-a4683f6cc274.png">

ガイドを使うと、APIリクエストのテスト送信と、レスポンスのスキーマの自動生成を兼ねることができ便利です。

#### ＜ガイド前＞
* **Action name**：任意の名称を入力

「Start guided setup」ボタンを押すと、ウィザードの画面が表示されます。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/b8710209-f2ba-e6d5-794d-4f3c94552d97.png">

#### ＜ガイド１＞（リクエスト概要設定）
* **Method**：`GET`を選択
* **Path**：「conversations.replies」を入力

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/883bf822-9878-12b7-f86b-fbbc069a0314.png">

右下の「next」ボタンで次画面へ遷移します。

#### ＜ガイド２＞（リクエストのサンプルパラメータ設定）
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/56010545-96f7-6498-2350-e94c8f7b3067.png">

「Add URL parameter」ボタンで展開し、Prameter name と Valueに次の値を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/28646c92-8366-c456-247b-8a4c94545350.png)

＜サンプル送信用のパラメータ設定＞
* **channel**：チャンネルID
* **ts**：タイムスタンプの加工値
* **latest**：タイムスタンプの加工値
* **inclusive**：true
* **limit**：1

「Send request」ボタンでリクエストが送信されます。

#### ＜ガイド３＞（レスポンス確認）
リクエストの送信に成功したら「Apply configuration」ボタンでガイドを終了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/5471bdf3-01cd-44a8-36b8-8671673b2067.png)

サンプル送信のレスポンスを通して、**Request body**のスキーマが生成されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/58523582-3560-1940-f9ab-90a74df75a71.png)


### ガイド後の手直し
とても重要な作業です。
このままではリクエストパラメータがテスト値になっているため、正しい値に変更します。
##### Request URL parameters

* **channel**：Step1の`Channel`を設定
* **ts**：Step1の`ts`を設定
* **latest**：Step1の`ts`を設定
* **inclusive**：（そのまま）
* **limit**：（そのまま）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/771ff406-9d8c-e0fc-857f-3150e1e2b1cc.png)


:::note info
これらの値の意味は、「指定のチャンネルにて、とある日時(タイムスタンプ)以降に投稿された直近の返信を１件取得する」です。
タイムスタンプの一意性を利用し、実質的に指定のチャンネルから特定の１つのメッセージを抽出する方法となります。
:::

## Step3 | 翻訳
メッセージを日本語に翻訳するための設定を行います。

アクションは「**Translating text**」、connectionは先ほど作成したものを使用します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/90e33c71-68fb-fa15-caf5-eb70d8ae4bce.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/a42d9b70-f9db-f097-f08c-d19af6d53476.png">

* **Text**：Step2の`Text`を設定
* **Target language**：`Japanese`を選択

## Step4 | 翻訳結果の返却
メッセージ送信には、「**Post message**」アクションを利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/a2f9d1ab-a574-6a86-824e-4922fe4885a4.png)


* **Channel name/DM**：Step1の`Channel`を設定
* **Notification text**：Step3の`Text`を設定

上記の設定は、どのチャンネルに何を投稿するか の指定となります。
これに加えて、**返信**の形で翻訳結果を送信したいため、次の設定を追加します。

#### スレッドIDの設定

まず、「Thread ID」というフィールドは画面表示時には隠れているので、表示させます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/1ff9b271-f7cd-3eee-a594-df74ad165c93.png">
（Advanced のThread IDに✓を入れ、「Apply changes」ボタンをクリック）

「Thread ID」フィールドが表示されたら、値を設定します。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/be2b808e-1f5c-8f9d-8542-7b3f6afc2532.png">

* **Thread ID**：Step1の`Ts`を設定

必要な設定はこれで終わりです。

### 完成レシピ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/dd863ea1-e907-8707-b097-9a9a41be1cf2.png)

# 実行結果
#### 通常の投稿の翻訳
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/3b0d7e79-3bb9-c671-8262-6b6815ce4e13.png">

#### スレッド内の投稿（返信）の翻訳
<img width="550" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/fa842dbf-d8cf-6ca7-8d07-5df4ee94a612.png">



# さいごに
お疲れ様でした。
前・中・後編にわたって読んでくれた方は、Workatoのレシピ構築方法に加えてSlackAPIのイベントやメソッド周辺の知識が深まったのではないでしょうか。

カスタムワークボットの設定、カスタムアクションの実装といった高度な内容が含まれていましたが、どちらも利用方法を覚えておくと大変便利です。