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

この記事は、「[obniz Advent Calendar 2023](https://qiita.com/advent-calendar/2023/obniz)」の 21日目の記事です。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e61114f6-dc59-12f3-5436-ad1863230432.png)

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

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

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

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

- [ダイソーで買った USB接続の人感センサーケーブルを軽く試してみる【完走賞ゲット-19】 - Qiita](https://qiita.com/youtoy/items/2daf4ce37a1bfe498286)
- [ダイソーで買ったスイッチ付Type-Aケーブルを手持ちのアイテムと組み合わせて試す【完走賞ゲット-21】 - Qiita](https://qiita.com/youtoy/items/a9c84b87399cd0cc0345)

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

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

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

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

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bd3eda02-256d-6074-eecf-ef01178caeeb.png)

そして、「[インストール時設定](https://docs.obniz.com/ja/guides/browser-app/install-setting)」で「Key」には「KEY」という内容を設定しました（あと、「項目名」に説明書きを入れています）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a011146e-74ce-0d69-2509-0ec579bd68e9.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f48e1ec7-eb0a-e8ce-457b-f7d89e9a415b.png)

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

```html
<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 に書きかわります。

```javascript
      const obniz = new Obniz("OBNIZ_ID_HERE");
```

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

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

あとは、適当な内容で Discord に通知をとばします。
通知をとばす部分は、[fetch()](https://developer.mozilla.org/ja/docs/Web/API/fetch) を使いました。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/62476e55-1177-78b6-419d-9f4e787a069f.png)

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

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