LoginSignup
45

More than 5 years have passed since last update.

API GatewayからLambdaをぶっ叩く!! 〜HTMLフォームからslackへ投稿しよう〜

Posted at

コンソール上でのAPI Gateway の使い方を確認していきます。
以前頑張って作って忘れたので備忘録兼ねて投稿

APIGateway

ダウンロード.jpeg

  • APIのラッパーとして使える
  • AWS Lambda(以下 Lambda)のトリガーとして使用できる
  • APIコールのスロットリングが可能
  • Mappingテンプレートを使用することで入力値と出力値の整形が出来る
  • IAMと組み合わせた権限制御が可能
  • お金は気にするほどでない

雑にいうとこんな感じのサービス。
今回は別途定義するLambdaのファンクションを呼び出します。

ゴール

クライアント上にサンプルのHTMLファイルを配置し、フォームに文字列を入力、送信ボタンを押すことでslackへ投稿が出来るようにします

HTMLファイルの準備

index.html
<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>

<body>
<header>
    <h1>API GateWay test</h1>
</header>
  <p>Slack post api</p>
<article>
    <form action="後ほど作成するAPI Gatewayのエンドポイント" method="post" accept-charset="utf-8">
        <input type="text" name="message" placeholder="送信文字列を入力"/>
        <input type="submit" value="送信">
    </form>
</article>
</body>
</html>

テキストエディタでこのファイルを作成するとブラウザで以下のページが見れます

TEST.jpg

このページで送信ボタンを押すとAPI Gatewayにフォーム中の文字列を送信し、API GatewayからLambdaのファンクションが起動してslackへbotが投稿する

という動きになります。

では作っていきましょう。

まず、Lambdaのファンクションを定義します。

Lambdaファンクション

lambda_function.py
# -*- coding: utf-8 -*-
import slackweb
import urllib

SLACK_POST_URL = "slackのPOST用URL"

def lambda_handler(event, context):
    print(event)
    test_user = 'api-test'
    icon_emoji = ':moyashi:'
    slack_massage = urllib.unquote(event['message']).encode('raw_unicode_escape').decode('utf-8')
    slack_post(test_user, icon_emoji, slack_massage)
    print(slack_massage)

def slack_post(user, icon, massage):
    slack = slackweb.Slack(url=SLACK_POST_URL)
    slack.notify(text=massage, username=user, icon_emoji=icon)

今回は slackweb というモジュールを使用してslackへ投稿しているのでクライアントで環境を作成し、ZIP化してLambdaへアップロードします。

この辺は省略しますが、詳しい手順はここを参考にして下さい。

API Gatewayの登録

では今回の目的、API GateWayです

マネジメントコンソールから

AWS_mmg.jpg

API Gatewayを選択

API_Gateway.jpg

Create API を押下
APIの作成画面が表示されるので

API_Gateway2.jpg

API Nameに任意の名前を入力し、説明を付けたらCreate APIを押下

リソースの作成

API_Gateway001.jpg

Actionsタブ内のCreate Resource を選択します

API_Gateway002.jpg

公開するAPIのバージョンを作成します。
外部のAPIとかみてもバージョン入ってるので管理のためにやっておいたほうが良いんだろうなという認識です。
リソースのトップにバージョン番号を入れているのはAWSエキスパート養成読本でやっていたので真似ることにしています。

同じ手順でリソースを作ります。
v1の下にslackを作成して下さい。

次はメソッドを追加します

POSTメソッドの作成

slackを選択している状態で作業します

API_Gateway003.jpg

Create Methodを選択します

API_Gateway004.jpg

メソッドを作成したら、メソッドの裏側を設定します。
今回は作成しておいたLambdaのファンクションを指定します

API_Gateway005.jpg

ポップアップが出てくるのでOKして進みます
API_Gateway006.jpg

入力値を弄るため Integration Request を押下します。

API_Gateway007.jpg

Content-Typeは application/x-www-form-urlencoded を指定します。
ポップアプが出てくるのでOKします

マッピングテンプレート
#set($http = $input.path('$').split("&"))
#set($kv = $http[0])
 #set($key = $kv.split("="))
 {
  "message" : "$key[1]"
  }

マッピングテンプレート表記に関しては以下を参考にして下さい
API Gateway のマッピングテンプレートリファレンス

HTMLのPOSTリクエストの形式はこの記事を参考にして把握しました。ありがとうございます

HTMLフォームによるPOSTリクエストでは、各inputタグの内容をkey=valueの形式として&でつないだものがリクエストボディとして送信されます。

とのことだったので、Body部分を分割して、その中から=れ連結されているValueを取得し、JSONになおしています。

json
 {
  "message" : "$key[1]"
  }

実際にLambdaに送られるのはこのJSONメッセージになるって寸法です

デプロイ

API_Gateway008.jpg

API_Gateway009.jpg

こんな感じでステージを作ってデプロイします

API_Gateway010.jpg

するとこんな感じで投稿用のURLエンドポイントが取得できるのでコレをHTMLに埋め込みます
フォームタブ野中ですね。

投稿

では作成したHTMLから投稿してみます

TEST.jpg

文字列を入力して送信を押すと・・・

Slack.jpg

無事slackへ投稿が出来ました。
API Gatewayは組み合わせればいろいろと遊べるので試していきたいです。

参考

http://qiita.com/satetsu888/items/40fc387735192b794da8
http://wiki.mesolabo.com/?%E3%83%A1%E3%82%BD%E7%9F%A5%E6%81%B5%2FHTML%2F%E9%81%95%E3%81%86%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7POST%E3%81%99%E3%82%8B
http://linux.oboe-gaki.com/archives/000333.html

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45