Help us understand the problem. What is going on with this article?

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

Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。
http://weed.nagoya
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした