obniz + Machinist でラクラク IoT センサーロガー：スマホでも開発可能！おうち IoT

18272 ワード
IoT JavaScript Machinist obniz faas JavaScript テキストリンク

obniz でラクラク IoT センサーロガーを無料で維持したい！

前回の記事のように、Google Cloud Functions で obniz を 1分おきに動かして、センサーの値を記録していました。しかし、Google スプレッドシートに記録していたため、データが溜まってくるとシート自体を開くにも重すぎて開けなくなってきてしまいました。

そこで、IoT 向けのデータ保存サービスを試してみたいと思っていたのですが、AWS IoT など少額かもしれませんが維持費がかかるため、とりあえずクレジットカード登録不要で無料プランのある、IIJ の Machinist を使用してみました。

ハードウェアとインターネットが繋がる IoT 開発では、複数のプログラムが必要になることが多いですが、今回の方法では

  • プログラムはたった1枚のHTML
  • 環境構築不要・スマホでも開発可能
  • 複雑な設定なし
  • クラウドサービス月額費用無料

で IoT センサーロガーを開発することができます！！

obniz とは

obniz（オブナイズ）は日本の CambrianRobotics 社が開発したマイコンボードで、Wi-Fi に接続してインターネット経由で操作します。簡単に Wi-Fi に繋がり、ファームウェアの書き込み不要で API 経由で操作するので、インターネットと連携したハードウェアをサクッと作れるのが特徴です。

Machinist の料金プラン

執筆時点で Machinist の料金プランは以下の通りでした。
フリープランでは1ヶ月以上前のデータは消えてしまいますが、とりあえずラクに維持してみたいのでフリープランで試してみます。

Machinist は複雑な設定も不要で始められる

Getting Started - Machinist の通り、必要な作業はたったこれだけでした。

  • メールアドレスとパスワードを入力して新規登録
  • 届いたメールから本登録用リンクをクリック
  • ログインしてアカウント設定からAPIキーをメモ

obniz から Machinist に送信するプログラム

HTMLが開かれる、またはサーバーレスイベントとして実行されるたびに、obniz に繋いだ BME280 （温湿度・気圧センサ）の値を Machinist にアップロードするプログラムを作成しました。

obniz 開発者コンソールのリポジトリにてHTMLを新規作成し、以下のコードをコピー&ペーストします。

以下のコードのうち、書き換える部分は以下のとおりです。

sensor_logger.html
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/[email protected]/obniz.js" crossorigin="anonymous"></script>
</head>

<body>
    <div id="obniz-debug"></div>
    <h1>obniz Sensor Logger</h1>
    <button id="post">送信</button>

    <script>
        let obniz = new Obniz("XXXX-XXXX");//obnizのIDを指定してください
        const url = "https://gw.machinist.iij.jp/endpoint";
        const token = "YOUR_API_KEY";//MachinistのAPI KEYを指定してください

        let sensor;
        let param = {
            "agent": "Home",
            "metrics": []
        };

        function addMetrics(param, name, value) {
            param.metrics.push({
                "name": name,
                "namespace": "Environment Sensor",
                "data_point": {
                    "value": value,
                }
            });
        }

        function sendParams(url, param, token) {
            let xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    console.log(xhr.response);
                    if (typeof done === "function") {
                        obniz.close();
                        done();
                    }
                }
            }
            let p = JSON.stringify(param);
            xhr.send(p);
        }


        obniz.onconnect = async function () {
            obniz.io8.output(true);
            sensor = obniz.wired("BME280", {vio:0, gnd:1, sdi: 2, sck: 3 });
            await sensor.applyCalibration();

            const obj = await sensor.getAllWait();

            param.metrics = [];
            addMetrics(param, "temperature", obj.temperature);
            addMetrics(param, "humidity", obj.humidity);
            addMetrics(param, "pressure", obj.pressure);

            console.log(param);
            sendParams(url, param, token);
        }

        $("#post").click(async function (e) {
            const obj = await sensor.getAllWait();

            param.metrics = [];
            addMetrics(param, "temperature", obj.temperature);
            addMetrics(param, "humidity", obj.humidity);
            addMetrics(param, "pressure", obj.pressure);

            console.log(param);
            sendParams(url, param, token);
        });

    </script>
</body>

</html>

obniz サーバーレスイベントに登録

obniz 開発者コンソールのサーバーレスイベントにて、作成したプログラムが定期実行されるように登録します。

obniz のサーバーレスイベントでは現在1日150回まで実行できるそうなので、10分おきに実行されるよう設定しました。

「テスト実行」を押せば、今すぐ実行もできます。

実行履歴も見ることができます。プログラム中で console.log 等で出力したログも後から見返すことができるので、何かトラブルがあったときも安心ですね。

記録されたデータ

Machinist に記録されたデータはこのようになりました！
スマホでもいつでもどこでも最新のデータが見られます。便利ですね。

グラフもきれいで、拡大表示やCSVダウンロードなど機能が揃っています。

最後に

最初は jQuery の $.ajax で POST しようとしたのですが、 Authorization Bearer の部分がうまくいかなかったようで、 XMLHttpRequest を使って実装しました。

Machinist では複数の端末（agent）からのデータをまとめて閲覧することができるようですし、送信するデータにタグや、位置情報などのメタデータをつけることもできるようです。また、データを「監視」して「アクション」に繋げる設定も簡単にできるようになっているようです。

Machinist には、 JavaScript からでも簡単にデータを送信することができました。obniz との相性も良さそうです。

大量の obniz をばらまいてデータを収集したいですね！