GravioからGoogle スプレッドシートに温度をポストしてみた

GravioでGoogleスプレッドシートに温度をポストできないかということで、いろいろ考えていたが、どうもGoogleフォームを使うとできそうだということでやってみた。

# 使ったもの
* Gravio HubKit 3.8
* Gravio Studio 3.8
* Googleスプレッドシート
* Googleフォーム
* Google Chrome

# Googleフォームでフォームを作る
作り方は調べてください。
新規に作成すると、質問が一つ追加されたフォームが作成されています。
特になんでもいいですが、フォーム名、質問、そして形式を「記述式」に変えておきました。
![sheets1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/c61200bb-4ae8-0946-f870-e50d275be702.png)

次に、このフォームをどこからでも見えるように設定します。右上のギヤマークで設定を開きます。
「<組織名>と信頼できる組織のユーザーに限定する」にチェックが入ってると思いますので、チェックを外して保存します。
![sheets2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/9690d588-abbb-6292-b251-a56d29967e6f.png)

送信用のURLを取得します。

![sheets3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/6bdf7c11-37fc-522e-8bf7-a956fb86d9f9.png)
`https://docs.google.com/forms/d/e/XXXXXXX/viewform`のようなフォーマットになっていると思います。この`XXXXXX`の部分がフォームIDになります。とりあえずこのURLは覚えておきます。

# Googleフォームの質問のIDを探す
取得したURLをブラウザにコピーして開きます。こんな感じで表示されます。
![sheets4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/079aa383-f6ff-b7ba-ddf6-4f93e8748093.png)

ここから少し難易度上がります。（笑）要は、質問のIDを取得すればいいのですが、質問のIDは`entry.NNNNNN`のような形式になってます。これをソースから探します。今回はChromeのDevToolsを使います。フォームのところで`F12`キーを押します。するとこんな画面が出てきます。私の場合は下に出ますが、設定によっては別のところに出てくるかもです。
![devtools1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/90c01a9f-bb1c-715f-ceba-5f46a783d924.png)
ここで、次のような手順でIDを探します。

1. DevToolsのツールバーの「Elements」をクリック
2. その左端のカーソルマークをクリック
3. 質問の回答の部分の上にマウスカーソルを移動
4. 下のソースコードの部分に`name=entry.NNNNNN`があったらそれが項目のIDなので覚えておきます。


![devtools2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/948c78d6-f5fe-5cca-f0bc-94b42aa2a096.png)

ここまでで、次の情報が取得できました。

* GoogleフォームのID
* 質問のID

# Gravioでアクションを作ってみる
Gravioのアクションはもう慣れっこということで細かいところは省略します。
コンポーネントはSendHttpRequestを使います。コンポーネントプロパティは次のように設定します。

![gravio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/9b29b1a5-0807-04bf-f94f-62ac42be73a4.png)

| プロパティ| 設定する値　|
|-----------------|---------------------|
| URL|https://docs.google.com/forms/d/e/<フォームID>/formResponse|
| HTTP Method | POST     |
|Content-Type| application/x-www-form-urlencoded|
|Body| `"entry.<質問のID>=" + av.Data`|

URLのところは、コピペしてきたURLの最後が`viewForm`になってると思いますので、それを `formResponse`にすればOK。
フォーム形式で送るので、Bodyは`キー=値&キー=値`の形式でいいのですが、センサーデータを送りたいので `av.Data` を使った式にします。

これで、実行ボタンをクリックすればGoogleフォームにデータが送られます。

# Googleスプレッドシートでデータを確認
Googleフォームの画面に戻って、回答を見てみます。回答タブをクリックします。
アクションから直接実行したので `av.Data` には `0`が渡されるため、ここでの回答は `0` になってますね。

![sheets5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/e21beaaa-5990-956e-16f5-1056950f582a.png)

今度はGoogleスプレッドシートの方に移動します。画面の中にあるスプレッドシートアイコンをクリックします。
新しいシートを選んで作成ボタンをクリックします。
![sheets6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/2f9b1bc3-5e22-9ccb-eb9c-5fcade26249b.png)
Googleスプレッドシートが作成されて先ほどのデータが登録されています。
![sheets7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/963ff195-8d63-9d7e-cbca-62558c6125b3.png)

# センサーデータと連携してみた
センサーデータとトリガーを使って連携してみました。

![gravio2sheets.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/c92d99ff-1fd8-c776-eba0-2654154d4697.gif)

こんなふうにグラフも描けました。
![sheets8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41603/ac2b8009-4f43-8ede-d657-a8af97325e2c.png)