ベトナム語話者と日本語話者がSlack翻訳Botを介しておしゃべりしている様子
OutSystems で Slack翻訳Bot
こんにちは、ローコード系PJでスクラムマスターをしているDaigorianです。
チームのメンバーが言語を気にせずチャットできたら素敵ですよね！
この記事ではそれを実現する翻訳BotをOutSystemで作るポイントをお伝えします。
- チャット言語障壁をなんとかしたい！
- OutSystems の REST API 連携系を習得したい！
という多言語OutSytemsチームの課題が一気に解決するのでおすすめです。
（ちなみに今回OutSystems技術を習得したかったのは他でもないスクラムマスターの私本人でした💦）
主な機能
- 国旗リアクションをつけるとその国の言葉に翻訳される (↑Top画像)
- Botをメンションすると 英語とベトナム語に言語に翻訳される(↑Top画像)
- Google Translate API をどれだけ使ったか確認と、API Keyのメンテができる。
ざっくりとしたしくみの理解
- Slack Appを作成してEvent購読をOnにすると、イベント発生時にSlackがOutSystemsのAPIを叩いてくれます。
- OutSystemsはチャット本文を取得してそれをGoogle Translateに渡します。
- 戻ってきた翻訳文をスレッドに chat.postMessage すれば翻訳文が表示されます
このアプリを作ると学べる技術要素
OutSystemsのAPI連携周りで頻出する要素が出てきます。
リンクはそれぞれの公式ドキュメントです。「つまづいたら公式」はどの界隈でも同じですね。
- OutSystems側
- Slack側
- Google Cloud Translate API側
ではつくっていきましょう！
作り方（Step by Step）
1) Slack App を作る
https://api.slack.com/apps から 新規 App（From scratch）を作成します。
この時点ではまだ動かないので、次の「Event API」と「Web API」で必要な権限と設定を入れていきます。
Event API
2) Event Subscriptions を有効化する
Event Subscriptions を On にします。
ここで Request URL を設定すると Slack が疎通確認（URL verification）を行うため、OutSystems側に受信用エンドポイントを用意します。
3) OutSystems にイベント受信用エンドポイントを作る
OutSystems で REST API（例：/v1/SlackEvent）を作り、Slack からの POST を受け取れるようにします。
まずは URL verification の challenge を返せる最小実装にして、Slack 側の Verified を通すのが近道です。
Slack は最初に { "type":"url_verification", "challenge":"..." } をURL verificationのchallengeとして送ってきます。
受信した challenge をそのままレスポンス本文に返し、HTTP 200 を返すようにします。
検証が成功すれば Verified! の表示が出ます。
5) HMAC署名検証（Slack Signing Secret）を実装する
このままだとSlack以外からもAPIを利用されてしまうので、送信元がSlackであることを確認する実装を加えます。
Slack の X-Slack-Signature と X-Slack-Request-Timestamp を使って署名検証を行います。
v0:{timestamp}:{rawBody} を Signing Secret で HMAC-SHA256 し、ヘッダの署名と一致することを確認します。
また、リプレイ防止に timestamp の許容範囲も設けます。
HMAC-SHA256計算には、 CryptoAPI の ComputeMac を使いました。
https://www.outsystems.com/forge/component-overview/437/cryptoapi-o11
| 引数 | 値 |
|---|---|
| Input | "v0:" + GetXSlackRequestTimestampHeader.Value+":"+GetRequestContent.RawContent |
| Key | TextToBinaryData("YourSlackSigningSecret",Encoding:"ascii") |
| Algorithm | "HMACSHA256" |
6) 受信イベントの種類を絞る（Event Subscriptions）
Subscribe to bot events に必要なイベントだけ追加します
そしてそのイベントに対応した処理を実装すれば完了です！
⸻
Web API（投稿側）
8) Bot Token と権限（Scopes）を設定する
Slack の OAuth & Permissions から Bot Token Scopes を設定します。
投稿するなら最低限 chat:write、メンションを受けるなら app_mentions:read など、使うAPI・イベントに合わせて付与します。
9) OAuth用のRedirect URLsを作成して、セットする。
Oauth のざっくりとした流れはこちらです
ユーザがOAuthで許可操作をしてくれると、SlackはOutSystems へ Code を伝えるためにリダイレクトしてくれます。
まずはそのリダイレクトを受け取れるようにScreenを作ります。
スクリーンのInputパラメータに codeを作っておきます。
そしてそのスクリーンのURLをSlack側に設定します。
そのスクリーンが呼ばれたら、Code から BotTokenを受け取る処理をOnReadyに書いておきます
これで無事BotTokenが得られます。
10) Slack にチャットを POST する（chat.postMessage）
OutSystems の REST API Client で chat.postMessage を呼び出し、channel と text を指定して投稿します。
前のステップで得たBotトークンは Authorization パラメータに”Bearer ”を頭にくっつけて渡します。
API側ではそれをヘッダにくっつけてSlackに送ります。
ちなみに、OutSystems公式の OAuth 機能を使わないのは、OutSystemsの方は「標準OAuthサーバ」向けの実装で、 Slack OAuthはアプリ主導で実装するタイプのOAuthでこのフローと噛み合わないので、OutSystems上では Authentication Type は No authentication としています。
こんな感じで、
- Slackのイベントを受け取る
- SlackへAPIを送る
ができるようになるので、あとはこの組み合わせで思いついたアイディアを実装できます！。
SlackをOutsystemsでもっと面白くして、チームとのコラボレーションを楽しみましょう！