ブラウザーでできる！IoTクラウドアプリを作ろう

2018年10月24日

はじめに

前回「ブラウザーでできる！Raspberry Pi用IoTゲートウェイアプリを作ろう」では、温度センサー（ADT7410）の値をBLEデバイスからRaspberry Piでデータを取得したり、温度センサーの値を加工したりするアプリケーションを、ブラウザーで操作できるNode-RED™ベースのフローエディター「CANDY RED™」を利用して作成しました。

今回は、さらにRaspberry Piから3G/4G LTEのモバイル通信を利用してクラウドへ接続します。Raspberry Piからクラウドへ温度データを送り、インターネット経由でスマホから簡単なグラフ情報を見えるようにしてみましょう。

全体的なイメージは、次の図の通りです。

図1, 全体の構成

今回使用するクラウドは、Node-REDベースのフローエディターをクラウドで利用できる「CANDY EGG™」を使用します。このサービスでは、Webサイトからの申し込みだけで、環境がセットアップされ利用できるようになります。

今回は、クラウドアプリケーションの作成方法と合わせて申し込みの方法も説明します。2週間の無償トライアルが可能ですから、本記事を参考に実際に動かしてみてください。

また、クラウドやRaspberry Pi側で動作するアプリケーションを作成するために、ブラウザーで利用可能なNode-RED™ベースのツール「CANDY RED™」を利用します。今回の記事でも、Node-REDの詳細がわからなくても読み進められるようにしていますが、もし詳細を知りたい場合は、日本のNode-REDユーザーグループが出している緑の表紙の「はじめてのNode‐RED (I・O BOOKS)【改訂版】」（工学社刊）をオススメします（赤い表紙の書籍は旧版ですので緑の表紙の新版をお探しください）。

準備するもの

前回「ブラウザーでできる！Raspberry Pi用IoTゲートウェイアプリを作ろう」の「準備するもの」にて取り上げたハードウェアやソフトウェアを準備してください。

クラウド「CANDY EGG」の準備

まずはクラウド環境を準備します。最初にクラウドで動くアプリケーションを作成してからRaspberry PiやBLEデバイスを動かしてみましょう。

Step 1 CANDY EGGアカウントトライアル申込

作業用のパソコンからブラウザーでフリートライアル申込のページを開いてみましょう。
うまく開けないときは「https://www.candy-line.io」のページからページ右上の「お問い合わせ」→「トライアル」とナビゲーションのリンクを辿ってください。

このページでCANDY EGGのトライアルを申し込めます。なお、CANDY EGGは現在、企業や学校などの法人向けのサービスとなっていますので、企業や学校等が発行するメールアドレスを使用して申込を行います。GMailやインターネットプロバイダーのメールアドレスなどではお申し込みできませんのでご注意ください。

トライアル申込フォームの入力方法については、こちらのフォーラムの投稿をご覧ください。

図2, トライアル申込方法の解説ページ

Step 2 メールアドレス確認

トライアル申込フォームを送信すると、最初にメールアドレスの確認のためのメールが届きます（件名：[CANDY EGG] メールアドレスご確認手続き）。

図3, メールアドレス確認メールの本文（2018年10月現在）

もしそのようなメールが届かない時は、Spam扱いにされていないか確認したり、あるいは「mail.candy-line.io」のドメインのメールを受け取れるような設定にして、再度申し込みを行ったりしてください。

メールを受信できた場合は、本文に従いリンクをクリックするか、コピー＆ペーストしてブラウザーで確認用のURLを開いてください。

Step 3 CANDY EGGへログイン

メールアドレスを確認でき、申込の内容が受理されるとCANDY EGGの実行環境が準備され、そのアクセス方法が記載されたメールが届きます（件名：[CANDY EGG] 準備完了のお知らせ！）。

図4, CANDY EGG準備完了時のメール本文（2018年10月現在）

そのメールを参照して、メールに記載された「アクセス先URL」にブラウザーでページを表示してみましょう。最初にログイン画面が現れます。

図5, CANDY EGGログイン画面

このログイン画面で、同じくメールに記載された「ログイン用ユーザー名」と「ログイン用ユーザーパスワード」を入力して「Login」をクリックします。

