Node-RED で kintone のデータを読み込み、HTML内に表示する



# Node-RED で kintone のデータを読み込み、HTML内に表示する

## はじめに
以下の REST API で kintone から指定の要素が含まれるレコード数を取得し、HTML内に表示します。

・レコードの一括取得（クエリで条件を指定）
https://developer.cybozu.io/hc/ja/articles/202331474#step2

・フロー
![img_001220.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/a4e1f085-b093-54c0-df3a-ee6799dff108.jpeg)


~~~ flow.json
[{"id":"eea4ce70.8d29c","type":"inject","z":"aa93b4e9.57f0c8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":100,"wires":[["a1b5c582.25d3f8"]]},{"id":"cecdadb2.023f8","type":"change","z":"aa93b4e9.57f0c8","name":"app","rules":[{"t":"set","p":"app","pt":"msg","to":"2","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":60,"wires":[["8749e866.1b19e8"]]},{"id":"a1b5c582.25d3f8","type":"template","z":"aa93b4e9.57f0c8","name":"Token","field":"headers.X-Cybozu-API-Token","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"***","output":"str","x":350,"y":60,"wires":[["cecdadb2.023f8"]]},{"id":"f9dca044.ae853","type":"change","z":"aa93b4e9.57f0c8","name":"query-good","rules":[{"t":"set","p":"query","pt":"msg","to":"value%20in%20%28%22good%22%29","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":150,"y":200,"wires":[["51f80039.1c002"]]},{"id":"51f80039.1c002","type":"http request","z":"aa93b4e9.57f0c8","name":"","method":"GET","ret":"obj","url":"https://***.cybozu.com/k/v1/records.json?app={{app}}&query={{query}}&fields[0]={{fields0}}&totalCount=true","tls":"","x":330,"y":200,"wires":[["6daae7f9.6beea8"]]},{"id":"8749e866.1b19e8","type":"change","z":"aa93b4e9.57f0c8","name":"fields0","rules":[{"t":"set","p":"fields0","pt":"msg","to":"value","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":60,"wires":[["f9dca044.ae853"]]},{"id":"6daae7f9.6beea8","type":"change","z":"aa93b4e9.57f0c8","name":"","rules":[{"t":"set","p":"goodCount","pt":"msg","to":"payload.totalCount","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":200,"wires":[["741efc2.e842504","b1fc1bf1.ee6258"]]},{"id":"741efc2.e842504","type":"debug","z":"aa93b4e9.57f0c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"goodCount","x":500,"y":300,"wires":[]},{"id":"c888f2f3.a07e1","type":"comment","z":"aa93b4e9.57f0c8","name":"GET","info":"","x":130,"y":160,"wires":[]},{"id":"b1fc1bf1.ee6258","type":"template","z":"aa93b4e9.57f0c8","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<title>Title</title>\n</head>\n<body>\n<div>\n<div>Good:{{goodCount}}</div>\n</div>\n</body>\n</html>","output":"str","x":130,"y":300,"wires":[["4871932f.50b34c"]]},{"id":"4871932f.50b34c","type":"http response","z":"aa93b4e9.57f0c8","name":"","statusCode":"","headers":{},"x":290,"y":300,"wires":[]},{"id":"f3e1533b.dd36c","type":"http in","z":"aa93b4e9.57f0c8","name":"good.html","url":"/kinton-node-red/good.html","method":"get","upload":false,"swaggerDoc":"","x":80,"y":60,"wires":[["a1b5c582.25d3f8"]]},{"id":"54443c5.b7f0dc4","type":"comment","z":"aa93b4e9.57f0c8","name":"HTML","info":"","x":130,"y":260,"wires":[]}]
~~~ 

## kintone
以下のアプリ、フィールドを設定しています。

| アプリID     | 
|:-----------------|
| 2            | 

| フィールド    |       選択肢 |   フィールドコード | 
|:-----------------|:------------------|:------------------|
| ドロップダウンリスト            |   「good」もしくは「bad」|       value| 

![img_001210.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/30b55258-c94a-09af-00b3-f64a8587766d.jpeg)


## 注意
レコードの一括取得（クエリで条件を指定）には、パラメータを HTTP のクエリ文字列で送信する場合と、パラメータを JSON形式で送信する場合（HTTP リクエストのリクエストボディに JSON データをセットする場合）があります、
Node-RED の http request（GET）では、リクエストボディに JSON データをセットすることはできません。
よって、パラメータを HTTP のクエリ文字列で送信します。

## http in
good.html にアクセスがあった場合に動くようにします。

![img_001211.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/d13a7a1a-dcb6-02ad-9ecf-0a99cbbcf159.jpeg)

## トークンの設定
ヘッダに指定するAPI-Tokenを設定します。

| 項目     | 値     | 
|:-----------------|:-----------------|
| msg.headers.X-Cybozu-API-Token            |＜API-Token＞              | 

![img_001212.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/012611a0-1a77-04d8-6e19-e56f01714174.jpeg)


## アプリIDの設定
変数に、アプリIDを設定します。

| 項目     | 値     | 
|:-----------------|:-----------------|
| msg.app           |2             | 

![img_001213.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/053f3eec-e9f7-c832-9bfa-1be5e02ada5a.jpeg)

## 出力するフィールドの設定
取得するフィールドを設定します。
今回は、valueのみとします。

| 項目     | 値     | 
|:-----------------|:-----------------|
| msg.fields0           |value            | 

![img_001214.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/323fdd66-36c4-755b-a811-04183c3dcdcf.jpeg)

## クエリで条件の設定
goodのみを抽出するように、クエリ内容を設定します。
クエリは「value in ("good") 」です。
クエリはURLエンコードします。

| 項目     | 値     | 
|:-----------------|:-----------------|
| msg.query           |value%20in%20%28%22good%22%29            | 

・URLエンコード
http://www.tagindex.com/tool/url.html

![img_001215.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/0e1160c1-63ff-9a30-3e90-50024b2946a1.jpeg)

## http request で値取得
設定した値をもとに、HTTP Requestします。
設定値は「{{変数名}}」で使用できます。
「totalCount=true」で対象のレコード数を取得します。

| 項目     | 値     | 
|:-----------------|:-----------------|
| メソッド          |GET           | 
| URL          |https://＜ドメイン＞.cybozu.com/k/v1/records.json?app={{app}}&query={{query}}&fields[0]={{fields0}}&totalCount=true            | 
| 出力形式           |json   | 

![img_001216.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/60623508-dd4f-aea1-d160-965de06a2a23.jpeg)

## 取得結果

~~~ records.json
{"records":[{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}},{"value":{"type":"DROP_DOWN","value":"good"}}],"totalCount":"918"}

~~~

## レコード数の取得
取得内容のtotalCountがクエリで条件に合致したレコード数です。
変数に代入します。

| 項目     | 値     | 
|:-----------------|:-----------------|
| msg.goodCount           |msg.payload.totalCount       | 

![img_001217.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/303a9bdb-ca5c-65d4-4d3c-65e572410cd7.jpeg)

## HTMLの設定
HTTP ResponseするHTMLを定義します。

~~~ good.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>Good:{{goodCount}}</div>
</div>
</body>
</html>
~~~ 

![img_001218.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/66884089-3aae-ad33-3a59-e9c680f83ce7.jpeg)

## http respons
good.html の内容を返します。

![img_001219.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/0e6c96f2-4394-fc62-4b7f-5996abb661c6.jpeg)

## 表示結果

![img_001221.JPG](https://qiita-image-store.s3.amazonaws.com/0/235420/89b183fc-3531-8146-26d2-4c79ec1a6762.jpeg)