【AWS】API Gateway SDK組み込み方法
最近、API Gateway とLambdaを使用して、APIを実装しています。
ここで作成したAPIを簡単に使用できるSDKを組み込む方法を紹介します。
目次
1. SDKのダウンロード
2. ダウンロードしたSDKを配置
3. ダウンロードしたSDKを配置(wordpressの場合)
1. SDKのダウンロード
1. AWSにログインし、serviceで[API Gateway]を選択
2. APIsでSDKをダウンロードしたいAPIを選択
3. Stagesを選択し、SDKをダウンロードしたいStage（devやprodなど）を選択
4. [SDK Generation]タブでPlatform[JavaScript]を選択
5. [Generate SDK]ボタンを投下すると、SDKの入ったzipファイルがダウンロードされる
2. ダウンロードしたSDKを配置
1. 任意の場所に、ダウンロードしたSDKのzipを設置
2. unzip [ダウンロードしたSDKのzip名]で、解凍（apiGateway-js-sdkというフォルダ名で解凍される）
3. rm [ダウンロードしたSDKのzip名]でzip は削除
4. <head>タグ内に下記を追加(srcは1.で設置したパスに合わせる)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="apiGateway-js-sdk/apigClient.js"></script>
3.ダウンロードしたSDKを配置(wordpressの場合)
1. wp-content/themes/[有効化されているテーマ]/js内に、ダウンロードしたSDKのzipを設置
2. unzip [ダウンロードしたSDKのzip名]で、解凍（apiGateway-js-sdkというフォルダ名で解凍される）
3. rm [ダウンロードしたSDKのzip名]でzip は削除
4. wordpress管理画面にログイン
5. [外観]＞[テーマの編集]でheader.phpに下記を追加し、[save]を投下
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/axios/dist/axios.standalone.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/CryptoJS/rollups/hmac-sha256.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/CryptoJS/rollups/sha256.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/CryptoJS/components/hmac.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/CryptoJS/components/enc-base64.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/url-template/url-template.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/apiGatewayCore/sigV4Client.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/apiGatewayCore/apiGatewayClient.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/apiGatewayCore/simpleHttpClient.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/lib/apiGatewayCore/utils.js" ></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/apiGateway-js-sdk/apigClient.js" ></script>
以上ですー！！これで下記のようなコードをjsで書けば、APIを実行できます。
const params = {};const body = {// This is where you define the body of the request,};let additionalParams = {// If there are any unmodeled query parameters or headers that must be// sent with the request, add them here.};apigClient.then(function(result) {// Add success callback code here.console.log(result);}).catch(function(result) {// Add error callback code here.console.log(result);});
おやすみなさいぃぃ
