EONでPubNubのリアルタイムデータを可視化する

　EONは、PubNubのデータをリアルタイムに可視化するためのJavaScriptフレームワークです。このEONを使って、Arduinoで計測した温度データを可視化してみます。




 Arduinoのセットアップや回路については、「PubNub+Google Chart(Gauge)でセンサー・データを可視化する」を参照してください。


①パブリッシャー側のコード
　Arudinoで計測した温度データをパブリッシュ(発行)するJavaScriptコードを記述します。

 　パブリッシュするデータは、次の書式で指定します。

｛ eon : {  key1 : value,, key2 : value,・・・・keyN : value}}


②サブスクライバー(ブラウザ)側のコード
　温度データをサブスクライブ(購読)し、グラフ化して表示するるJavaScriptコードを記述します。

Arudino+carriotsでIoT-データのプッシュ(転送)

　carriotsには、HTTP通信を使用して、データを外部にプッシュ（転送）する「Trigger」という仕組みが用意されいます。そこで、「Trigger」を使って、データをIFTTTのMakerに転送する方法を説明します。

　IFTTTのMaker、およびレシピの作成方法については、次の記事を参照してください。
　・IFTTTを使ってセンサー・データをGoogleドライブ(スプレッドシート)に記録する(Arduino編)

1.CONTROL PANELの左サイドメニューの「Push(Trigger)」をクリックします。
2.[＋New]をクリックします。
3.各項目に次のように入力します。

Name : 任意の名前
Max retries : 最大リトライ回数
Url : https://maker.ifttt.com/trigger/<Event Name>/with/key/<your key>
Vervb : POST
Payload : value1=%%%<データ名>%%%

<Event_Name>には、レシピのEvent Nameを、<Your Key>には、IFTTTのKeyを入力します。
<データ名>には、プッシュするデータの名前(例：temperature)を入力します。




4.[Add another header]をクリックし、次の2つのHTTPヘッダー情報を追加します。

key : Accept
Value : application/json

key : Content-Type
Value : application/x-www-form-urlencoded




5.[Save]をクリックして保存します。

Arudino+carriotsでIoT-センサー・データの監視と通知

　carriotsでセンサー・データやデバイスを監視するには、「Listener」(リスナ)を使います。たとえば、温度データ(temperature)が30より大きくなったら、メールで通知するListenerを作成するには、次のように操作します。

1.CONTROL PANELの左サイドメニューのの「Listener」をクリックします。
2.[＋New]をクリックします。



3.「If expression」に「context.data.temperature > 30」と入力します。
4.「Then expression」に次のコードを入力し、[Save]をクリックします。

import com.carriots.sdk.utils.Email;
def email = new Email ();
email.to="<mail addres>";
email.message="<message text>";
email.send();

 <mail addres>には送信先のメールアドレスを、<message text>には、メールメッセージを入力します。

Arudino+carriotsでIoT-グラフの作成

　carriotsで収集したデータをグラフ化する方法を説明します。

1.「CARRIOTS CONTROL PANEL」の左サイドメニューの「Wizard Widget Graphs」をクリックします。
2.グラフの種類を選択し、[Next Step]をクリックします。


3.対象のデバイスを選択し、[Next Step]をクリックします。


4.「From」(開始日)、「To」(終了日)を設定し、[Next Step]をクリックします。
　※設定なしでも可


5.最大レコード数を設定し、[Next Step]をクリックします。


6.グラフにプロットするデータを選択し、[Next Step]をクリックします。


7.Y軸の項目を選択し、[Next Step]をクリックします。
　※グラフの種類が「line」「bar」の場合


8.グラフのオーダー(順序)を設定し、[Next Step]をクリックします。




 生成されたJavaScriptコードを、HTMLに張り付けることで、サイト上でグラフを公開することができます。

Arudino+carriotsでIoT-センサー・データの収集

　IoTプラットフォーム(クラウドサービス)のcarriotsを使って、Arudinoで計測したセンサー・データ(温度)を取集してみます。

■carriotsの準備
①アカウント作成
　carriotsのアカウントを作成します。

②デバイスの設定
1.「CARRIOTS CONTROL PANEL」の左サイドメニューの「Device」をクリックします。


2.「defaultDevice」の「Action」列の[Action]→[edit]をクリックします。
 ※「defaultDevice」は規定で用意されるデバイスです。新しくデバイスを作成することもできますが、今回はこの「defaultDevice」を使用します。


