Amazon API Gateway – JSON形式のレスポンスをHTML形式に加工して返してみる

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Amazon API Gatewayでデータの加工をする

現在弊社で流行りつつあるAmazon API Gatewayですが、一連のリクエストーレスポンス間に
データの加工をすることができます。
例えばSOAP通信やRPCの結果をJSON形式にしたり、JSONのフォーマットを変更したりできるわけです。

また、Content Typeを変更することもできるので、今回はJSON形式のデータをhtmlに変換してみました。

1.リソースとメソッド作成

まずはJSON形式が返ってくるAPIを用意するので、リソースとメソッドを作成します。
適当なリソースを作成し、create methodでGETメソッドを作成します。
自分でLambda関数をつくってもいいですが、めんどくさかったのでHTTP Proxyで
JSONのダミーデータが返ってくるサイトを指定しました。

  • Integration Type: HTTP Proxy
  • HTTP Method: GET
  • Endpoint URL: http://jsonplaceholder.typicode.com/users

APIとかリソースとかの作り方はこのへんを参考にしてください。

メソッドを作成したら、Testボタンを押して動作を確認してみてください。
Response BodyにJSON形式のデータが表示されればOKです。

2.Method Response変更

Method Execution画面でMethod Respnseを選択し、Content Typeを変更します。
HTTP Status横の▼をクリックして詳細を開き、鉛筆アイコンをクリックして
Content typeをapplication/jsonからtext/htmlに変更してください。

method-response

3.Integration Response修正

次に、JSONをHTMLに変換するためのマッピング方法を記述します。
Method Execution画面でIntegration Responseを選択し、▼を押して画面を開きます。
Template Mapping項目のContent Typeにある鉛筆アイコンをクリックし、
「Output passthrough」のチェックをはずしてください。
そして、Output Mappingテキストアリアに下記内容を入力します。

#set($inputRoot = $input.path('$'))

<html>
<body>
<table border="1">
<tr>
    <td>name</td><td>email</td>
</tr>
#foreach($elem in $inputRoot)
    <tr>
      <td>"$elem.name"</td>
      <td>"$elem.email"</td>
    </tr>
#end
</table>
</body>
</html>

JSON形式のデータ($inputRootで参照できる)をHTMLに変換しています。
(JSONで返ってくるnameとemailをテーブルに表示するだけ)
ここで使用している構文、なんか見覚えあるなーと思ってましたが、VTLでした。

参考:Working With Models and Mapping Templates in Amazon API Gateway

integration-response

編集がおわったらSaveボタンを押して保存します。

4.Deployして動作確認

準備ができたので、デプロイしてブラウザでアクセスしてみましょう。
下記のように、JSON形式のデータがHTMLに加工されて表示されれば成功です。

 api-result

まとめ

今回はAPI GatewayでJSON形式のデータをHTMLに加工してみました。
レスポンスを自由に加工できるので、工夫次第でいろいろな使い方ができそうです。

参考サイトなど