ブラウザ(JavaScript)でマイクロビットとBLE!

IoT

こんにちは、ECF Techブログ
担当 Michiです。

今回はマイクロビットとブラウザ(JavaScript)を使ったBLE接続を行なってみたいと思います。

はじめに

Web Bluetooth API

Web Bluetooth APIというものを使います。かなり以前からあったようなのですが、しばらくWindows上のブラウザでは対応していなかった時期がありました。Windows上のChromeブラウザでも動作するようになったそうなので、今回はその実験プログラムです。

Web Bluetooth APIの対応状況などについては下のリンクをご覧ください。
Web Bluetooth対応状況
Web Bluetooth APIの仕様については下になります。
Web Bluetooth APIの仕様

記事の概要と想定読者

本記事ではとりあえず接続ができた。というサンプルプログラムの提供に留めます。BLE(Bluetooth Low Energy)の基本的な内容については、こちらをご覧ください。

サンプル内のコードにコメントを記載する形で説明をさせて頂いています。JavaScriptの基本的なコードが読める方が対象になっております。ご了承ください。

プログラムの内容

  • スタートボタンでマイクロビットとブラウザを接続し、ボタン状況の通知を開始します。
  • マイクロビットでAやBのボタンが押された際にその状況を検知し、ブラウザに上のように表示します。
  • ストップボタンで通知を終了します。

サンプルコード

プログラム概要説明

マイクロビットのBLE仕様については下で確認できます。
マイクロビット BLEのプロファイル

マイクロビットのボタンサービスでは、2つのキャラクタリスティクス(やり取り可能な情報)を取得できます。それぞれAボタンが押された状況Bボタンが押された状況の2つです。

この2つの値の通知をリスナー関数で受け取るように設定し、その値を判断してブラウザ表示を動的に変更しています。

動作方法

マイクロビットのプログラムの準備

マイクロビットのプログラムは下のようになります。

Bluetoothのブロックは次の手順で使う事ができます。
1.「高度なブロック」から「拡張機能」を使う

  1. Bluetoothを選択

  2. ピンクのボタンをクリック

また、プログラムをマイクロビットに保存する場合は右の歯車から「プロジェクトの設定」を選んで、下の図のように変更しておいてください。どの端末からでもマイクロビットに接続できる設定です。

動かしてみよう

本プログラムをブラウザで開き、「スタート」ボタンを押します。

下の画面が出るのでペア設定を押します。すると「接続済み」になると思います。

コンソールログがしばらく出ます。「Getting Characteristics」が出たところで準備OKです。

AボタンやBボタンを押します。

おわりに

本日はここまでとさせていただきます。最後までご覧いただきありがとうございました。

マイクロビットがブラウザと接続されたことで、また新しい楽しみ方が広がりそうです。VRとまではいきませんが、リアルと画面をつなげるゲームなんか作っていけたら面白いなと思っています。

今後も違うサービスを使ったサンプルを作っていければと思っていますので、ぜひまたご覧ください。


合同会社イー・シー・エフでは、子ども向けプログラミングなどの教育講座を実施しています。プログラミング教室の案内や教育教材の情報は、下記よりご確認ください。

https://edu.e3factory.com/
タイトルとURLをコピーしました