すると、以下のような画面が表示されます。これは、フローエディターの画面です。Node-REDと同じような画面ですが、上部の色が青色になっていたり、左上のロゴがCANDY EGGのものに置き換わっています。

図6, CANDY EGGフローエディター画面

これでCANDY EGG側の準備はできましたので、いよいよクラウドアプリケーションとなるフローの作成を行いましょう。

疑似温度表示フローの作成

このクラウドアプリケーションでは、温度のデータを受け取ってそれをグラフで表現します。このグラフの表示を、後ほどスマホでも他の方と共有できるようにします。

フローの作成方法は色々な順序で作れますが、今回はまずは表示の部分を用意して、その後で通信部分を作ってみましょう。

それでは、最初に温度の疑似データを任意のタイミングでメッセージ（データの入った情報）を出力できるようにします。これは、実際の温度表示を試しながら作成するためです。任意のタイミングをブラウザーから指定できるようにするために、「inject」ノードを使います。このため、ワークスペースに「inject」ノードを置きます。

図7, 「inject」ノードの配置

この「inject」ノードでは、実際の温度データの到着タイミングと同じような動きにするために、1秒おきにタイミングを出すように設定します。「inject」ノードをダブルクリックして設定を変更しましょう。

「inject」の設定では、以下にあるように「Repeat」のところを変更します。「interval」としてevery「5」「seconds」の表示となるようにします。この状態で「Done」をクリックして設定を保存しましょう。

図8, 「inject」ノードの設定

続いて、この「inject」ノードによってメッセージを受け取ったら疑似の温度情報をそのメッセージに含めるようにします。この疑似の温度情報を用意するために、今度は「change」ノードを使います。「change」ノードを追加して、先ほどの「inject」ノードと接続します。

図9, 「change」ノードの追加

この「change」ノードで、擬似的な値の温度情報をメッセージにセットします。「change」ノードでは以下のようにJSONata（ジェイソナータ）の関数式表現を指定します。

$floor($random() * 500 + 2500) / 100

この意味は、「0~1の疑似乱数（$random）に500をかけて2500を足したものを、小数点以下切り捨てて、最後に100で割ったもの」です。これによって、温度データが25度〜30度の間でかつ小数点第3位以下を切り捨てた値となります。前回の記事にある通り、温度データは小数点第2位までの値なので、このように表現しています。

また、このノードのNameには「疑似温度データ」と記述しておきましょう。

図10, 「change」ノードの設定

それではいよいよ、グラフ表示を試してみましょう。グラフ表示をするためには、ノードパレットから「chart」と書かれたノードを選んでワークスペースに置きます。見つけにくい時は、ノードパレット上の🔍アイコンのテキストボックスに「chart」と入れるとすぐに見つかります。

この「chart」を先ほど作成した「疑似温度データ」と書かれたノードと接続します。

図11, 「chart」ノードの追加

続いて「chart」ノードの設定を行います。まずはUIグループを指定します。最初は何もない状態なので、以下の図にあるように「Add new ui_group...」と書かれた選択ボックスの右にある鉛筆アイコンをクリックします。

図12, UIグループの設定

するとUIグループの設定が開きます。ここでは、UIグループの名前とタブの設定を行います。UIグループとは、ダッシュボード画面（グラフなどが表示される画面を指します）で表示されるグラフなどの表示用部品（ウィジェット）の集合を指します。

UIグループのNameには「温度」と入れておきます。この名称は、ダッシュボードの画面でも表示されます。

Tabの欄はこちらもまだ設定はありませんから、「Add new ui_tab...」に右にある鉛筆アイコンをクリックします。

図13, タブの設定

このタブの設定では、ダッシュボード画面で表示されるタブの表示名などを指定します。

ここのNameには「ダッシュボード」としますが、あくまで表示名なので任意の名前でも構いません。

Nameを設定したら、ダイアログ右上の「Add」をクリックします。

図14, タブ設定の追加

すると先ほどのUIグループの設定ダイアログが出てきますので、こちらも「Add」をクリックします。

図15, UIグループ設定の追加→Addボタン

最後に、「chart」ノードの設定を保存します。ここでは、「Done」をクリックします。

図16,「 chart」ノードの保存

これで疑似温度表示の準備は完了です。一旦動きを見てみましょう。

