More than 5 years have passed since last update.

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

Last updated at 2015-08-21Posted at 2015-07-08

前回です：

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です。

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

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

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

コード.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です。

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

グラフの作成と公開

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

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

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

スクリプトの定期実行

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

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

実物

実物はこちらです：

できました。完成です。

感想

感想としては・・・

分野	テクノロジー	感想	評価
ハードウェア	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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up