今回の演習では, Firebaseを利用します．
FirebaseはGoogle社が提供するモバイルプラットフォームです．iOS、Android、Web等でアプリケーションを構築し、モバイルサービスを提供する際に必要な機能を備えています．主な機能として、リアルタイムデータベース、ユーザー認証、ストレージ、ホスティング、ファンクション、通知等があります．
料金プランは，無料のSpark, 従量制のBlazeの2つのプランが存在します．プランに応じて，Realtime Databaseへの同時接続数であったり，Cloud Functionsの呼び出し数やなどに制限があります．各プランの制限事項などの詳細は公式サイトの 料金ページで確認できます．
データベースには、Firebase Realtime Databasを利用します．また、今後作成するWebアプリケーションの配置先として、Firebase Hostingを利用します．利用するFirebaseの機能概要は以下のとおりです．
Firebase Realtime Databaseはクラウドホスティング型のNoSQLデータベースであり、データとしてJSONデータを保存・同期します．Realtime Database SDKを使うことでリアルタイムに保存・同期を行い、オフラインにも対応します．
Firebase Hostingは、SPAを簡単に公開できます．CDNやHTTPSにも対応しています．
Firebase Authenticationは、ユーザー認証システムを簡単に構築できます．ログインプロバイダとして、メールアドレス、電話認証、Google、Twitter、Facebook、GitHubおよび匿名があります．
Firebaseを用いたサーバ構築に必要な開発環境を準備します．作成するWebサーバは、FirebaseのRealtime DatabaseとHosting機能を利用します．そのための設定を行っていきます．
Firebaseを利用開始するためには、コンソールページへログインします．
ブラウザで https://console.firebase.google.com と入力し、Googleアカウントでログインします．
もしくは，Firebaseの公式サイトからログインします．画面の右上の「Go to console」リンクをクリックします．
新規にプロジェクトを作成します．コンソールページの中央にある、"プロジェクトを追加"リンクをクリックします．プロジェクトを追加するポップアップ画面が表示されるので、プロジェクト名、プロジェクトID、規約の同意を入力・選択していきます．
-
プロジェクト名は、半角・英数・一部記号で4文字以上を入力します．
-
プロジェクトIDを確認します．プロジェクトIDは、先ほど指定したプロジェクト名をベースに自動生成されます．なお、自動生成されたプロジェクトIDを変更したい場合は、鉛筆のアイコンをクリックすることで変更できます．このIDは、Realtime DatabaseやFirebase Hosting等のURLの一部となり、グローバルで一意である必要があります．画面上のヘルプ欄にもありますが、プロジェクトIDは後から変更できませんので注意が必要です．
-
"続行" をクリックします．
Google Analyticsの設定を行います．今回は、Google Analyticsを利用しないので、"Google Analyticsを設定しない" を選択します．
- "プロジェクトを作成" をクリックします．
ブラウザのFirebase console上で，Realtime Databaseの項目をオープン，リアルタイムデータベースを作成します．
データベースを作成 ボタンをクリック
米国 を選択します．
今回は，テストモード を選択して実行します．
Firebaseは、CLI(Command Line Interface)により、Firebaseプロジェクトの管理、操作、デプロイ(公開)を行います．
Windowsは，以下のアドレスから，スタンドアロンバイナリをダウンロードして実行します
ダウンロードした，バイナリを実行すると， firebase コマンドが実行可能なシェルがオープンします．
macOS, Linuxでは，npmコマンドにより firebase-toolsをインストールします．
npm install -g firebase-toolsインストール後、ターミナルから firebase コマンドが利用可能になります．
サーバ構築にあたり、先ほど作成したFirebaseプロジェクトを利用するためにターミナルを使ってFirebaseへログインします． fireabse コマンドに続き login と入力します．
firebase loginコマンドを入力するとブラウザが立ち上がり、Goolgeアカウント認証のページが表示されます．認証後、Firebase CLIのアクセスを許可します．
✔ Success! Logged in as [email protected]なお、firebase logout コマンドを入力するとFirebase CLIはログアウトします．
コンソールで作成したプロジェクトに対して、Hostingの機能を利用できるようにしていきます．
ターミナルでプロジェクト用のディレクトリを作成します．今回は，iot_host名でディレクトリを作成する．このディレクトリ内がFirebaseプロジェクトのディレクトリとなります．
mkdir iot_host
cd iot_hostFirebase Hostingの設定を行います．ターミナルで firebase init hosting コマンドを入力します．ターミナルには、Firebaseプロジェクトが一覧に表示されるので、該当するプロジェクトを選択します．設定が終わると以下のようなディレクトリ構成になります．
.
├── firebase.json
└── public
├── 404.html
└── index.htmlRealtime Databaseに保存されたデータをグラフ化するWebサイトをFirebase Hostingを使い作成をしていきます．
Realtime Database 内に，以下のように保存された，データを可視化していきます．
.
└── stations
└── [station_id]
├── status
| └── led
└── data
├── -MZMUBJ_9MfN1vEOZG-V
├── -MZMUBJ_9MfN1vEOZG-C
| ├── humid
| ├── press
| └── temp
└── -MZMUC-11Nq_J6FYCYUK前節でセットアップしたpublicディレクトリ内のファイル index.html を編集します．
public ディレクトリに移動します．
cd publicエクスプローラ(Windows)やファインダー(macOS)でプロジェクトディレクトリiot_host をオープンし public フォルダへ移動します．
public フォルダ内の index.html の内容を以下の通りに修正します．
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>データの可視化</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.7.1/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.7.1/firebase-auth.js"></script>
<script defer src="/__/firebase/8.7.1/firebase-database.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
<style type="text/css">
.style-0 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #003cb3;
}
.style-1 {
fill: #00b72b;
fill-opacity: 0;
stroke-width: 2px;
stroke: #33b72b;
}
.style-2 {
fill: #b2b700;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b2b700;
}
</style>
</head>
<body>
<h2>計測データ</h2>
<div id="visualization"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
let app = firebase.app();
let station_id = "st001";
let container = document.getElementById('visualization');
let names = ['Humidity', 'Pressure', 'Temperature'];
let dataset = new vis.DataSet();
let groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'style-0',
options: {
yAxisOrientation: 'left',
interpolation: false,
drawPoints: {
size: 2
}
}
});
groups.add({
id: 1,
content: names[1],
className: 'style-1',
options: {
yAxisOrientation: 'right',
interpolation: false,
drawPoints: {
size: 2
}
}
});
groups.add({
id: 2,
content: names[2],
className: 'style-2',
options: {
yAxisOrientation: 'left',
interpolation: false,
drawPoints: {
size: 2
}
}
});
let date = new Date();
let options = {
dataAxis: {
showMinorLabels: true,
alignZeros: false
},
width: '100%',
height: '550px',
legend: { left: { position: "top-left" },
right: { position: "top-right" } },
start: date.setMinutes(date.getMinutes() - 5),
end: date.setMinutes(date.getMinutes() + 15)
};
let graph2d = new vis.Graph2d(container, dataset, groups, options);
var ref = app.database().ref('stations').child(station_id + '/data');
ref.limitToLast(100).on('child_added', function(snapshot) {
var newData = snapshot.val();
addItem(newData.timestamp, newData.humid, 0);
addItem(newData.timestamp, newData.press, 1);
addItem(newData.timestamp, newData.temp, 2);
let now = new Date();
graph2d.setWindow(now.setMinutes(now.getMinutes() - 5), now.setMinutes(now.getMinutes() + 10), {animation: false});
});
function addItem(timestamp, value, g) {
itm = { x: new Date(timestamp).toLocaleString(), y: value, group: g };
dataset.add(itm);
}
});
</script>
</body>
</html>作成したページを公開します．
プロジェクトのルート(iot_host)に移動して，
ターミナルを使い以下のコマンドを入力します．
cd ..
firebase deployしばらく待ちます．デプロイが完了すると、ターミナル上にDeploy complete!のメッセージとともに、アドレスが表示されます．
=== Deploying to '{プロジェクトID}'...
...中略...
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/xxxxx/overview
Hosting URL: https://xxxxx.web.app
Hosting URL のアドレスをブラウザに入力し表示確認をします．
Node-REDを用いて，作成したFirebase上のWebアプリケーションへデータを送信します．
Node-REDがFirebaseと通信が可能となるように，ノードを追加します．
node-REDを起動し，パレットの管理 > ノードの追加 を開き， node-red-contrib-firebase-data ノードを追加します．
ターミナルで，node-red-stop を停止させ，node-red-start で起動します．
- 停止する
$ node-red-stop- 起動する
$ node-red-startパレットから，Add Firebase ノードを追加し，ノードの設定を行います．
- Realtime Databaseへ接続するための認証設定を追加します．鉛筆アイコンをクリックして，FirebaseCertificateダイアログを表示します．
- 自身のRealtime DatabaseのURLを入力します．今回，RealtimeDatabaseはテストモードとして設定してあるので，
Auth typeはNoneを選択してください． - デバイスから送信されてきたデータの保存パスを設定します．
Methodは，新規追加なので，pushを選択します．
MQTTノードと接続していきます．ESP32デバイスからMQTTプロトコルで送信されてくるデータには，時刻情報がないため，Node-Red上で時刻を追加していきます．
Function ノードを間に挟みます．ノード内のコード欄に次のプログラムを記述します．
msg.payload.timestamp = Date.now();
return msg;Node-Redの右上の デプロイ ボタンを押して反映させます．
WebのFirebaseコンソールでプロジェクトへアクセスし，Realtime databaseの画面を表示します．
データが送信されていれば，コンソール上でリアルタイムにデータが追加されてるのが確認できます．
Webアプリケーションでも確認します．WebのFirebaseコンソールでプロジェクトないのHostingの画面を表示します．画面の [プロジェクトID]のドメイン項目には，Webアプリがホスティングされているドメインのリストがあります．リスト内のURLをオープンします．
横軸を時間で Humidity, Pressure, Temperature の3データがグラフ表示されているのが確認できます．
- Firebase Documents
- https://firebase.google.com/docs/
- Realtime databae REST