Web Serial APIでマイクロビットを動かしてみよう

更新日：2026-01-18

パソコン側のChrome(クローム)等のブラウザにあるWeb Serial API(ウェブシリアルエーピーアイ)という機能を使ってマイクロビットを動かしてみます。

Web Serial APIを利用することで、USB接続を介してブラウザからマイクロビットに値を送信したり、マイクロビットからブラウザに値を送信したりすることが出来ます。

値を送信する時は、マイクロビットでUARTを使ってみるで見ましたUART(ユーアート)という仕組みを利用します。

今回の内容はChromebook(クロームブック)で動作を確認していまして、使用するOSによってはUSBに権限付与といった操作が必要になります。

---

マイクロビットでパソコン側のブラウザとやり取りするためのコードを作成します。

※ ずっとブロック内の3行目ではブラウザから受信したデータから最初の一文字だけ取り出す

最初だけブロックに挿入しましたシリアル通信 通信速度を115200に設定するブロックですが、こちらはbaudrate(ボーレート)になりまして、ブラウザと接続する時に重要になります。

※ボーレートに関してはマイクロビットでUARTを使ってみるに記載があります。

こちらの内容をマイクロビットにフラッシングしたまま、パソコンとマイクロビットをUSBケーブルで繋いだままにしておきます。

---

パソコン側のブラウザ(Chromeがお勧め)を起動し、

https://googlechromelabs.github.io/serial-terminal/を開きます。

上記のページはWeb Serial APIをお気軽に試すWebアプリになります。

Baud rateをMakeCode側で設定した値(115200)と合わせて、Connectボタンを押します。

micro:bitを選択して接続ボタンを押します。

黒い画面に

<CONNECTED>

が表示されたら準備が出来たことになります。

---

動作確認の為に、マイクロビットの方でボタンAを押してみます。

パソコン側で

<CONNECTED>
hello

が出力されることを確認しましょう。

helloの箇所にカーソルを合わせてクリックすると、マイクロビット側に値を送信する状態になります。

キーボードのw、a、sやdを押して、マイクロビット側の動作を確認してみましょう。

---

MicroPythonへの書き換え

from microbit import *

# UART(シリアル通信)の初期化
uart.init(baudrate=115200)

while True:
    # Google Chrome Labのserial-terminal確認用
    if button_a.is_pressed():
        uart.write("hello".encode())
        uart.write("\r\n".encode())
        sleep(200) #連打防止
		
    # Chromeからシリアル通信経由でデータを受信した
    if uart.any():
        # データを1バイト分だけ受信
        data = None
        while uart.any(): #連打防止
            data = uart.read(1)
        
        if data:
            # バイト型のデータを文字列にデコードする
            char = data.decode("UTF-8")
            
            # 左
            if char == "a":
                display.show(Image.ARROW_W)
            # 下
            elif char == "s":
                display.show(Image.ARROW_S)
            # 右
            elif char == "d":
                display.show(Image.ARROW_E)
            # 上
            elif char == "w":
                display.show(Image.ARROW_N)