たっち＆びーぷとmicro:bitでLチカ💡

iPad/iPhoneアプリ『たっち＆びーぷ Connect』のBLEコネクトセンターを使ってみよう！のシリーズ、micro:bit編です。

今回の目標は「iPadの画面をタッチて無線接続したmicro:bitのLEDが点灯させる」です。

動作検証の環境は以下の通り。

PC: Macbook Air(Tahoe 26.1)
BLEデバイス: micro:bit v1(v2も可。ただしスピーカーとは相性が悪い模様)
ブラウザ: Google Chrome(143.0.7499.41)
Webサイト: Microsoft MakeCode

いくつかバージョン情報も書きましたが、概ねなんでも大丈夫です🙆
micro:bitがv1かv2かで、接続時に表示されるデバイス名が若干変わります。

大まかな手順

MakeCodeで新しいプロジェクトを立ち上げる
BLE(Bluetooth)接続できるよう設定を変更する
ブロックを並び替えてプログラムを作る
micro:bitにプログラムをダウンロードする
iPad/iPhoneアプリ『たっち＆びーぷ Connect』を起動し、BLEコネクトセンターを開く。
micro:bitにBLE接続し、コマンドを設定する。
実際にLチカしてみる！

MakeCodeの初期設定

BLE通信（Bluetooth）関連のブロックを使えるようにするため、プロジェクトを立ち上げた直後に設定が必要です。
画面右上の歯車アイコンから「拡張機能」を開き、「Bluetooth」で検索し、追加してください。

また、ペアリング関連の動作を簡便にするための設定も行います。
画面右上の歯車アイコンから「プロジェクトの設定」を開き、「No Pairing Required」のみにチェックが入るようにしてください。

これでMakeCodeの準備は完了です。

プログラムを作る

BluetoothのUARTサービスというものを使います。
これはデバイス間で命令（コマンド）を送り合うものです。
どのような命令を送るかは設計者の腕の見せ所になりますが、今回は以下のような形式で考えました。

Aコマンド（たっち＆びーぷ Connectの音声が再生開始されるタイミングで送られるコマンド）

// Textモード
#1$

Bコマンド（たっち＆びーぷ Connectの音声が再生終了するタイミングで送られるコマンド）

// Textモード
#2$

MakeCode側での作りやすさも踏まえて、「#で始まって$で終わる」構造としています。

後は以下のような感じで組んでみてください！
（急に雑でスミマセン…）

ブロックではなくJavaScriptを使うと、以下のコードをコピペしていただくだけで再現できます！

bluetooth.onBluetoothConnected(function () {
  basic.showIcon(IconNames.Happy);
});
bluetooth.onBluetoothDisconnected(function () {
  basic.showIcon(IconNames.Sad);
});
bluetooth.onUartDataReceived(serial.delimiters(Delimiters.Hash), function () {
  data = bluetooth.uartReadUntil(serial.delimiters(Delimiters.Dollar));
  if (data == "#1") {
    basic.showLeds(`
            # # # # #
            # # # # #
            # # # # #
            # # # # #
            # # # # #
            `);
  } else if (data == "#2") {
    basic.showLeds(`
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            `);
  } else {
    basic.showIcon(IconNames.No);
    basic.pause(2000);
    basic.showIcon(IconNames.Happy);
  }
});
let data = "";
led.setBrightness(10);
basic.showIcon(IconNames.Heart);
bluetooth.startUartService();

プログラミング作業が終わったら実際にmicro:bitをPCに接続し、ダウンロードしてください。
（この辺りの手順は割愛させていただきます。Web上に解説記事がたくさんあると思いますので。）

たっち＆びーぷ Connectと接続して動作確認

周辺のデバイスのスキャンする

micro:bitは電源（かパソコン）に接続し起動しておいてください。

『たっち＆びーぷ Connect』を開き、[Connect]セクションの外部デバイス設定を開きます。

[その他のBLEデバイスに接続] - [周辺のデバイスを探す]　と操作していくと、近くにあるBLEデバイスの一覧が表示されます。
その一覧の中から「BBC micro:bit」というような名称のデバイスを探してください。

この時、micro:bitのバージョンによって表示される名称に若干の違いがあるかと思います。

⚠️注意
[周辺のデバイスを探す]をタップしてからmicro:bitを起動すると、スキャンで見つからず一覧に表示されない場合があります。
その場合は一度[Stop Scan]を押してから[Start Scan]で再度スキャンし直してください。

接続してサービス/キャラクタリスティックを選択する

デバイス名をタップして接続が成功すると、次の画面に遷移します。

BLE通信には様々な機能があり多くの情報をやり取りできます。
この画面はBLEデバイスが公開している機能一覧のようなものです。
やや専門的になりますが、各機能を「サービス」「キャラクタリスティック」と呼びます。

micro:bitの場合はここで、

[UART TX]

と書かれている欄を見つけ、タップしてください。
（TXとRXが逆？？と思ったりもしますが、UARTのどちらかで[Select]ボタンを押せる方を選んでいただければ間違い無いです）

送信するコマンドを設定する

これが最後の画面です。
実際にBLEデバイス（ここではmicro:bit）に送信するコマンドを編集します。
既に作ってあるmicro:bit側のコードに合わせて入力してください。

以下、再掲します。

Aコマンド（たっち＆びーぷ Connectの音声が再生開始されるタイミングで送られるコマンド）

// Textモード
#1$

Bコマンド（たっち＆びーぷ Connectの音声が再生終了するタイミングで送られるコマンド）

// Textモード
#2$

[完了]ボタンを押して、設定終了です！

実際に試す

アプリ内でアクセシビリティ設定やフィードバック設定を整え、実際に操作してみましょう！

少し分かりづらいですが、iPadに合わせてmicro:bitのLEDが点いたり消えたりします

おまけ

Lチカではなく、振動モーターを動かすコードはこちら。

bluetooth.onBluetoothConnected(function () {
  basic.showIcon(IconNames.Happy);
});
bluetooth.onBluetoothDisconnected(function () {
  basic.showIcon(IconNames.Sad);
});
bluetooth.onUartDataReceived(serial.delimiters(Delimiters.Hash), function () {
  data = bluetooth.uartReadUntil(serial.delimiters(Delimiters.Dollar));
  if (data == "#1") {
    pins.digitalWritePin(DigitalPin.P0, 1);
  } else if (data == "#2") {
    pins.digitalWritePin(DigitalPin.P0, 0);
  } else {
    basic.showIcon(IconNames.No);
    basic.pause(2000);
    basic.showIcon(IconNames.Happy);
  }
});
let data = "";
led.setBrightness(10);
basic.showIcon(IconNames.Heart);
bluetooth.startUartService();

たっち＆びーぷ Connect | あっきーの教材工房

画面タッチで音を鳴らせるアプリです。タッチ以外にも様々な入力方法に対応しています。

あっきーの教材工房