GravioからCO2データをkintoneに送って可視化する

kintoneのAdvent Calendarに参加するとのことで、久々のCO2可視化シリーズです。
ということでkintoneとGravioを連携してみます。

# 使用環境

- Raspberry Pi 4 Model B w/4GB RAM
- Ubuntu Server 20.04.3 LTS
- Gravio HubKit v4.4.0-6902
- Gravio Studio v4.4.4247.0
- Gracio CO2センサー (Gravio Standardの契約が必要)
- kintone (開発者ライセンス スタンダードコース)

# 事前準備

- kintoneの環境を準備しておいてください。環境がない場合は、[こちら](https://developer.cybozu.io/hc/ja/articles/200720464-kintone-%E9%96%8B%E7%99%BA%E8%80%85%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9-%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83-)を参考に開発者ライセンスを取っておくといいですね。→「[kintone 開発者ライセンス（開発環境）](https://developer.cybozu.io/hc/ja/articles/200720464-kintone-%E9%96%8B%E7%99%BA%E8%80%85%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9-%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83-)
」
- 「[Gravio 4とPower BIでCO2を可視化する](https://qiita.com/zrock/items/08148659ebf523f5c160)」を参考にCO2データを取得できるようにしておいてください。

# 手順

## kintoneでの作業

### アプリの作成
kintoneにログインし、アプリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/fa3add60-eaa4-90d3-339f-42529c353a4f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/9769915d-fb03-f2f6-9712-6f51908b86d9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/ebafa62a-70fc-1dfa-237a-b3b1c7c0437e.png)
「はじめから作成」をクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/578618fc-39c8-b0a8-d029-e7c932a11f04.png)


### フォームの作成

フォームに「日時」と「数値」をドラッグ＆ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/ff66670f-0919-e8bb-ae07-5b2489ea891e.png)
あとでAPIを呼ぶのを簡単にするために、日時の設定画面でフィールドコードを `timestamp` としておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/1102e5a8-8ad2-c90a-794f-e3a89d43e901.png)

CO2の値の方も同様に。こちらはフィールド名や単位も変更しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/8ac234d5-91fd-07cb-8955-95ddd5cffd2d.png)
最後に「フォームを保存」しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/a90187c5-fdb6-5ac2-8349-363fade068f4.png)

### グラフの作成

グラフタブに移動して、グラフも作成しちゃいましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/70a76596-1c4e-8bf5-ba7a-e2ad768a6599.png)


グラフの種類は **折れ線**、大項目に `日時` 、集計方法は `平均` 、条件に `日時` `＞（より後）` `昨日` 、ソートに `大項目` `昇順` を指定しておきましょう。あとから適当に調整してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/8137f37d-c638-8bb7-8a18-a1c3afa3c3d9.png)

「保存」ボタンをクリックして保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/7e0192b4-3889-6185-788f-7ae0ab4144ca.png)


### APIトークンの取得

最後に設定タブのAPIトークンからAPIトークンを生成して取得しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/4c36377f-0dac-de7b-0a32-e3daab1f3f64.png)

「生成する」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/34364b1f-406b-92b5-794c-3cb1c9b75196.png)

Gravioからはレコードを追加するだけなので、「レコード閲覧」のチェックは外し、「レコード追加」をチェックしてください。で、APIトークンはどこかに保存しておいてくださいね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/5a91f824-0bfb-1c40-9284-a919965ee151.png)

最後に「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/baa28e28-97ae-d886-167d-c06f80b7a090.png)

### アプリ名をつけて公開
最後にアプリ名を `CO2` にし、「アプリを公開」ボタンで公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/95cb0b6f-b1ef-59a1-ad88-c6a565c9050f.png)

「OK」ボタンをクリックしてkintone側の設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/d2fd9065-a7bc-febd-6012-c136b107f331.png)

データがないのでこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/5ea46f43-7830-7ba5-c71f-3304e5a305eb.png)

## Gravioでの設定

### アクションを作成する

まずはアクションです。いつものようにHTTP Requestコンポーネントを配置します。
プロパティは次のように指定します。

|プロパティ|値|
|---|---|
|HTTPメソッド|POST|
|URL|https://<サブドメイン名>.cybozu.com/k/v1/record.json|



```
cp.Headers = {"X-Cybozu-API-Token": "dMezsbuJqhaBz5vS4bkFkmsCJ7JsloGCmQVg4brI"}
cv.Payload = {"app": 3, "record": {"timestamp": {"value": tv.Timestamp}, "CO2": {"value": tv.Data}}}
```

Pre Mappingsで認証情報をヘッダに、値をペイロードに指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/330d79c0-3686-b90b-9e44-f73ead39b43f.png)

実行してみましょう。kintoneのテーブルに、現在時刻で値 `0` が書き込まれたと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/0e76c8e5-4767-a340-5932-97991a1ad497.png)

### トリガーで連携

最後にトリガーを作りましょう。CO2のデータが届いたら上で作ったアクションを実行するように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/87d76eaa-62c7-d1eb-11c0-96c79b891487.png)
あまり多くのデータがkintoneに入ってきても困るので、1分毎くらいにしておきましょう。有効期限を `59000` にしておきます。

### 結果の確認

しばらくほっておくと、こんな感じでデータが入ってくるようになりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/e156889f-1e26-8691-bb5c-d743543f4aeb.png)
グラフを見るともっとわかりやすいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/9b30cbb7-19b0-5200-f3c6-8d35b517b202.png)

# ポイント

- kintoneのフィールドコードをASCII文字だけにするなど、わかりやすくしておくとPOSTデータを作りやすい
- データを書き込む頻度は1分毎くらいがちょうどいい

# 参考
- [kintone](https://kintone.cybozu.co.jp/)
- [kintone 開発者ライセンス（開発環境）](https://developer.cybozu.io/hc/ja/articles/200720464-kintone-%E9%96%8B%E7%99%BA%E8%80%85%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9-%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83-)
- [Gravio](https://www.gravio.com/jp)
- [HTTP Requestコンポーネント](https://doc.gravio.com/manuals/gravio4/1/ja/topic/httprequest)
- [Pre Mappings / Post Mappingsでの式の記述の仕方](https://doc.gravio.com/manuals/gravio4/1/ja/topic/premappings-postmappings)
- [Gravio 4とPower BIでCO2を可視化する](https://qiita.com/zrock/items/08148659ebf523f5c160)