BeeX Technical BlogAPI GatewayとLambdaでSlack翻訳アプリを作成してみました

AWSを本格的に触り始めて3か月経ったので、試しにSlackアプリを作成してみました。

このアプリについて

1. “Hello”を送信する
2. [Translate to Japanese]を選択する
3. 翻訳された結果が返る

技術的要約

◇2と3の間で起きていること
2.1 SlackはエンコードされたURLを送信する
2.2 API gatewayはJSONに変換しLambdaへ送る
2.3 LambdaはデータをParseしAmazon Translateへ送り、SlackにPOSTする

#Parseされたデータ:
event['message']['text'] = "hello"
event['callback_id']] = "ja"
event['response_url'] = "https://hooks.slack.com/app/ABCDE/12312341234/"
#Amazon Translateに送られるデータ:
    	  (		
    	  Text=hello,
         SourceLanguageCode=auto,
         TargetLanguageCode="ja"
    	  )
#Slackに送られるデータ:
POST /app/ABCDE/12312341234/
Host: hooks.slack.com
Content-type: application/json
{
    "blocks":[
    	{
    	  "type": "section",
         "text": {
            "type": "mrkdwn",
            "text": "こんにちは"
    	   }
	}
    ]
}

1. Lambdaの作成

1. [一から作成]
2. 関数名を入力する
3. ランタイムは、[Python 3.7]を選択する

[関数の作成]をクリックする
コードを編集できるようになるので全て選択し、以下のコードに置き換える

from botocore.vendored import requests
import boto3
import json
def create_slack_payload(text):
    return {
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": text
            }
        }
    ]
    }

def lambda_handler(event, context):
    msg = event['message']['text']
    target_language = event['callback_id']
    response_url = event['response_url']
    
    print("翻訳前:" + msg)
    print("response_url:" + response_url)
    print("callback_id:" + target_language)
    print(json.dumps(create_slack_payload(msg)))
    
    client = boto3.client('translate')
    translate_response = client.translate_text(
    Text=msg,
    SourceLanguageCode='auto',
    TargetLanguageCode=target_language
    )
    
    translated_text = translate_response["TranslatedText"]
    
    print("翻訳後:" + translated_text)
    r = requests.post(response_url, data=json.dumps(create_slack_payload(translated_text)))
    return r.json()

◇テストイベントの設定:
関数をテストするために、テストイベントを設定する

ドロップダウンメニューをクリックし、[テストイベントの設定]を選択する
以下のサンプルのJSONでテストイベントを作成する

{
    "type": "message_action",
    "token": "ABCDEFGHIJKabcdefghijk",
    "action_ts": "123456789.012345",
    "team": {
        "id": "ABCDE12345",
        "domain": "slack-domain"
    },
    "user": {
        "id": "ZZAABBCC12",
        "name": "username"
    },
    "channel": {
        "id": "ABCDEFG123",
        "name": "directmessage"
    },
    "callback_id": "ja",
    "trigger_id": "123412341234.123412341234.12341234asdf1234asdf",
    "message_ts": "123412341234.0000000",
    "message": {
        "client_msg_id": "a1b2c3-a123-b456-b631-1191f49ab175",
        "type": "message",
        "text": "hello",
        "user": "ZZAABBCC12",
        "ts": "123412341234.0000000",
        "team": "ABCDEFG1234"
    },
    "response_url": "https://hooks.slack.com/app/ABCDE/12312341234/12341234asdfaf"
}

下部の[保存]をクリックして、テストイベントを保存する
右上の[保存]をクリックして、関数も保存する
◇実行ロール:
Lambda関数はAmazon Translateを呼び出すので、IAMロールが必要 Lambda関数のページで、[実行ロール]までスクロールダウンする
“YOUR-ROLE-NAME roleを表示”をクリックすると、IAMコンソール画面が開く

[ポリシーをアタッチします]をクリックする
“translate” と検索し“TranslateReadOnly”ロールを選択する

下部の[ポリシーをアタッチ] をクリックする
Lambda関数に戻り、正しい権限があるかDesignerを確認する

ここで、先ほど作成したLambda関数をテストできる
[テスト] をクリックし以下の画面が表示される[ログ出力]の下部では以下の画面が表示される

2. API Gatewayの作成

API Gatewayの画面で、[APIの作成]をクリックする

[アクション] -> [メソッドの作成]をクリックする

“POST”メソッドを作成する
統合タイプで[Lambda関数]を選択する
[保存]をクリックする


“OK” をクリックし、権限を追加する

次にエンコードされたURLデータをJSONに変換するために、マッピングテンプレートを作成する
[統合リクエスト]をクリックする
[マッピングテンプレート]で、テンプレートを新規作成する
[マッピングテンプレートの追加]をクリックする

マッピングテンプレートは以下:
application/x-www-form-urlencoded

#set ($test = $input.body.substring(0,8))
#if ($test == "payload=")
#set ($encodedJSON = $input.body.substring(8))
$util.urlDecode(${encodedJSON})
#end

次に、APIをデプロイする
[アクション]メニューで、 [APIのデプロイ]をクリックする

ステージを指定する
URLをコピーする
これはSlackアプリ作成時に必要

3. Slackにインストール

https://api.slack.com/apps
[Create an App]をクリックする
アプリ名を入力し、 [Create App]をクリックする
[Interactive Components]で、スイッチをオンにする。
Request URLのために、 API GatewayからURLをペーストする


Actionsで、 [Create New Action]を作成する
下記のように入力し、 [Create]をクリックする

メモ: 最大5個のアクションを作成可能。 Amazon Translateを呼び出すときに“Target Language” としてCallback IDは使われる。

[Install App] で[Install App to Workspace]をクリックする

最後に

最初に示した動作が確認できると思います。

デバッグ

ちなみに今回初めてデバッグのために、CloudWatchでログの確認もしてみました🙂

BeeX Technical Blogについてのお問い合わせ

BeeX Technical Blogのエントリにご質問が御座いましたらお気軽にお問合せください。

お電話でのお問い合わせ

☎ 03-6214-2830

受付時間 平日9:30〜18:00

フォームでのお問い合わせ

お問い合わせフォーム