GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

micro:bit

Web Bluetooth API を使ってブラウザだけでMicro:bitとBLE通信してみる。

投稿日:

microbit webBLE

概要

Reveal.jsをMicro:bit(chibi:bit)でコントロールする。」の記事では、micro:bit(chibi:bit)をフロントエンドと繋げるのに、バックエンドとしてnode.js(BLE & web socket)を使っていましたが、今回は、Web Bluetooth APIを使ってブラウザだけでmicro:bitと通信してみました。

※ いまのところWeb Bluetooth APIを利用できるのは、デスクトップのChrome/Operaと一部最新のAndroidのみです。

Web Bluetooth 対応表

事前準備

  • ペアリングのセキュリティを解除し、すべてのBLEサービスを有効にするために以下の作業を行う必要がある。参考:Flashing micro:bit firmware
    1. hexファイルをダウンロードする。
    2. USBケーブルを使用してマイクロビットをPCに接続。
    3. hexファイルをmicro:bitディスクドライブにコピーする。
    4. micro:bitを再起動する。
    5. LEDにドットが表示されるので、傾けて円を描く(キャリブレーション)
  • サービス/キャラクタリスティックのUUIDを調べておく。
    ここで確認できます。

参考にした記事

BLEについて今更調べてみた – Qiita
ブラウザからBluetoothが使える! JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] – ICS MEDIA

接続フロー

基本的には、デバイス → GATTサーバー → サービス -> キャラクタリスティックと辿っていくことで、利用したい機能に接続します。

  1. デバイスのスキャン(navigator.bluetooth.requestDevice)
  2. ペアリング
  3. GATTサーバーに接続(device.gatt.connect)
  4. サービスの取得(server.getPrimaryService)
  5. キャラクタリスティックの取得(service.getCharacteristic)
  6. キャラクタリスティックにvalueを書き込む(characteristic.writeValue)

上記の流れをコードにするとこうなります。

LED、テキスト表示サンプル

ブラウザ上からMicro:bitにテキストデータを送信し、LEDに表示するサンプルです。

example

ポイント

BLE(Bluetooth Low Energy)についてあまり詳しくなくても、結構すんなりとつながりました。
ただ、いくつかハマりどころがあったので掲載しておきます。

  • 当然ですがSSL必須
  • サービスを利用するには、requestDeviceのオプションでフィルタリングしておく必要がある。フィルタリングしていないとセキュリティエラーがでる。
  • writeValueメソッドでテキストを書き込む際、String型をArrayBuffer or ArrayBufferViewに変換する必要がある。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。