疑似温度表示ダッシュボードの確認

作成した疑似温度表示フローをデプロイして動作させてみましょう。右上のデプロイボタンをクリックして、フローを動作させます。

図17, フローのデプロイボタン

このままではグラフ表示が見えませんので、ダッシュボードの画面を表示します。

ダッシュボードの表示方法は、標準的なNode-REDの提供する方法と、CANDY EGG独自の方法と2種類あります。今回は、CANDY EGG独自の方法について説明します。

CANDY EGGには、コンソールと呼ばれる管理用のタブが存在します。普段は隠れており、メニューから選択（「三」→「View」→「CANDY EGG Console」）するか、ショートカットキー（「Ctrl」+「Alt」または「Cmd」+「E」）を押すことにより表示できます。

メニューの場合は、次の場所に項目があります。

図18, CANDY EGGコンソール表示メニューの位置

CANDY EGGコンソールは、右側のタブウィンドウに表示されます。

図19, CANDY EGGコンソールのタブ表示状態

この画面の状態から一番下の項目「ダッシュボード」をクリックします。すると次のような表示が現れます。

図20, CANDY EGGコンソールのダッシュボード表示

この中の「ダッシュボードの表示」をクリックするとダッシュボード画面を見ることができます。しかし、このままでは、次のようにIDとパスワードがブラウザーから聞かれます。これは、ダッシュボード表示に認証機能が有効になっているためです。

図21, ダッシュボード表示における認証ダイアログ（FireFox）

データを閲覧するだけであれば認証が不要な場合もあります。今回は、特に認証を必要としないため、CANDY EGGコンソールのダッシュボードメニューから認証をOFFにしてみましょう。具体的には、先ほどのダッシュボード表示画面の「認証を有効にする」のトグルスイッチをクリックして左側に丸い部分が来るようにします。すると次のようにスイッチ自体が青から白に色が変わります。

図22, 認証OFFにした時の表示

この状態では、ダッシュボードの認証がOFFになります。再び、「ダッシュボードの表示」をクリックしてみてください。今度は認証ダイアログが出現せずグラフが現れます。

図23, ダッシュボードに現れたグラフの様子

今回は5秒ごとにデータが更新されるようになっているため、5秒ごとにグラフのデータが変化していることがわかります。

グラフ表示の方はこれで意図通りの動作をしていますので、今度は疑似データをやめて、Raspberry Pi側のCANDY REDからインターネット経由で送られて来るデータをこのグラフに出すようにフローを変更してみましょう。

疑似温度表示フローの変更

Raspberry Pi側のCANDY REDのデータをクラウドにあるCANDY EGGで受信するためには、専用のノード「CANDY RED websocket IN」を使用します。

このノードをワークスペースに追加して次のように接続します。また、同時に、疑似データの出力を止めるため、疑似温度データノードとchartノードとの間の接続を削除します。

図24, 「CANDY RED websocket IN」ノードの追加

このままでは正しくデータを受信できないため、「CANDY RED websocket IN」ノードをダブルクリックして設定を変更します。

図25, 「CANDY RED websocket IN」ノードの設定

Pathはまだ何も設定していないので「Add new CANDY RED websocket listener」の右にある鉛筆アイコンをクリックします。すると以下のようにPathを設定するダイアログが現れます。

図26, 「CANDY RED websocket IN」ノードの設定

今回は、Pathに「/temperature」を設定します。このPathとは、クラウド側の接続先を示す識別子です。正確に言えばWebSocketのURLの一部となるパスとなります。このPathの値は後ほどRaspberry Pi側のCANDY REDのフロー変更時にも使用します。値を入れたら、右上の「Add」をクリックし、さらに元のダイアログで表示される「Done」をクリックします。

これでRaspberry Pi側のCANDY REDから温度データを受け取る準備ができました。

変更した温度表示フローのデプロイ

再びこの変更したフローを先ほど行ったようにDeployボタンを押してデプロイしておきましょう。現時点では、Raspberry Pi側のCANDY REDは、このCANDY EGGに繋がるように設定していないため、デプロイしても特に画面上何の変化もありません。

繰り返しになりますが、デプロイをこの段階で必ず行っておきましょう！忘れると作成したフローが消えてしまいます。

