さくらのモノプラットフォームを使用したアプリケーション開発　第４回

初めに

　本記事は、さくらインターネット株式会社により開発環境が用意されているモノプラットフォームを使用する記事です。IoT向けのサービスを作成したい人、扱い人を対象としています。M5stackを利用してさくらのモノプラットフォーム及び、さくらのモノプラットフォーム開発基板を使用した開発について説明しています。

　この連続記事は
１回目　システムと全体の構成の説明
２回目　ハードウェアの組み立て
３回目　モノプラットフォームの設定
４回目　クラウドアプリケーションの作成
のような順番で進めてきました。

第１回目の記事はこちらです。
第２回目の記事はこちらです。
第3回目の記事はこちらです。
今回は4回目の記事となっています。実際にセンサーを使用して、環境モニタリングシステムを作成します。

最終的に作成するもの

　本連続記事では「IoTセンシング」、「マイコンでのプログラムと書き込み」、「モノプラットフォームの設定」、「クラウドアプリケーション」「データの可視化」、「はんだ付け」について説明しており、サンプルアプリケーションとしてIoT環境モニタリングシステムを作成できます。

この記事の対象者

• さくらのモノプラットフォームを体験してみたい人
• IoTを体験してみたい人
• 開発基板を請求したがその後どうして良いかわからない人
• webエンジニア、ソフトウェアエンジニア
  を対象としています。

事前準備

• 開発基板の調達
• さくらのアカウントの作成
• ArduinoIDEのインストール
• Googleアカウントの準備
• 部品の調達
  こちらのページを参考にします。
  組み立てやプログラムの書き込みについては、こちらのページを参考にしてください。
  →さくらのモノプラットフォームを使用したアプリケーション開発　第2回

今回の開発の流れについて

今回は、BME280という環境センサーを使用した環境モニタリングシステムの開発を例として説明します。
1 仮想マシンの作成
2 仮想マシンへの接続と開発環境の構築
3 デバイスの準備とマイコンへのプログラムの書き込み
4 アプリケーションサーバーでのデータの受信確認と可視化の確認
5 ストレージに保存されたデータの可視化
の順番で説明しています。

実際の開発

1 仮想マシンの構築

事前準備で用意したGCPのアカウントで仮想マシンを構築します。
※GCPを使用するためにはクレジットカードの登録が必要ですが無料枠が用意されています。

GCPのトップ画面からコンソールに入っていきます。

コンソールからCompute Engineに入ります。

インスタンスを作成します。

下記のような内容で仮想マシンを作成します。
無料分を消費してしまうと、課金されますので注意していください。

認証が必要になることがあります。認証が必要な場合には画面の指示に従って認証を行ないます。

仮想マシンが立ち上がったら必要なポートを開けていきます。
アプリケーションで使用する1800番のポートと3000番のポートを開ける必要があります。

ファイアーウォールの設定に入って、ファイアーウォールルールを作成していきます。

以下のような設定でファイアーウォールルールを作成します。

ファイアーウォールのルールが作成できて、ポートが開放されていることを確認します。
この時に22番ポート(ssh接続)が開いていなかったら、22番ポートも開けておく必要があります。

2 仮想マシンへの接続と開発環境の構築

仮想マシンへsshで接続します。
仮想マシンのコンソールでsshというボタンを押すことで、新しいウィンドウが開いて、ブラウザからssh接続することが出来ます。認証の必要があれば認証します。
※この時に22番ポートが開いていないとssh接続することができないので注意します。

ssh接続の確認が出来たら、必要なスクリプトを仮想マシンにダウンロードして実行します。
スクリプトはこちらに用意しています。
仮想マシンのコンソールに下記のコマンドを入力して使用します。

git clone https://github.com/shinrinakamura/sipf_sample_cloud.git
bash sipf_sample_cloud/sipf_sample_cloud.sh

このスクリプトを実行すると、Node-REDのインストール、必要になるノードの追加、influxDBのインストール、使用するデータベースの作成、grafanaのインストールを行うようになっています。
Node-REDのインストール中に質問をされます。ユーザーの認証をするか聞かれるまでyesと答えます。
ユーザーの認証もyesと答え、ユーザー名とパスワードを指定することにより、Node-REDにアクセスするときにユーザー名とパスワードを入力することを求められるようになります。ユーザー認証をすることを推奨します。
後の質問については、デフォルトで提案されているものを指定して結構です。
入力内容を間違えるとエラーが出てインストールに失敗するので、その時は仮想マシンを作成しなおして再挑戦します。

3 デバイスの準備とマイコンへのプログラムの書き込み

事前準備で紹介した温湿度センサー(BME280)とM5stackを接続します。GROVEコネクタ対応のケーブルがある場合には、M5stackのGROVEコネクタに接続します。
（写真）
こちらの記事を参考に必要なプログラムをインストールしておきます。
ArduinoIDEを開きます。
ファイル→スケッチ例からテスト用のプログラムを開きます。

今回使用するプログラムはカスタムライブラリのスケッチ例のところにありますので、esp_sipf_clientからsample_environ_sensorを選択することで、今回使用するプログラムを開くことが出来ます。
このプログラムをM5stackに書き込むことで、M5stackで取得した、温度、湿度、気圧情報をモノプラットフォームにアップロードすることが出来ます。
書き込み方がわからない場合は、こちらの記事を参考にされてください。

4 アプリケーションサーバーでのデータの受信確認と可視化の確認

必要なファイルをローカルPCにダウンロードします。
こちらからダウンロードして、任意の場所に解凍しておきます。
GCPのコンソールに戻って、外部IPドレスを確認します。

