Appsを使用してセンサーから取得した温湿度データをリアルタイムのグラフとして表示するアプリを作る方法を解説します。データを保存して表示するというよりは、リアルタイムの数値の変化を見ることができるWebアプリケーションです。スプレッドシートにデータを保存するのも試してみたいと思います。DHT22センサーとの接続方法はこちらの記事をご参照ください。完成すると以下のようなリアルタイムで温湿度のグラフを描画するアプリを作ることができます。このアプリはマイクロソフトのチュートリアルのコードを使用して作成しています。アプリを開いてからでないとグラフを描画できない、タイムゾーンが日本じゃないなど修正する箇所はいくつもありますが、最低限温度と湿度のリアルタイムの変化を見ることができます。自室の温湿度のリアルタイムデータ(10分ごと)システム構成システムの構成は次の図のようになっています。Apps上にデプロイされたアプリケーションでグラフ化して表示します。12.0.1Mac上の環境Node-REDとはNode-REDとはフローベースのプログラミングツールです。Node.js上で構築されており、ノードと呼ばれる機能を含むパーツ同士をつなぎ合わせフロー(流れ)を作ります。今回はこれを使って、視覚的にわかりやすくシステムを構築していきます。JapanラズパイでLXTerminalを開き、ドキュメントに記載のコマンドを実行するターミナルで以下のコマンドを実行します。https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)コマンド実行いくつかの質問が表示されますので”y”と入力して進めましょう。Node-REDのインストール完了Node-REDを起動するNode-REDを起動するには以下の2つの方法があります。どちらの方法でも起動できるので好みの方法で起動してください。node-red-startコマンドを実行するラズパイのメニューから実行する以下はNode-REDを起動するコマンドです。node-red-startNode-REDを起動するNode-REDの起動Node-REDにアクセスするアドレスバーに127.0.0.1:1880と入力してNode-REDにアクセスします。同じネットワーク内ならラズパイからだけでなく、お使いのPCからも(Wi-FiのIPアドレス):1880でアクセスすることができます。Node-REDへのアクセスWelcome画面が表示されればアクセスに成功です。かんたんなチュートリアルがあるので進めておきましょう。DHT22センサーの情報取得まずはDHT22センサーが正常に動いているかを確認することもかねてNode-REDでDHT22センサーからの温湿度データの取得と表示をおこないます。(rpi-dht22)を追加するまずはDHT22センサーから温湿度情報を取得します。右上のハンバーガーメニューから「パレットの管理」→「ノードを追加」をクリックし、node-red-contrib-dht-sensorを追加します。「追加」をクリックします。rpi-dht22ノードの追加Injectノード、Debugノードとrpi-dht22ノードをフローに追加する左側の共通パネルからInjectノード、Debugノードとrpi-dht22ノードをドラッグアンドドロップでフローに追加します。ノードの追加ノード間をワイヤーで接続するノードのポートをクリックしながらドラッグしてノード同士を接続します。左側からInjectノード、rpi-dht22、そしてDebugノードの順に接続します。Japan各ノードの構成は次の画像のようになっています。Injectノードの繰り返しの頻度は任意の間隔を設定してください。無料の枠で最大限データを取得するには10分に1回の間隔ぐらいが良さそうです。ちなみに取得できるテレメトリは1ヶ月で8,000メッセージまでになっています。分になりますので、このあたりで好きな間隔を設定してください。サーバにデプロイする必要があります。デプロイボタンをクリックするとサーバにデプロイされます。デプロイボタンを押したあとはInjectノードの左端をクリックしてフローを実行します。右側のデバッグコンソールに温湿度が表示されればセンサーは正常に温湿度を取得できています。なっているところは湿度が39.70%という意味です。(乾燥注意)フローのデプロイ以下のJSONコードを読み込むことでフローをインポートすることができます。numberはご自身のものを入力してください。}]AzureでのWebアプリ作成DHT22センサーの稼働を確認できたました。今からはセンサーで取得したデータをAzureに送信し、そのデータをもとにリアルタイムで温湿度のグラフを描画するWebアプリケーションを作成していきます。Azureの登録方法などは各自検索してください。今回作成するWebアプリはすべて無料の範囲でできるものになっています。Azure手順の大まかな流れは次の通りです。Hubリソースを作成するまずはリソースグループを作成します。リソースグループは、デバイスやWebアプリをなどのリソースをまとめて管理するためのグループです。Portalにアクセスしてください。Portalリソースの作成をクリックAzureサービスの下にあるリソースの作成をクリックします。Hub”の下の作成をクリックします。基本の設定が終わったら「次へ:ネットワーク」をクリックします。ネットワークの選択ネットワークタブの接続の構成でパブリックアクセスを選択します。「次へ:管理」をクリックします。(RBAC)とスケーリングを設定します。設定は以下のように行ってください。2/2「次へ:タグ」をクリックします。今回はタグの設定をしませんので、そのままで「次へ:確認および作成」をクリックします。確認および作成タブで設定が正しく行われているかを確認し、作成ボタンを押します。確認と作成デプロイの進行が始まると右上に通知がポップアップしますので、それをクリックします。右上のベルマークアイコンをクリックします。デプロイ進行中デプロイが完了すると、「展開が完了しました」とポップアップが右上に表示されます。ポップアップの「リソースに移動」をクリックして、リソースに移動します。HubのTempAndHumidリソースに移動したらデバイス管理メニューの中からデバイスを選択します。Hubに温湿度センサーを登録します。左側のパネルのデバイス管理をクリックしたら、デバイスの追加をクリックします。デバイスの追加デバイスの作成デバイスの作成では以下のように設定します。一通り設定が終わったら保存ボタンをクリックします。デバイスが正常に追加されるとデバイスの一覧に追加したDHT22が表示されます。Hubにテレメトリを送信するための設定をおこないます。Hubにテレメトリを送信するにはnode-red-contrib-azure-iot-hubノードが必要です。Hubノードを追加するNode-REDを起動し、右上のハンバーガーメニューからパレットの管理をクリックします。Hubノードと呼びます)を追加します。node-red-contrib-azure-iot-hubの追加ポップアップが出たら追加をクリックします。Hubノードをフローに追加して以下の画像のようにワイヤーで接続します。フローの変更functionノードの設定functionノードをダブルクリックし次のコードのように設定します。(DHT22)をクリックした画面から確認することができます。Hubノードをダブルクリックして以下のように設定します。以下のJSONコードを読み込むことでフローをインポートすることができます。主キーとHostnameはご自身のものを入力してください。}]フローをデプロイするデプロイボタンをクリックし、Injectノードの左側にあるボタンをクリックします。Hubでテレメトリの受信を確認することができます。Node-REDのデバッグパネルでも同様に温湿度を確認することができます。テレメトリ受信の確認Webアプリを作成して温湿度データを視覚化するここからのステップでは取得した温湿度データをリアルタイムでグラフ表示するWebアプリの作成方法の説明です。基本的にはMicrosoftのチュートリアルに沿って説明していきますが、公式のチュートリアルは正直丁寧さにかけていてわかりづらかったり、間違っていたりと大変でしたのでそこらへんを丁寧に説明していきたいと思います。CLIをインストールします。Homebrewをインストールしていない場合はインストールしてから実行してください。CLIにログインします。CLIへのログイン使用するアカウントを選択します。アカウント選択ログインに成功するとこのような画面が表示されます。ログイン成功ターミナルに戻ってもログインできたことが確認できます。Hubへコンシューマーグループを追加します。YourConsumerGroupNameYourIoTHubNameをTempAndHumidに、YourConsumerGroupNameをAgriTechSensorsに設定します。Hubリソースを作成したときの名前です。ConsumerGroupNameは任意のものを設定できます。今回はAgriTechSensorsと名付けました。Hubのサービス接続文字列を取得するには次のコマンドを実行します。Hub名のTempAndHumidを入力します。接続文字列は以下のようになります。"HostName={YourIotHubName}.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey={YourSharedAccessKey}"GitHubからWebアプリのコードをクローンする任意のディレクトリに移動して下記のコマンドでWebアプリのコードをクローンします。web-apps-node-iot-hub-data-visualizationクローンが完了したらクローンしたディレクトリに移動してください。WebアプリのコードをクローンWebアプリの環境変数を設定するここがドキュメントどおりにコマンドを実行して困ったステップでした。公式のチュートリアルではsetコマンドを使って環境変数を設定していたのですが、何度設定してもうまく行かないためハードコードをしたりググったりと苦労しました。exportコマンドで環境変数を設定する必要がありました。環境変数を設定するには以下のコマンドを実行します。EventHubConsumerGroup=YourConsumerGroupNameYourIoTHubConnectionStringにはSTEP4で取得した接続文字列を入力します。YourConsumerGroupNameにはSTEP3で設定した”AgriTechSensors”を入力します。以下のコマンドを実行してWebアプリを実行します。アプリにアクセスします。正常にデータが取得できていれば温湿度データが設定時間の間隔でリアルタイムで表示されます。ターミナルにも取得されているデータの詳細が表示されます。取得された温湿度データさて、これでローカルでWebアプリを起動し温湿度データを視覚化することができました。これではアプリを使用したいときに毎回起動しなくてはいけなくめんどくさいです。Service上にホストし、インターネットからアクセスできるようにしていきます。Serviceプランを使ってアプリをホストします。Serviceプランを作成するには次のコマンドを実行します。Serviceの任意の名前をつけます。RealTimeTempAndHumidを入力します。name>にはリソースグループの名前を入力します。AgriTechを入力します。ServiceでWebアプリをプロビジョニングする次のコマンドを実行してWebアプリをプロビジョニングします。name>には任意のWebアプリの名前を入力します。アプリ名はグローバルに一意である必要があり、大文字と小文字の英字、数字、およびハイフンを使用できます。以降を指定してください。name>にはリソースグループ名を入力します。AgriTechを入力します。Service名を入力します。RealTimeTempAndHumidを入力します。コマンド実行後色々と表示されます。以下のコマンドを実行して環境変数の設定をおこないます。name>にはWebアプリの名前を入力します。CheckTempAndHumidを入力します。name>にはリソースグループの名前を入力します。AgriTechを入力します。Webソケットプロトコルを有効にし、WebアプリがHTTPSリクエストのみを受信するように設定する以下のコマンドを実行してWebソケットプロトコルを有効化します。name>にはWebアプリの名前を入力します。CheckTempAndHumidを入力します。name>にはリソースグループの名前を入力します。AgriTechを入力します。Webソケットプロトコルの設定WebアプリがHTTPSリクエストのみを受信するようにするためには次のコマンドを実行します。name>にはWebアプリの名前を入力します。CheckTempAndHumidを入力します。name>にはリソースグループの名前を入力します。AgriTechを入力します。Serviceにデプロイするには、ユーザーレベルのデプロイ資格情報を使用します。以前に設定したことがない場合は以下のコマンドを実行して資格情報を設定してください。name>には任意のユーザー名を入力します。うち2つを含む必要があります。URLを取得するには以下のコマンドを実行します。name>にはWebアプリ名を入力します。CheckTempAndHumidを入力します。name>にはリソースグループの名前を入力します。AgriTechを入力します。ServiceのWebアプリのGitリポジトリを参照するリモートをクローンに追加するには以下のコマンドを実行します。URL>にはSTEP7で取得したURLを入力します。作業ディレクトリがクローンしたコードになっていることを確認してください。Serviceにコードをプッシュするには以下のコマンドを実行します。公式のチュートリアルとは少し違いますので注意してください。master:masterコードのプッシュパスワードの入力を求められたら、STEP5で作成したユーザーレベルのデプロイ資格情報を入力します。Serviceリモートのメインブランチにプッシュしてください。Serviceで実行されているかを確認します。name>にはリソースグループの名前を入力します。AgriTechを入力します。ページが表示されるはずです。DHT22センサーが実行中でデータを送信していれば、センサーによって送信された最新の50個の温度と湿度を示す測定値の実行中のプロットが表示されるはずです。HubとNode-REDを使えば比較的簡単にセンサーからデータを取得し、それを視覚化することができました。自分がこの記事と同じ手順でアプリを構築したときは様々なエラーに遭遇しました。Overflowを見たり、公式チュートリアルのトラブルシューティングを見たりして解決していきました。このWebアプリは使いやすいとはまだまだ言えないです。データの表示はアクセスしたときからのものしか表示されなかったり(データベースが必要?)、表示時間がUTC(多分)になっていて把握しづらかったり、メモリの線や縦軸横軸が上下に動くなどまだまだ実用性にはかけています。解決するためにはコードを改修していく必要があります。DHT22センサーをAzureを組み合わせてデータを取得するイメージは掴めたと思います。この記事がお役に立てれば幸いです。Touch編】この記事を書いた人まっちゃ外資系ITコンサル会社でPMO業務を担当しているまっちゃです。ガジェット、ライフスタイル、お金に関する記事を書いています。ショパン、カフェ巡り、勉強。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【iPod...まっちゃ外資系ITコンサル会社でPMO業務を担当しているまっちゃです。ガジェット、ライフスタイル、お金に関する記事を書いています。ショパン、カフェ巡り、勉強。Coffeeまっちゃ外資系ITコンサル会社でPMO業務を担当しているまっちゃです。ガジェット、ライフスタイル、お金に関する記事を書いています。ショパン、カフェ巡り、勉強。