はじめに
以下の記事でも扱った、「micro:bit CreateAI」の話です。
●新機能「micro:bit CreateAI」を使った AI・機械学習の仕組みをフルカラーLED と組み合わせてみた【速報版】【micro:bit】 - Qiita
https://qiita.com/youtoy/items/edd4fafac5e5d87b67d7
上記の記事では、以下のように micro:bit に接続したフルカラーLEDテープの制御との組み合わせを試していました。
この時の内容は、処理自体は micro:bit内で完結するものでした。
今回の内容
今回は、micro:bit と別のデバイスを連携させられるようにしてみます。
具体的には、以下の記事などでも扱っていた「ブラウザの Web Bluetooth API」で、ブラウザとの通信をさせてみます。
●Web Bluetooth API を使い micro:bit とブラウザの間で BLE通信【 #GWアドベントカレンダー 2021/4/30 】 - Qiita
https://qiita.com/youtoy/items/c98c0996458a21fc1e67
なお Web Bluetooth API は、対応ブラウザが Chrome系のブラウザ（Chrome や Edge など）に限られるので、その点はご注意ください。
実際に試してみる
実際に試してみます。
micro:bit側
micro:bit側の準備です。
AI・機械学習の部分の対応
AI・機械学習の部分を作ります。
とりあえず、学習させてみた動きは以下の 3つです。
- ほぼ静止
- micro:bit の長辺方向に揺らす
- micro:bit の短辺を上下方向に動かすバタバタさせるような動き
トレーニング前のデータをセットした状態は以下となりました。
この後、トレーニングを実行して、以下の画面で動作確認を行いました。
そして、ブロックコーディングの画面にしたのが以下となります。
3つの動きに応じて、LED の表示が変わるというプログラムがセットされた状態です。
MakeCode側での追加実装・準備
MakeCode側での追加実装・準備を進めます。
メニューから以下の拡張機能の部分を選びます。
Bluetooth用の拡張機能を検索し、選択します。
そして、Bluetooth接続関連の設定を行います。
画面右上の歯車アイコンから、設定用の項目（Project Settings）を選びます。
デフォルトでは、上から 2つ目が ON になっているのを、一番上が ON になった状態にします（※ ペアリング関連の設定変更です）。
あとは、Bluetooth の拡張機能のメニューの「・・・ more」から、矢印で示したブロックを使います。
数字の書き込みは、適当な数字を設定したものを「micro:bit の長辺方向に揺らす」「micro:bit の短辺を上下方向に動かすバタバタさせるような動き」のそれぞれに設定しました。
また、メニューの「Basic」にある「on start（日本語化されたメニューだと「最初だけ」のぶろっく）」
最終的には「ほぼ静止」の時の LED表示をなくしてしまったり、起動時・Bluetooth接続／切断時の状態が分かるような LED表示の処理を入れてみました。
HTML＋JavaScript の実装
Web Bluetooth API を使った受信側の実装を準備します。
コードは以下のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Web Bluetooth API による通信（micro:bit）</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 24px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #48c774;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3ec46d;
}
</style>
</head>
<body>
<h1>操作用ボタン</h1>
<button type="button" onclick="onStartButtonClick()">micro:bit 接続</button>
<script>
const UUID_UART_SERVICE = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
const UUID_TX_CHAR_CHARACTERISTIC = "6e400002-b5a3-f393-e0a9-e50e24dcca9e";
let myCharacteristics;
async function onStartButtonClick() {
try {
console.log("Requesting Bluetooth Device...");
const device = await navigator.bluetooth.requestDevice({
filters: [
{ services: [UUID_UART_SERVICE] },
{ namePrefix: "BBC" },
],
});
console.log("Connecting to GATT Server...");
const server = await device.gatt.connect();
console.log("Getting Service...");
const service = await server.getPrimaryService(UUID_UART_SERVICE);
console.log("Getting Characteristic...");
myCharacteristics = await service.getCharacteristic(UUID_TX_CHAR_CHARACTERISTIC);
await myCharacteristics.startNotifications();
console.log("> Notifications started");
myCharacteristics.addEventListener("characteristicvaluechanged", handleNotifications);
} catch (error) {
console.log("エラー：" + error);
}
}
function handleNotifications(event) {
if (myCharacteristics) {
try {
const value = event.target.value;
const inputValue = new TextDecoder().decode(value).replace(/\r?\n/g, '');
switch (inputValue) {
case "2":
console.log("バタバタさせるような動き");
break;
default:
console.log(`センサの値 ${parseInt(inputValue)}`);
}
} catch (error) {
console.log("エラー： " + error);
}
}
}
</script>
</body>
</html>
これを Chrome系のブラウザで開き、以下の手順を試します。
- 開発者ツールのコンソールを開く
- 画面上（HTML で実装した内容）に表示される緑のボタンを押す
- ボタン押下後に出てくるリストから、micro:bit に該当するものを選択してペアリング
- micro:bit CreateAI で学習させた動きの通りに、micro:bit を動かす
- 開発者ツールのコンソールでログが出力されているのを確認する
これを試した結果が、以下です。
開発者ツールのコンソールに意図通りのログが出力されたことが確認できました。