それではこのまま、次のステップへ進みましょう。

Raspberry Piの準備

続いてRaspberry Piの準備を行います。

回準備した環境に加えて、今回はモバイル通信を行うための設定を行います。今回例として取り上げるのは、ソラコムの「SORACOM Air SIM」です。それ以外のSIMについても、各社のAPN（接続先情報）がわかっていればその内容に置き換えて手順を実施可能です。

Step 1 作業用のパソコンでmicroSDカードにAPNを設定

初めに、前回使用したmicroSDカードにモバイル通信をするための接続先情報を設定しましょう。そのためには、Raspberry Piの起動に使ったmicroSDカードにとあるファイルを書き込みます。

まずは、Raspberry Piを停止させてmicroSDカードを取り外します。それを作業用のパソコンで認識させます。

続いて、「apn」という名前のファイルを作成してその中にAPN名を記述します。

APN名について
CANDY Pi Liteで指定可能なAPN名は、「CANDY Pi Lite利用ガイド」の「プリセットされたAPNの一覧」で調べられます。

今回の例では「SORACOM Air SIM」を使用するため、ファイルの中には以下のような文字列を指定します。

soracom.io

※上記文字列の最後に改行を入れてもいれなくても構いません。

APN名が「プリセットされたAPNの一覧」に見つからない時は、「apn」ファイルに直接APNの情報を記載します。具体的な設定手順は、「CANDY Pi Lite利用ガイド」の「APN設定」をご覧ください。

最後に作成した「apn」ファイルをmicroSDカードのbootフォルダー（またはbootと書かれたドライブ）にコピーしましょう。これでAPNの設定は完了です。

CANDY Pi Liteのソフトウェアは、Raspberry Piが起動した時に自動的にこの「apn」ファイルを読み込み、APNの設定を行います。APNの設定が正しく完了すると、この「apn」ファイルは削除されますが、もし設定に誤りがある場合は削除されません。

注意）ソラコムやIIJモバイルなど、利用者が回線の状態を変更できるようなSIMをご契約の場合は、必ず今回利用するSIMカードの回線をあらかじめ通信可能な状態にしておきましょう。

Step 2 LANケーブルの取り付け

前回同様にRaspberry PiにLANケーブルを取り付けましょう。一方をRaspberry Piに、もう一方は、作業用のパソコンまたは、スイッチングハブなど、最終的に作業用のパソコンと通信できる状態に接続してください。

図27, Raspberry Piと作業用のパソコンにLANケーブルを繋げた様子

Step 3 microSDカードの取り付け

続いて、microSDカードをRaspberry Piに差し込みます。裏表に気をつけて差し込んでください。

このようになれば準備完了です。

図28, Raspberry PiにmicroSDカードを差し込んだ様子

Step 4 CANDY Pi Lite+ Dを取り付けたRaspberry Piでモバイル通信開始

それでは、Raspberry Piに電源を入れて動作させてみましょう。

これにより、3G/4G LTEへのモバイルネットワークへの接続は開始されますが、データのやり取りをしていないので通信は行われません。今回は、CANDY Pi Lite+ DとRaspberry Piとの接続方法は、USB接続ではなくGPIO接続となっていますので、「チカチカ、チカチカ」のような点滅パターンでオレンジのLEDが光ります（実際の点滅の様子はこちら）。

ご注意）Raspberry Pi 3 Model B+を利用されている場合は、電力消費が大きいので、USBケーブル経由でRaspberry Piに給電するだけではうまく動作しないかもしれません（Raspberry Piの赤いLEDが点滅している時は電力不足状態でありうまく動作しません）。その場合は、ACアダプターをCANDY Pi Lite+ Dに差し込んでください。利用可能なACアダプターは、「出力電圧：5V、出力電流：3Aまたは4A、プラグ形状：DCプラグ・ジャック、プラグ寸法：内径：φ2.1mm、外径：φ5.5mm、極性：センタープラス」のものです。

Step 5 CANDY REDの確認

それでは、モバイルへ接続した状態でCANDY REDをブラウザーで見てみましょう。

前回同様に、ブラウザーを開いて http://raspberrypi.local:8100 にアクセスします。

