micro:bit CreateAI で BLE通信を使ってみる（ブラウザの Web Bluetooth API との組み合わせで）

## はじめに

以下の記事でも扱った、「[micro:bit CreateAI](https://createai.microbit.org/)」の話です。

●新機能「micro:bit CreateAI」を使った AI・機械学習の仕組みをフルカラーLED と組み合わせてみた【速報版】【micro:bit】 - Qiita
　https://qiita.com/youtoy/items/edd4fafac5e5d87b67d7

上記の記事では、以下のように micro:bit に接続したフルカラーLEDテープの制御との組み合わせを試していました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/yXaw8_Ih6Rc?si=EVxJPi-9JuVscRce" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

この時の内容は、処理自体は 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つです。

 1. ほぼ静止
 1. micro:bit の長辺方向に揺らす
 1. micro:bit の短辺を上下方向に動かすバタバタさせるような動き

トレーニング前のデータをセットした状態は以下となりました。

![2025-03-24_20-09-15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc267c1e-d259-49af-9938-9d18c4a2daf6.jpeg)

この後、トレーニングを実行して、以下の画面で動作確認を行いました。

![2025-03-24_20-08-54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2bcccb18-2668-455b-aae6-c247ec94527c.jpeg)

そして、ブロックコーディングの画面にしたのが以下となります。
3つの動きに応じて、LED の表示が変わるというプログラムがセットされた状態です。

![2025-03-24_20-09-32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9f9e8510-9efe-491e-9028-e8e867799876.jpeg)

#### MakeCode側での追加実装・準備

MakeCode側での追加実装・準備を進めます。

メニューから以下の拡張機能の部分を選びます。

![2025-03-24_20-09-32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/caefbe54-f52a-46fe-b634-ded39ebd90e1.jpeg)

Bluetooth用の拡張機能を検索し、選択します。

![2025-03-24_20-10-06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8ac2d030-0075-4815-ab49-3a88349e78f1.jpeg)

そして、Bluetooth接続関連の設定を行います。
画面右上の歯車アイコンから、設定用の項目（Project Settings）を選びます。

![2025-03-24_20-11-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/aac09e9a-5939-4134-a202-b64c4df824e9.png)

デフォルトでは、上から 2つ目が ON になっているのを、一番上が ON になった状態にします（※ ペアリング関連の設定変更です）。

![2025-03-24_20-12-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2a21566f-2b0b-4aa9-a7d7-6ab4f10ca16d.png)

あとは、Bluetooth の拡張機能のメニューの「・・・ more」から、矢印で示したブロックを使います。

![2025-03-24_20-12-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/db35bf2f-41e2-48d2-9534-4e310d18da6c.png)

数字の書き込みは、適当な数字を設定したものを「micro:bit の長辺方向に揺らす」「micro:bit の短辺を上下方向に動かすバタバタさせるような動き」のそれぞれに設定しました。

また、メニューの「Basic」にある「on start（日本語化されたメニューだと「最初だけ」のぶろっく）」

![2025-03-24_20-14-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dd864d41-754c-4d71-8504-91004e29e647.jpeg)

最終的には「ほぼ静止」の時の LED表示をなくしてしまったり、起動時・Bluetooth接続／切断時の状態が分かるような LED表示の処理を入れてみました。

![2025-03-24_21-32-52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8db24714-d4c7-4364-92ab-18f1fb31b534.jpeg)

### HTML＋JavaScript の実装

Web Bluetooth API を使った受信側の実装を準備します。

コードは以下のとおりです。

```html
<!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系のブラウザで開き、以下の手順を試します。

1. 開発者ツールのコンソールを開く
1. 画面上（HTML で実装した内容）に表示される緑のボタンを押す
1. ボタン押下後に出てくるリストから、micro:bit に該当するものを選択してペアリング
1. micro:bit CreateAI で学習させた動きの通りに、micro:bit を動かす
1. 開発者ツールのコンソールでログが出力されているのを確認する

これを試した結果が、以下です。

![2025-03-24_21-37-28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/aa8d5286-11ef-4503-bd87-5961ea07fd9f.jpeg)

開発者ツールのコンソールに意図通りのログが出力されたことが確認できました。