3.「Time zone」を「Tokyo」に設定し、[Save]をクリックします。その他の項目は、必要に応じて設定してください。


③Apikeyの確認
1.上部メニューの[MY SETTING]→[MY ACCOUNT]をクリックします。


2,表示されたFull Privileges Apikeyを確認します。


③Id developer(device Id)の確認
1.左サイドメニューの「Device」をクリックします。
2.「Name」列のデバイス名（ここでは「defaultDevice」）をクリックします。


3.表示された情報の「Id developer」の内容を確認します。
　※Id developerは、「<デバイス名@ユーザ名.ユーザー名>」の形式になります。これは、ページ上部にも表示されています。




■回路とプログラム

①Arudino開発環境の構築
1.「ArduinoをJavaScriptで制御する」の手順で開発環境を構築します。
2.コマンドプロンプトから「npm install request」と入力し、node.jsのrequestモジュールをインストールします。


②回路の配線
　次のように回路を配線します。

③プログラムの作成と実行
1.次のJavaScriptコードを入力し、「rest_carriots.js」と名前を付けて、作業用フォルダに保存します。

<your Full Privileges Apikey>には、「Full Privileges Apikey」を、<your Id developer>には「Id developer」を入力します

2.コマンドプロンプトを起動し、作業用フォルダに移動し、「node rest_carriots.js」と入力します。

④データの確認
　「CARRIOTS CONTROL PANEL」の左サイドメニューの「Data streams」をクリックします。

Arudino+theThings.IOでIoT－センサー・データの収集

　theThings.IOを使って、Arudinoで計測したセンサー・データの収集する方法を説明します。



①アクティベート(Thing Tokenの取得)
1.theThings.IOのアカウントを作成します。
2.左サイドのメニューの[Things Manager]を選択し、「ユーザー名 product」の[DETAILS]をクリックします。


3.[Get activaton codes]をクリックします。


4.[+]をクリックします。


5.表示されたウィンドウでThing Tokenを確認し、[OK]ボタンをクリックします。

　以降、Thing Tokenは、「2」までの手順で確認できるようになります。


②開発環境の構築
1.「ArduinoをJavaScriptで制御する」の手順で開発環境を構築します。
2.コマンドプロンプトから「npm install thethingsio-api」と入力し、theThings.IO APIライブラリ(Node.jsモジュール)をインストールします。

③回路の配線
　次のように回路を配線します。

④プログラムの作成と実行
1.次のJsonを入力し、「config.json」と名前を付けて、作業用フォルダに保存します。

<your Thing Token>には、①で取得したThing Tokenを入力します。

2.次のJavaScriptコードを入力し、「temp_thethings.js」と名前を付けて、作業用フォルダに保存します。

3.コマンドプロンプトを起動し、作業用フォルダに移動して「node temp_thethings.js」と入力します。

⑤データの確認
1.theThings. IOにサインインし、Panel(パネル)を表示します。
2.左サイドのメニューの[Things Manager]を選択し、「ユーザー名 product」の[DETAILS]をクリックします。


3.「Option」欄の[Details]をクリックします。

PubNub+Google Chart(Gauge)でセンサー・データを可視化する

　 PubNubを使って、Arduinoで計測したセンサー・データ(温度)をブラウザで受信し、Google ChartのGauge(ゲージ)で可視化する方法を説明します。


①開発環境の構築
　「PubNubを使ってArudinoを制御する」の①～③の手順で開発環境を構築します。

②回路の配線
　次のように回路を配線します。

③プログラムの作成
1.次のJavaScriptコードを入力し、「temp_pubnub.js」と名前を付けて、作業用フォルダに保存します。

2.次のHTMLコードを入力し、「temp_pubnub.jhtml」と名前を付けて、任意の場所に保存します。

<your Publish key>にはPublish Keyを、<your Subscribe key>にはSubscribe Keyを入力します。

④プログラムの実行と動作確認
1.コマンドプロンプトを起動し、作業用フォルダに移動します。
2.「node temp_pubnub.js」と入力します。
3.ブラウザで「ltemp_pubnub.html」を開いて、[接続]ボタンをクリックし、ゲージに温度が表示されることを確認します。
4.[切断]ボタンのクリックで、ゲージが０になることを確認します。