その後ログインを行なって、以下のような画面にたどり着ければRaspberry Piの準備は完了です。前回作成したフローが残っていると思いますので、後ほどそれを変更します。もし何も出てこない時や、サンプルフローが出ている場合は、前回の記事を参考にBLE受信フローを用意しておきましょう。

図29, CANDY RED初期状態の画面

続いてBLEデバイスの準備を行います。

BLEデバイスの準備

BLEデバイス側は、前回から特に変更はありませんが、電池を取り付けるなどして動作する状態にしましょう。

図30, BLEデバイスと温度センサーを取り付けた状態のブレッドボード

BLE受信フローの変更

続いて、前回のフローを変更します。今回の変更点は、まず自動で定期的にBLEで受信した温度データを送信するように変更すること、それに、温度データをクラウドにアップロードすることです。

それでは、これまで「inject」ノードでペダルをクリックして温度データを取得していたところを自動的に一定時間ごとに温度データを取るように変更します。

「温度読み取り」と書かれたノードをダブルクリックして、「inject」ノードの設定ダイアログを表示します。ここで、「Repeat」のところを「interval」に変更します。さらに、every「1」「seconds」と表示されているところを、「5」「seconds」と変更しましょう。これによって、5秒ごとに温度データを取るようになります。「1」にした場合は1秒おきにデータを取得できますが、頻度が高すぎるのでここでは5秒にしています。

図31, 「inject」ノードへ繰り返しを指定

続いて、温度データをクラウドへアップロードします。これには「CANDY EGG websocket OUT」ノードを使います。以下の図のようにノードを配置して、「温度へ変換」と書かれたノードと接続します。

図32, 「CANDY EGG websocket OUT」ノードの追加

続いてCANDY EGGの接続先情報を設定しましょう。追加した「CANDY EGG websocket OUT」ノードをダブルクリックします。

図33, 「CANDY EGG websocket OUT」ノードの設定

まずはAccountの設定を行います。今回初めて設定しますから、「Add new CANDY EGG account...」の隣にある鉛筆アイコンをクリックしましょう。

図34, 「CANDY EGG account」設定ノード

ここで、CANDY EGGへの接続情報を指定します。

Account FQN・・・アカウントIDと接続先サーバードメイン名を指定します
User ID・・・ログイン時のユーザーIDを指定します
Password・・・ログイン時のパスワードを指定します

Account FQNは、接続先のURLが「https://scotcheggs.candy-line.io/my-account-id」であれば、「my-account-id@scotcheggs.candy-line.io」と表現します。これを手動で指定するのは面倒ですので、接続先のURLをそのままAccount FQNの入力エリアにコピー＆ペーストしてください。すると、画面上で自動的に形式が変換されますのでその値を使います。

そのほかのUse IDとパスワードはそれぞれログイン時のものを指定します。

図35, 「CANDY EGG account」設定ノードへ入力した様子

入力したら「Add」をクリックします。

すると元の「CANDY EGG websocket OUT」ノードの設定に戻ります。こちらではPathを指定します。入力する内容は、この記事のCANDY EGGのところで用意した内容と同じ「/temperature」とします。また、Nameを「クラウドへ温度をアップロード」としておきましょう。

図36, 「CANDY EGG websocket OUT」ノードへPathとNameを設定

これで「Done」をクリックするとノードの設定は完了です。

BLE受信フローのデプロイ

さてたったこれだけですが、これでRaspberry Pi側からクラウドへデータをアップロードする仕掛けが整いました。それではいよいよこれを動かしてみましょう！

右上の「Deploy」をクリックしてみると、フローに変化が現れます。

図37, BLE受信フローのデプロイ中の状態

上記の図にあるように「Generic BLE」ノードと「CANDY EGG websocket OUT」ノードの下に「connected」と表示されます。これらはそれぞれ、BLEデバイスに接続していることと、クラウドへ接続していることを表します。

もし、「Generic BLE」ノードで「connected」とならない場合は、電源が正しく入っているか、あるいは電池がきれていないか確認してください。また、「CANDY EGG websocket OUT」ノードで「connected」とならない場合は、アカウントの情報が間違っている可能性があります。または、モバイル通信がうまく動作していないかもしれませんので、CANDY Pi Lite+ DのオレンジのLEDが正しく点滅しているか確認しましょう。