HTMLからAPIGatewayを呼出し、レスポンスを表示

エヌシーアイ総合システムのmizu-ponです。

今回はHTMLからSDKを用いてAPIGatewayを呼出すまでの話です。

##**今回使用するAPIGawewayの仕様**##

APIGatewayのメニューからSDKをダウンロードできます。

![SDK](https://s3-ap-northeast-1.amazonaws.com/mizusimt-s3/qiita_img/img035.jpg)

適当なフォルダに解凍します。(apigClient.js,lib,js)
表示用のhtmlとcssを同じフォルダに配置します。

![SDK](https://s3-ap-northeast-1.amazonaws.com/mizusimt-s3/qiita_img/img034.jpg)

DynamoDBからデータ取得するAPIの仕様は以下の通りです。

```
GET /messages/latest/{macaddress}
(messagesLatestMacaddressGet)

Path parameters
macaddress (required)
Path Parameter —

MessageResult - MessageResult Up
macaddress (optional)
String
status (optional)
String
datetime (optional)
String
```

##**HTMLのソース**##
HTMLのソースは以下のリンクからダウンロードできます。ひとつずつ解説していきます。
Markdown: [HTML](https://s3-ap-northeast-1.amazonaws.com/mizusimt-s3/qiita_img/index.html "index.html")

まずヘッダ部分はhtmlのヘッダに加え、SDKのScriptを読み込んでいます。

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta charset="utf-8">
  <title>PraplatHOME</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- API用SDK -->
  <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
  <script type="text/javascript" src="lib/url-template/url-template.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
  <script type="text/javascript" src="apigClient.js"></script>
  <script type="text/javascript">
```

以下は配列から表を動的に作成するJavaScriptになります。

```javascript
    // 表の動的作成
    function makeTable(data, tableId){
        // 表の作成開始
        var rows=[];
        var table = document.createElement("table");

        // 表に2次元配列の要素を格納
        for(i = 0; i < data.length; i++){
            rows.push(table.insertRow(-1));  // 行の追加
            for(j = 0; j < data[0].length; j++){
                cell=rows[i].insertCell(-1);
                cell.appendChild(document.createTextNode(data[i][j]));

                // 背景色の設定
                if(i==0){
                    cell.style.backgroundColor = "#f0f7fc"; // ヘッダ行
                }
            }
        }
        // 指定したdiv要素に表を加える
        document.getElementById(tableId).appendChild(table);
    };
```
表の値は一定の間隔で更新しますので、データ更新用のJavaScriptを準備します。

```javascript
    // 表の値更新
    function updateTable(data, tableId){
        // 表の作成開始
        var rows=[];
        var table = document.getElementById("table");
        
        var nodesList = table.childNodes
        //console.log(nodesList[0].rows[0].cells[0].innerHTML);

        // 表に2次元配列の要素を格納
        for(i = 0; i < data.length; i++){
            for(j = 0; j < data[0].length; j++){
                
                //console.log(nodesList[0].rows[i].cells[j].innerHTML);
                //console.log(data[i][j]);
                nodesList[0].rows[i].cells[j].innerHTML = data[i][j]; // セルオブジェクト取得
            }
        }
    };
```
以下のJavaScriptはSDKからAPIGatewayを呼出し、DynamoDBの値を取得しています。
画面ロード時に呼出され、初回は表を作成、以降一定間隔で値を更新します。

```javascript
    var apigClient;
    $(function(){
    //API Clientを初期化
      apigClient = apigClientFactory.newClient();
    });

    function callGetmethod(callcnt){

      //messagesリソースのGetメソッドを呼び出すので、.messagesMacaddressGet()
      apigClient.messagesMacaddressGet({macaddress:"24718902B118"}, {}, {}).then(function(result){
        // Add success callback code here.

        var myjson = result.data.data;
        var jsonlen = 50;
        // var jsonlen = myjson.length + 1;

        var arrdata = new Array(jsonlen + 1);

        for (var i = 0; i < arrdata.length; i++){
            arrdata[i] = new Array(9);
        }

        arrdata[0] = ["macaddress",
                        "status",
                        "datetime"];

        for (var i = 1, rowlen = jsonlen + 1 ; i < rowlen; ++i) {
            arrdata[i][0] = JSON.stringify(myjson[i - 1].macaddress).replace(/\"/g,"");
            arrdata[i][1] = JSON.stringify(myjson[i - 1].status).replace(/\"/g,"");
            arrdata[i][2] = JSON.stringify(myjson[i - 1].datetime).replace(/\"/g,"");
        }

        // 表の動的作成
        // console.log(callcnt);
        if (callcnt == 1)
        { makeTable(arrdata,"table"); }
        else
        { updateTable(arrdata,"table"); }
        

      }).catch( function(result){
        // Add error callback code here.
        console.log(result);
      });

    };
```
`window.onload`は画面ロード時に実行されるコードになります。
`callGetmethod`を呼出します。

```javascript
    window.onload = function(){

        // setInterval
        var timer1 = null;
        var cnt = 0;

        function event() {

            cnt++;
            console.log(cnt);

            if (cnt >= 5 && timer1 != null) {
               // 5回以上表示したら、タイマーを停止する
               clearInterval(timer1);
            }

            // 5000ミリ秒ごとに画面の更新
            callGetmethod(cnt);

         }

        // タイマー開始
         timer1 = setInterval(event, 5000);

    };
```
最後のhtml部分になります。
表が入る部分にはJavaScriptで指定したid("table")を指定します。

```html
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="css/common.css" type="text/css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<div id="top">
   <div id="header">
      <h1><a href="index.html">Praplat DEMO</a></h1>
   <!-- /#topicPath --></div>
   <div id="contents">
      <div id="main">
         <h3>LATEST 50 STATUS</h3>
         <div id="table"></div>
      <!-- /#main --></div>
      <div id="pageTop">
         <a href="#">ページのトップへ戻る</a>
      <!-- /#pageTop --></div>
   <!-- /#contents --></div>
   <div id="footer">
      <div class="copyright">Copyright &copy; 2018 NCI SYSTEMS INTEGRATION,INC Rights Reserved.</div>
   <!-- /#footer --></div>
<!-- /#top --></div>
</body>
</html>
```

##**表示結果**##
DynamoDBのデータ内容をHTMLに表示することができました！

![SDK](https://s3-ap-northeast-1.amazonaws.com/mizusimt-s3/qiita_img/img036.jpg)

以上、おわりです。