この記事は、「obniz Advent Calendar 2023」の 21日目の記事です。
今回の内容
今回の記事の内容は、以下に出てきている「obniz」「USB接続の人感センサーケーブル」「スイッチ付Type-Aケーブル」の 3つのアイテムと、「Discord への Webhook を用いた通知」を組み合わせてみたものです。
動作の流れは以下の通りです。
- 人感センサーケーブルが、人などを検知すると通電
- obniz が起動し Wi-Fi につながる
- obniz のアプリが動作し、Webhook の処理が行われる
- Discord に通知が届く
また、上記の人感センサーを手動で動作させないようにするには、スイッチ付Type-Aケーブルのスイッチを OFF にします。
2つのケーブルについて
今回使ったケーブル2種はダイソーで買ったものなのですが、それらの情報は以下の記事で書いています。
- ダイソーで買った USB接続の人感センサーケーブルを軽く試してみる【完走賞ゲット-19】 - Qiita
- ダイソーで買ったスイッチ付Type-Aケーブルを手持ちのアイテムと組み合わせて試す【完走賞ゲット-21】 - Qiita
今回の仕組みを作る
それでは、上に書いた仕組みの作り方を書いていきます。
具体的には、以下の項目を順番に説明していきます。
- 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経由でのアプリ通知を実現できました。