エヌシーアイ総合システムのmizu-ponです。
今回はHTMLからSDKを用いてAPIGatewayを呼出すまでの話です。
##今回使用するAPIGawewayの仕様##
APIGatewayのメニューからSDKをダウンロードできます。
適当なフォルダに解凍します。(apigClient.js,lib,js)
表示用のhtmlとcssを同じフォルダに配置します。
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
まずヘッダ部分はhtmlのヘッダに加え、SDKのScriptを読み込んでいます。
<!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になります。
// 表の動的作成
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を準備します。
// 表の値更新
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の値を取得しています。
画面ロード時に呼出され、初回は表を作成、以降一定間隔で値を更新します。
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を呼出します。
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")を指定します。
<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 © 2018 NCI SYSTEMS INTEGRATION,INC Rights Reserved.</div>
<!-- /#footer --></div>
<!-- /#top --></div>
</body>
</html>
##表示結果##
DynamoDBのデータ内容をHTMLに表示することができました！
以上、おわりです。