Raspberry Pi + 温湿度・気圧センサで室内環境監視をしてみる (その2)

というわけで (どういうわけで？)、前回の続き。

---

前回、センサ + Cron を使って定期的にデータを取得できるようにしました。

今回は取ったデータをグラフ化していきます！

どんな方法でも良かったんだけど、REST API とかも作りたかった + 勉強も兼ねて、Node.js + Express + D3.js (v4) を使ってみた。

Node.js というのは、サーバサイド JavaScript 環境。で、Express は Node.js をお手軽に使えるフレームワーク。さらに D3.js っていうのはデータを描画するための JavaScript ライブラリのこと。

---

npm (Node Package Manager) をインストールして、Node.js のバージョン管理を行う n コマンドを導入。導入した n コマンドで安定版 (LTS版) に切り替えます。

$ sudo apt-get install npm
$ sudo npm cache clean
$ sudo npm install npm n -g
$ sudo n lts

今回は、Node.js が v8.9.4 の環境で話を進めていきます！

$ node -v
v8.9.4

続いて、Express を導入します。

$ sudo npm install express-generator -g

今回導入した Express は v4.15.5 でした。

$ express --version
4.15.5

今回の Node.js アプリ用にプロジェクトディレクトリを作成し、npm コマンドで初期化、Express でアプリの雛形を作成。依存関係ライブラリを自動インストール。

$ cd <work-dir>
$ mkdir <app-name>
$ cd <app-name>
$ npm init
$ express
$ npm install

これでとりあえずアプリの体裁は整ったので、試しに実行してみる。

$ npm start

そして、Raspberry Pi に Web ブラウザでアクセスしてみる。 (もし、ファイアウォールを有効にしていたら、一時的に止めるか、TCP 3000 番ポートを開けてください。)

http://<raspberry-pi-ip-addr>:3000

下のメッセージが表示されれば正常に動作しています！

Express
Welcome to Express

いったん npm start を実行したターミナルに戻り、Ctrl-C を押して、停止します。

---

続いて、アプリを作っていきます！

メインのアプリを作ります。

$ cd <work-dir>/<app-name>/routes
$ vi monitor.js

この (GitHub Gist) コードをひたすら打つ。 (説明は省略。詳しく知りたい人はこのサイトがわかりやすいのでオススメ。)
22 行目の datafile に取得データを指定します。相対パスで指定する場合、アプリのプロジェクトディレクトリからの相対パスを指定してください。

続いて、作成した monitor.js を実行できるように設定を変更します。

$ vi <work-dir>/<app-name>/app.js

太字の行を追加し、先ほど作ったアプリへのルートを作成します。 (余裕があれば index や users は使わないのでコメントアウトしておく。)

var express = require('express');
var path = require('path');
    :
    :
//var index = require('./routes/index');
//var users = require('./routes/users');
var monitor = require('./routes/monitor');
    :
    :
//app.use('/', index);
//app.use('/users', users);
app.use('/monitor', monitor);
    :
    :

続いて、作成したアプリをデーモン化します。
デーモン化するために、PM2 をインストールします。

$ sudo npm install -g pm2

# デーモン化のために、アプリ情報ファイルを作成します。

$ vi <work-dir>/<app-name>/app.json

書く内容はこんな感じ。<app-name> には適当にアプリ名を入れる。

{
        "name"          : "<app-name>",
        "script"        : "./bin/www",
        "env"           : {
                "NODE_ENV"      : "development"
        },
        "env_production"        : {
                "NODE_ENV"      : "production"
        }
}

PM2 を Raspberry Pi 起動時に自ユーザで自動実行するようにし、作成したアプリ情報ファイルを指定して、アプリをデーモン化します。

$ cd <work-dir>/<app-name>
$ sudo pm2 startup -u <username> -hp=/home/<username>
$ sudo pm2 start app.json --env production
$ sudo pm2 save

正常に起動できたら、次のページにアクセスしてみる。

http://<raspberry-pi-ip-addr>:3000/monitor

すると、こんな感じでグラフが表示されるはず！
アプリのコードを書き換えれば変えられますが、デフォルトだと「赤 = 気温」、「緑 = 湿度」、「青 = 気圧」という対応づけ。

---

少し長くなりましたが、Rapsberry Pi に繋いだ温度/湿度/気圧センサから取得したデータを Web ブラウザ上で確認できるようにできました！
というわけで、いじょ！

---