この記事は、「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経由でのアプリ通知を実現できました。