この記事は公開されてから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に変更してください。
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
編集がおわったらSaveボタンを押して保存します。
4.Deployして動作確認
準備ができたので、デプロイしてブラウザでアクセスしてみましょう。 下記のように、JSON形式のデータがHTMLに加工されて表示されれば成功です。
まとめ
今回はAPI GatewayでJSON形式のデータをHTMLに加工してみました。 レスポンスを自由に加工できるので、工夫次第でいろいろな使い方ができそうです。
24
