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

中村修太

2015.07.14

この記事は公開されてから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('$'))

 

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

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

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

integration-response