ApigeeというAPI Gateway製品で、JavaScriptを使ってレスポンスの一部を動的に変えるAPIモックを作ってみました。そのメモです。
アカウント作成から始めて20分くらいあれば終わると思います。「ホスト名/getstarted」でXMLのレスポンスが返ってくるところまでです。なお、Google Chromeでの利用を推奨します(Firefoxだと管理画面へのログインが高い確率で失敗する)。
代わりに追加するのが「Assign Message」ポリシーです。Flow左下にある[+ Step]ボタンを押下してAdd Step画面から「Assign Message」を選択し、[Add]ボタンを押下してください。「Display Name」と「Name」はデフォルトのままで良いです。追加後のFlowは以下のようになります。 追加したらコードの編集です。Flow上で追加した「Assign Message」ポリシーをクリックすると、コードエディタにXMLコードが表示されます。これを次のように編集します。
今回はやりたいことにも書いた通りJavaScriptで動的レスポンスを設定するので、使用するポリシーは「JavaScript」ポリシーになります。Flow左下にある[+ Step]ボタンを押下してAdd Step画面から「JavaScript」を選択し、[Add]ボタンを押下してください。すると、Assign Messageポリシーの左に JavaScriptポリシーが追加されます。 次いでJavaScriptの処理を書きます。Navigatorペインに「JavaScript-1.js」が追加されているので、それを開きエディタに下記のソースを入力します。
上記ソースを保存してデプロイ後、固定レスポンス時と同様にブラウザから「ホスト名/getstarted」を叩いてください。下記画面のようにレスポンスが表示されます。 見事、timestampに値が入りました。
トレースを有効にするには、画面右上のTraceタブを開き、画面中程にある緑色の「Start Trace Session」を押します。すると、一定時間トレースが有効になるので、この間にAPIを叩きます。APIを叩いた後、画面下にある「Output from all Transactions」のバーを押すと、print文の出力が表示されます。
やりたいことと前提条件
- レスポンスにJSONを返すAPIで、JSON中の一部の項目だけを動的に変えたい。
- レスポンスのJSONを固定値を含めて丸ごと動的に生成するのではなく、動的項目の値のみを差替えるようにし、他の項目は固定で定義したい。
- 動的項目の処理はJavaScriptを使う
- 【重要】これ書いてる人は、Apigeeのドキュメントをちゃんと読んでおらず、下記に掲載するリンク先も必要そうなところを掻い摘まんで都合の良いようにしか解釈してない。
事前準備
このメモは、Apigeeの「スタートアップガイド - 初めての API プロキシの作成」が完了した時点からになります。アカウント作成から始めて20分くらいあれば終わると思います。「ホスト名/getstarted」でXMLのレスポンスが返ってくるところまでです。なお、Google Chromeでの利用を推奨します(Firefoxだと管理画面へのログインが高い確率で失敗する)。
固定レスポンスを設定する
ガイド終了後、Proxy Endpointの「PreFlow」のFlowは以下のようになっています。 この緑色の「XML to JSON」ポリシーは、XMLをJSONに形式変換するポリシーですが、今回は不要なのでまず削除します。代わりに追加するのが「Assign Message」ポリシーです。Flow左下にある[+ Step]ボタンを押下してAdd Step画面から「Assign Message」を選択し、[Add]ボタンを押下してください。「Display Name」と「Name」はデフォルトのままで良いです。追加後のFlowは以下のようになります。 追加したらコードの編集です。Flow上で追加した「Assign Message」ポリシーをクリックすると、コードエディタにXMLコードが表示されます。これを次のように編集します。
- <Copy>タグ、<Remove>タグ、<Add>タグ、<AssignVariable>タグを削除する。
- <Set>タグを次のように編集する。
<Set>
<Payload contentType="application/json;charset=UTF-8">
{
"name": "onechu",
"id": "onechu312",
"timestamp":""
}
</Payload>
</Set>
動的レスポンスを設定する
次いで動的レスポンスの設定です。上記JSONレスポンスの「timestamp」に現在日時を入れます。今回はやりたいことにも書いた通りJavaScriptで動的レスポンスを設定するので、使用するポリシーは「JavaScript」ポリシーになります。Flow左下にある[+ Step]ボタンを押下してAdd Step画面から「JavaScript」を選択し、[Add]ボタンを押下してください。すると、Assign Messageポリシーの左に JavaScriptポリシーが追加されます。 次いでJavaScriptの処理を書きます。Navigatorペインに「JavaScript-1.js」が追加されているので、それを開きエディタに下記のソースを入力します。
//
// 現在日時文字列の生成(yyyyMMddhhmmssSSS形式)
//
var date = new Date();
dateString = date.getFullYear();
dateString = dateString + ("00" + (date.getMonth()+1)).slice(-2);
dateString = dateString + ("00" + date.getDate()).slice(-2);
dateString = dateString + ("00" + date.getHours()).slice(-2);
dateString = dateString + ("00" + date.getMinutes()).slice(-2);
dateString = dateString + ("00" + date.getSeconds()).slice(-2);
dateString = dateString + ("000" + date.getMilliseconds()).slice(-3);
print("dateString: ", dateString);
//
// 1つ前のAssign Messageポリシーの出力(JSON)をパースする
//
print("AM Response: ", context.proxyResponse.content);
var res = JSON.parse(context.proxyResponse.content);
//
// timestampの値へ先に生成した日時文字列にセットする
//
res.timestamp = dateString;
//
// JSONを生成し、レスポンスへセットする
//
context.proxyResponse.content = JSON.stringify(res);
print("JS Response: ", context.proxyResponse.content);
ちょっと解説をすると、「context.proxyResponse.content」がレスポンスのボディ部になります。これをJavaScriptで書き換えることで、動的に値を設定することができます。// 現在日時文字列の生成(yyyyMMddhhmmssSSS形式)
//
var date = new Date();
dateString = date.getFullYear();
dateString = dateString + ("00" + (date.getMonth()+1)).slice(-2);
dateString = dateString + ("00" + date.getDate()).slice(-2);
dateString = dateString + ("00" + date.getHours()).slice(-2);
dateString = dateString + ("00" + date.getMinutes()).slice(-2);
dateString = dateString + ("00" + date.getSeconds()).slice(-2);
dateString = dateString + ("000" + date.getMilliseconds()).slice(-3);
print("dateString: ", dateString);
//
// 1つ前のAssign Messageポリシーの出力(JSON)をパースする
//
print("AM Response: ", context.proxyResponse.content);
var res = JSON.parse(context.proxyResponse.content);
//
// timestampの値へ先に生成した日時文字列にセットする
//
res.timestamp = dateString;
//
// JSONを生成し、レスポンスへセットする
//
context.proxyResponse.content = JSON.stringify(res);
print("JS Response: ", context.proxyResponse.content);
上記ソースを保存してデプロイ後、固定レスポンス時と同様にブラウザから「ホスト名/getstarted」を叩いてください。下記画面のようにレスポンスが表示されます。 見事、timestampに値が入りました。
JavaScriptのデバッグ
上記JavaScriptのソース中にprint文が入っていますが、これはデバッグ用です。これらの結果を表示するには、トレースを有効にした状態でAPIを叩きます。トレースを有効にするには、画面右上のTraceタブを開き、画面中程にある緑色の「Start Trace Session」を押します。すると、一定時間トレースが有効になるので、この間にAPIを叩きます。APIを叩いた後、画面下にある「Output from all Transactions」のバーを押すと、print文の出力が表示されます。
まとめ
Apigeeでの、JavaScriptを使ってレスポンスの内容を一部書き換える方法を紹介しました。ポイントは3点です。- 基本的なレスポンスの内容はAssign Messgeポリシーで定義する
- Assign Messgeポリシーで定義したレスポンスをJavaScriptポリシーで書き換える
- レスポンスはJavaScriptでは「context.proxyResponse.content」で取得/設定ができる
コメント