この記事でやること
静的なHTMLから検索条件を指定してAPIに接続してデータを取得、表示します。記事では手っ取り早くローカルPCに保存したHTMLからAPIに接続します。
接続するAPI
ユーザIDを指定して問い合わせると、ユーザ名とタイムスタンプをJSONで返してくるAPIをAWS上に用意しました。
以前書いたこっちの記事
Raspberry PiとPaSoRiでFelicaのNFCタグを読んでみる
の続きで、タッチ情報をIFTTTの代わりにAWS DynamoDBに蓄積するように変更。ユーザ情報を引いて名前と直近のタッチ時間をRambdaとAPI Gateway経由で取得できるようにしています。
こちらについては改めて記事にする予定です。
HTMLのソース
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NFC demo</title>
</head>
<body>
<div id="app">
<input v-model="userid" placeholder="User ID">
<button v-on:click="query">Query</button><br>
<dl v-if="info">
<dt>ID</dt><dd>{{info.id}}</dd>
<dt>Name</dt><dd>{{info.name}}</dd>
<dt>Date</dt><dd>{{info.timestamp|dateformat}}</dd>
</dl>
<div v-else="info">No touch data.</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScriptのソース
app.js
const apiUrl = "https://********.********.amazonaws.com/default/nfcDemoGetTouchTime"
const apiKey = "{APIキー}"
const config = {headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey
}}
Vue.filter('dateformat', function(value){
if (!value) return ''
var zp = function(num){
return (num < 10) ? '0'+ num: num
}
var dt = new Date(value * 1000)
var dtstr = dt.getFullYear() + '-' + zp(dt.getMonth() + 1) + '-' + zp(dt.getDate()) + ' '
+ zp(dt.getHours()) + ':' + zp(dt.getMinutes())
return dtstr
})
var app = new Vue({
el: "#app",
data:{
info: null,
userid: null
},
methods:{
query: function(event){
var querydata = {'id': this.userid}
axios
.post(apiUrl, querydata, config)
.then(response => {
this.info = response.data
console.log(this.info)
})
.catch(error => console.log(error))
}
}
})
動かしてみる
index.htmlとapp.jsを適当なフォルダに保存して、ブラウザからindex.htmlを開きます。
ユーザIDをフォームに入力してQueryボタンを押すと...
APIからJSONで問い合わせ結果が返ってきます。
{"id": "test1", "name": "\u30c6\u30b9\u30c8\u30e6\u30fc\u30b6\u30fc\uff11", "timestamp": 1557545262.413307}
問い合わせ結果が画面に反映されました。
参考にしたドキュメント
Vue.jsは日本語版の公式ドキュメントが充実しているのでいろいろ助かります。
axios を利用した API の使用
フィルター — Vue.js
残課題
APIキーがソースから丸見えなので、外部にホスティングするときは、Cognitoで認証するとかアクセス制御の仕組みが必要になります。