Edited at

IoTをつくり、Googleスプレッドシートで家の室温変化のグラフを公開する(後編)

More than 3 years have passed since last update.

graph2.jpg

IMG_2893.JPG

Untitled (Network diagram)1.png

前回です:

LittleBitsを使ったIoTをつくり、家の室温変化のグラフをインターネットから見る(前編) - Qiita

追記:


Googleスプレッドシートから室温取得

Googleスプレッドシートから室温を取得してみましょう。

スプレッドシートを新規作成し、「ツール」→「スクリプトエディタ」→「空のプロジェクト」を選びます。すると、コード.gsが表示されます。これを以下のように編集します:


コード.gs

function myFunction() {

var response = UrlFetchApp.fetch(
"https://thermometer-cloudbit-p150705.herokuapp.com/"
);
response = response.toString();
response = response.replace("data:", "");
var json = JSON.parse(response);
Browser.msgBox(json.percent);
}

これを実行すると、スプレッドシートの方にダイアログボックスが表示されます。そのときの室温が表示されています。

あとは「挿入」→「図形描画」でボタンを作り、ボタンにマウスカーソルを合わせてドロップダウンリストから「スクリプトを割り当て」→「myFunction」でOKです。

これで、ボタンを押すと室温が表示されます。

150708-寝室の温度2_-_Google_スプレッドシート.jpg


新しいデータを新しい行として追記

次に、室温を取得するたびに新しい行が追加されてそこにデータが書き込まれるようにしてみましょう。


コード.gs

function getPercent() {

// 電圧(室温)を取得する
var response = UrlFetchApp.fetch(
"https://thermometer-cloudbit-p150705.herokuapp.com/"
);
var json = JSON.parse(response.toString().replace("data:", ""));
return json.percent;
}

function insertData() {
// 新しいデータを追記する
var temperature = getPercent();
var datetime = new Date();
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow([datetime, temperature]);
}


あとは「挿入」→「図形描画」でボタンを作り、ボタンにマウスカーソルを合わせてドロップダウンリストから「スクリプトを割り当て」→「insertData」でOKです。

これで、ボタンを押すと室温が追記されます。

150708-寝室の温度2_-_Google_スプレッドシート2.jpg


グラフの作成と公開

それではこのデータをグラフにしましょう。「挿入」→「グラフ」です。

150708-寝室の温度2_-_Google_スプレッドシート3.jpg

グラフ右上隅のドロップダウンメニューから「グラフを公開」を選びます。普通に公開すると、こんな感じになります。

graph1.jpg

横向けにするといい感じ。

graph2.jpg


スクリプトの定期実行

後はスクリプトを定期実行させるだけです。これは簡単です。まず、スクリプトエディタの時計のアイコンをくりっきします。

150708-寝室の温度2.jpg

で、こんな感じで設定します。

150708-寝室の温度21.jpg


実物

実物はこちらです:

できました。完成です。


感想

感想としては・・・

分野
テクノロジー
感想
評価

ハードウェア
LittleBits
超使いやすい。箱から取り出して5分で動く。感動。

Web API 1
Sinatra
HTTP GETで連続的にデータが返ってくるのを処理するにはrest-clientのようなラッパーライブラリではできなくて地道にnet/httpで書かなければならなかった。まあでもRubyはなんとなく書いても動くのが楽しい。

Web API 2
Heroku
プッシュがけっこう詰まった。ヘルプしていただいたおかげでつくることができた。rackupが鉄板の模様。

データの格納1
JavaScript
文字列からJSONオブジェクトをつくるのに詰まった。これはJavaScriptが融通のきかない性質であるためで、対処を見つけるのが大変だった。
×

データの格納2
Google App Script
非同期処理が普通に書けるしリファレンスが充実しているので使いやすかった。

グラフの公開
Googleスプレッドシート
超お手軽。GUIベースですぐできる。素晴らしい。


ブログやってます:http://weed.nagoya