obniz とダイソーの人感センサーケーブルなどを組み合わせて簡易な仕組みを試作（人に反応して Discord に通知をとばす）【obniz】

Posted at 2023-12-21

この記事は、「obniz Advent Calendar 2023」の 21日目の記事です。

今回の内容

今回の記事の内容は、以下に出てきている「obniz」「USB接続の人感センサーケーブル」「スイッチ付Type-Aケーブル」の 3つのアイテムと、「Discord への Webhook を用いた通知」を組み合わせてみたものです。

動作の流れは以下の通りです。

人感センサーケーブルが、人などを検知すると通電
obniz が起動し Wi-Fi につながる
obniz のアプリが動作し、Webhook の処理が行われる
Discord に通知が届く

また、上記の人感センサーを手動で動作させないようにするには、スイッチ付Type-Aケーブルのスイッチを OFF にします。

2つのケーブルについて

今回使ったケーブル2種はダイソーで買ったものなのですが、それらの情報は以下の記事で書いています。

今回の仕組みを作る

それでは、上に書いた仕組みの作り方を書いていきます。

具体的には、以下の項目を順番に説明していきます。

Discord の準備
デバイス関連
obniz用のアプリのプログラム

Discord の準備

今回、Discord に Webhook を使って通知をとばします。
ここで手順の詳細は割愛しますが、Discord の Webhook用の URL を準備しておいてください。
（手順は、Web検索などでやり方が見つかると思うので、それを参照してください）

デバイス関連

デバイス関連は、ケーブルとデバイスをつなげるだけです。
「obniz -> 人感センサーケーブル -> スイッチ付ケーブル」というつなぎ方です。

obniz用のアプリを準備

obniz のアプリは、「クラウド実行のブラウザアプリ」を使いました。

●ブラウザアプリ: クラウド実行 - obniz Docs
　https://docs.obniz.com/ja/reference/cloud/app/browserapp-cloudexec

アプリの設定

ここから、アプリの設定について補足していきます。

クラウド実行のトリガーは「デバイスがオンライン時に実行」を選んでいます。

そして、「インストール時設定」で「Key」には「KEY」という内容を設定しました（あと、「項目名」に説明書きを入れています）。

上記の「インストール時設定」に設定した内容については、実際のインストール時の画面で文字列を設定します。その文字列の内容は、Discord の Webhook用の URL の https://discordapp.com/api/webhooks/ より後の部分の文字列です。

obniz用のアプリのプログラム

あとは、obniz用のアプリのプログラムを準備するだけです。
作った内容は、以下のとおりです。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test | obniz App</title>
    <script
      src="https://unpkg.com/obniz@3.x/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h3>Connect From Your Browser</h3>
    <script>
      const obniz = new Obniz("OBNIZ_ID_HERE");

      const install_configration = Obniz.App.configs();
      const KEY = install_configration["KEY"];

      obniz.onconnect = async function () {
        obniz.display.print("アプリ実行！");

        (async function () {
          const url = `https://discordapp.com/api/webhooks/${KEY}`;
          const message = {
            username: "obnizから",
            content: "fetch api を利用",
          };

          const res = await fetch(url, {
            method: "POST",
            mode: "cors",
            headers: {
              "Content-type": "application/json",
            },
            body: JSON.stringify(message),
          });
          console.log(res);
          const data = await res.text();
          console.log(data);
        })();
      };
    </script>
  </body>
</html>

プログラムに関する補足

obniz の　ID について、プログラムでは以下となっていますが、今回は特定の ID を持つ obniz に「クラウド実行のブラウザアプリ」をインストールして使うので、この "OBNIZ_ID_HERE" の部分は、その特定の ID に書きかわります。

      const obniz = new Obniz("OBNIZ_ID_HERE");

上で書いていた「インストール時設定」で設定した「KEY」の中身の文字列は、以下の部分で取り出しています。

      const install_configration = Obniz.App.configs();
      const KEY = install_configration["KEY"];

あとは、適当な内容で Discord に通知をとばします。
通知をとばす部分は、fetch() を使いました。

動作結果

今回の内容を準備し、その後に人感センサーを反応させると、以下のように Discord に通知がとんだことが確認できました。

おわりに

今回、「obniz」「USB接続の人感センサーケーブル」「スイッチ付Type-Aケーブル」の 3つのアイテムのセットと、「Discord への Webhook を用いた通知」を組み合わせてみました。

人感センサーケーブルを obniz の電源供給部分に使うことで、人に反応して動作する簡易な Web経由でのアプリ通知を実現できました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up