LoginSignup
3
1

More than 5 years have passed since last update.

@minatomirai21

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

Last updated at Posted at 2018-02-24

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

はじめに

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

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

・フロー
img_001220.JPG

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

注意

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

http in

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

img_001211.JPG

トークンの設定

ヘッダに指定するAPI-Tokenを設定します。

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

img_001212.JPG

アプリIDの設定

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

項目 値
msg.app 2

img_001213.JPG

出力するフィールドの設定

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

項目 値
msg.fields0 value

img_001214.JPG

クエリで条件の設定

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

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

取得結果

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

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

http respons

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

img_001219.JPG

表示結果

img_001221.JPG

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1