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

2015.07.14

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

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

4.Deployして動作確認

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

 api-result

まとめ

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

参考サイトなど