体験的マイコン学習（Raspberry Pi編）


目次


第７回 事務所の温度をmilkcocoaを使ってブラウザに表示してみる


今回はRaspberyPIに接続した温度センサーの結果をmilkcocoaを使って、ブラウザ表示してみます。

第５回では、自前のサーバーでデータを保持してブラウザ表示しましたが、今回はmilkcocoaというBaas

を使用します。Baasとは簡易に使えるサーバ環境を提供してくれるサービスです。

milkcocoaの準備

(1)milkcocoaの公式サイト（https://mlkcca.com/）へ行き、無料登録ボタンをクリックし、ユーザ登録します

(2)新しいアプリを作るボタンをクリックし、アプリを作成します

(3)アプリＩＤが表示されます。このアプリＩＤは後ほどプログラムで使用するので控えておきます

RaspberyPI側の準備

(1)RaspberyPI側のプログラムをjavascriptで作成します。取得した温度をmilkcocoaに送信し、保存します。

　test.js

'use strict'; var GrovePi = require('node-grovepi').GrovePi; var Board = GrovePi.board; var DHTDigitalSensor = GrovePi.sensors.DHTDigital; var pinID = 2; var deviceID = DHTDigitalSensor.VERSION.DHT22; var unit = DHTDigitalSensor.CELSIUS; var MilkCocoa = require('milkcocoa'); var milkcocoa = new MilkCocoa('【アプリＩＤ】.mlkcca.com'); var ds = milkcocoa.dataStore('message'); var board = new Board({ onInit: function(res) { if (res) { console.log('start reading from sensor'); } //センサーから温度の取得 var tempHumidity = new DHTDigitalSensor(pinID, deviceID, unit); var arr = tempHumidity.read(); console.log('temperature:', arr[0], 'humidity:', arr[1]); //milkcocoaへデータの送信 ds.push({temperature: arr[0]}); }, debug: true, onError: function(err) { console.log(err) } }); board.init();

HTMLの準備

(1)温度表示用のHTMLを作成します。

　index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Milkcocoaテスト</title> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="http://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script> <script // Milkcocoaに接続 var milkcocoa = new MilkCocoa('【アプリＩＤ】.mlkcca.com'); // データストアを取得 var ds = milkcocoa.dataStore('message'); ds.stream().next(function(err, msgs){ // データストアの最新メッセージ var last_msg = msgs[msgs.length - 1]; // メッセージ形式{"temperature": 20.0} var temperature = last_msg.value.temperature; // spanに温度を表示 $('#temperature').text(temperature); }); </script> </head> <body> <p> 現在の温度: <span id="temperature"></span>度 </p> </body> </html>

動作確認

(1)RaspberryPiにsshで接続し、作成したjsファイルを実行します



(2)milkcocoaのデータストアページでデータが登録されたのを確認します



(3)作成したhtmlで表示します



第５回ではサーバー側の処理の作り込みがありましたが、今回は結構簡単に作成できました。

こんな優秀はサーバー環境がタダなんて不思議な気もします。milkcocoaさんありがとうございます！！

ページトップ