確認した外部アドレスの1880番ポートに接続します。
（例えば外部IPが192.168.0.1であるならばブラウザのアドレスバーに192.168.0.1:1880と入力するとNode-REDにアクセスすることが出来ます。）

ユーザー認証をするを選択した人は、ユーザー名とパスワードを入力してログインします。
Node-REDのフローをローカルPCにダウンロードします。
Node-REDにフローをインポートします。
右上のハンバーガーメニューから読み込みを選択します。

フローの読み込みでクリップボードを選択して、読み込むファイルの選択を押すとエクスプローラが開きます。

先ほどダウンロードして解凍したフォルダからmonoplatformSampleApplication/monoplatformSampleApplication/Node-RED-sample
/Environmental_Data_Visualization_Flow.json
を選択して読み込みます。
読み込みが終わったらデプロイします。
※説明した手順で、開発環境を構築しているとそのままデプロイして大丈夫ですが、そうでない場合、不明なノードがありますというエラーが出ますので、その場合は必要なノードをインストールしてデプロイします。webソケットのプロパティが設定されていませんというエラーが出ている場合は、そのままデプロイして大丈夫です。
※Environmental_Data_Visualization_Flow.jsonとSimple_payload _extraction.jsonを同時にデプロイするとうまく動かないことがありますので、その時には片方のフローを消去して、片方のフローだけデプロイするようにします。

webソケットの設定をしていきます。モノプラットフォームと書かれているノードをダブルクリックすることで、webソケットの設定を開きます。

パスには３回目の記事で取得したURLを貼り付けます。
送信 / 受信に関してはペイロードを送信 / 受信を選択します。

パスの設定まで終わったら、追加をして、デプロイをします。
これで、データの受信と可視化ができるようになりました。

続いてデータを受信できているか確認していきます。右上にあるデバッグボタンを押すことで、データの受信確認をすることが出来ます。
（デフォルトの状態では３０秒間隔でデバイスからデータを送信するようにしていますので、データの受信確認は３０秒以上行う必要があります。）

続いて可視化した画面を確認していきます。
画面右上にある矢印を押した後にDashboardを選択します。

画面が変わるので、右上を向いた矢印をクリックします。

新しい画面が開きゲージが表示されます。

5 ストレージに保存されたデータの可視化

最後にデータをストレージに保存して可視化する方法を説明します。
データベースの設定については、Node-REDのフローの中と、インストール用のスクリプトの中で行っていますので、今回は考慮しなくて大丈夫です。設定する必要があるときはNode-REDのフローの中のinfluxdbノードをダブルクリックして設定を開いて設定します。

続いてストレージに保存されたデータを可視化していきます。
ブラウザからグローバルIPアドレスの3000番を開いてください。
アクセスの仕方がわからない場合はこちらに戻って確認します。
Grafanaにログインしていきます。

ユーザー名とパスワードはadmin, adminになっています。
最初のログインの時に、ユーザー名とパスワードを変更するか聞かれますので、必要があれば変更しておきます。

続いて、データベースとGrafanaを連携します。
トップページのハンバーガーメニューからAdministration, Data sourceを選択します。

Add Data Sourceを選択して、続いてinfluxDBを選択します。

連携するための情報を入力する必要がありますので、今回は必要最低限だけ入力します。

を入力して、Save & testをクリックします。
認証などは行っていませんので、運用には十分に注意します。

データの連携が終了したら、ハンバーガーメニューからdashboardsに入っていきます。
Newボタンを押して、importを選択します。
画面が切り替わったらimport dash boardを選択するとエクスプローラーが開きます。
先ほどダウンロードして、解凍しておいたフォルダからmonoplatformSampleApplication/monoplatformSampleApplication/Grafana-sample
/Environment system2-1687955351911.jsonを選択します。
Loadボタンをクリックして画面が変わった後にimportをクリックするとdashboardが作成されます。

これでストレージに保存されたデータの可視化まで終了しました。

終わりに

　いかがでしたでしょうか。今回はさくらのモノプラットフォームを利用した環境センサーを開発してみることで、IoTアプリケーションの開発の流れを体験してみました。今回体験したことを応用することにより、自分の暮らしを便利にするものや、役に立つものを作ることが出来るようになります。
　本連続記事の内容を実行することで、さくらのモノプラットフォームの使い方もわかったのではないでしょうか。本連続記事の内容を参考に自分にとって便利であったり役に立つアプリケーションをつくってもらうととても嬉しく思います。
　今回は簡潔なアプリケーションを作成しましたが、応用編として挑戦的な内容の記事も作成していく予定です。また、この連続記事を見るだけではよくわからないな（特にHWの部分）という声があれば、ワークショップの開催も検討します。ご意見ご感想お待ちしています。

関連記事

さくらのモノプラットフォームを使用したアプリケーション開発　第1回
さくらのモノプラットフォームを使用したアプリケーション開発　第1.5回（事前準備編）
さくらのモノプラットフォームを使用したアプリケーション開発　第2回
さくらのモノプラットフォームを使用したアプリケーション開発　番外編
さくらのモノプラットフォームを使用したアプリケーション開発　第3回

参考情報

さくらのモノプラットフォーム　開発者向け情報
sipf-simple-websocket-viewer

参考動画

アルディーノIDE v2.0のインストール
Esp32をArduino IDEで使えるようにしよう
0-1.GCPアカウント作成方法

special thanks

さくらインターネット株式会社
Engeneer cafe
株式会社B&B Lab.