React対応のWeb Bluetoothで「NTTドコモF503i（小８付録バージョン）」に接続する

embot互換のBLE搭載付録

2025年2月28日ごろ発売の小学館スペシャル４月号『小学８年生 はじめてのプログラミング号』には、embot互換のBLEを搭載した付録がついてきます。

Web Bluetoothを使って、付録の「NTTドコモF503i（小８付録バージョン）」に接続できます。

Webブラウザーから接続した例（GitHub Pages）

React対応パッケージ - @weblueth/octaechophone

次のReact対応パッケージを使って、Webブラウザーで動作するアプリを開発できます。

サンプルページのコンポーネントについて

このパッケージを使ったサンプルページが、GitHub上で公開されていますが、そのソースコードに含まれているサンプルページのコンポーネントについて説明します。

weblueth-octaechophone/pages/app/components/OctaEchoPhoneDevice.tsx

このコードは、Reactを使用してBluetoothデバイスと通信するためのインターフェースを提供する「OctaEchoPhoneDevice」コンポーネントを定義しています。

1. 状態管理

このコンポーネントは useWbxActor フックを使用して状態を管理しています。状態は state に保存され、 send 関数で状態を変更します。

const [state, send] = useWbxActor();
const connectionName = state.context.conn.name;

2. 状態の変更アクション

reset、request、connect、disconnect という4つのアクションを定義して、それぞれのボタンに対応させています。

const reset = () => send("RESET");
const request = () => send("REQUEST");
const connect = () => send("CONNECT");
const disconnect = () => send("DISCONNECT");

3. デバイスの接続

Bluetoothデバイスの接続状態を管理し、デバイスの名前を取得するためのハンドラ onDeviceBound を定義しています。

const [name, setName] = useState<string>(defaultName);
const onDeviceBound: WbBoundCallback<BluetoothDevice> = bound => {
    if (bound.binding) {
        setName(bound.target.name!);
    } else {
        setName(defaultName);
    }
}

4. Octa Echo Phoneサービス

デバイスからデータを読み取ったり、デバイスの状態を変更するためのハンドラや状態を定義しています。

const [octaEchoPhoneService, setOctaEchoPhoneService] = useState<OctaEchoPhoneService | undefined>();
const [cdsValue, setCdsValue] = useState<number | undefined>(undefined);
const [brightnessValue, setBrightnessValue] = useState<number>(0);
const [led0State, setLed0State] = useState<boolean>(false);
// ... 他の状態とハンドラが続きます

例えば、CDS（光センサ）の値を読み取るハンドラは以下のように定義されています。

const handleUpdateCDS = async () => {
    if (octaEchoPhoneService) {
        const value = await octaEchoPhoneService.readCDS();
        setCdsValue(value);
    } else {
        setCdsValue(undefined);
    }
};

5. キーパッドの状態

キーパッドの状態を管理し、変更があった場合に更新するためのハンドラを定義しています。

const [keypad, setKeypad] = useState<Keypad | undefined>(undefined);
const [keypadText, setKeypadText] = useState<string>(defaultKeyPadText);
const updateKeypad = (keypad: Keypad | undefined) => {
    if (keypad) {
        const binaryString = keypad.value.toString(2);
        setKeypadText(binaryString.padStart(16, '0'));
    } else {
        setKeypadText(defaultKeyPadText);
    }
    setKeypad(keypad);
};

このように、このコンポーネントはBluetoothデバイスとの接続と通信を管理し、ユーザーがデバイスの状態を読み取り、変更できるようにするためのインターフェースを提供します。

おわりに

Web Bluetoothで「NTTドコモF503i（小８付録バージョン）」に接続することができます。
Reactを使ったプログラミングを楽しんでください。