クラウドネイティブアプリ開発

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

  • AWS
  • Lambda

API 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]を選択する

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

frombotocore.vendored importrequests
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)
    = 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”ロールを選択する 

[ポリシーをアタッチします]をクリックする
“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でログの確認もしてみました🙂 


カテゴリー
タグ

この記事を書いたメンバー

Anna
Anna

このメンバーの記事一覧

SAPシステムや基幹システムのクラウド移行・構築・保守、
DXに関して
お気軽にご相談ください

03-6260-6240 (受付時間 平日9:30〜18:00)

  • TOP
  • ブログ
  • API GatewayとLambdaでSlack翻訳アプリを作成してみました