Web Bluetooth機能で温度を取得する

2018-10-152021-07-24

Web Bluetooth(ウェブ・ブルートゥース)機能を使って、離れた場所にあるmicro:bit(マイクロビット)の温度をブラウザーに表示する方法を紹介します。

7-1-1.Web Bluetooth機能とは

Web Bluetooth機能とは

Web Bluetooth(ウェブ・ブルートゥース)機能とは、この機能をサポートしているブラウザーを使って、WebページとBLE(Bluetooth Low Energy)デバイスの間で、双方向にデーターのやり取りができる機能です。BLE(ブルートゥース・ロー・エナジー)とは、無線でデーターの送受信を行うBluetoothの規格の一つで、省電力かつ省コストで通信することを目的としたものです。

ただし、現在すべてのブラウザーにおいて、Web Bluetooth機能がサポートされているわけではありません。各ブラウザーのサポート状況は、Web Bluetooth Community Groupの「Implementation Statusページ」でアナウンスされています。この記事では、次の組み合わせで、Web Bluetooth機能を確認しました。

OS：Windows10
ブラウザー：Google Chrome ベータ版 - バージョン70.0.3538.54以降
パソコン：BLEを含むBluetooth4.0が搭載されていること

Google Chromeのベータ版は「Chrome ベータ版」でダウンロードできます。

micro:bitとWeb Bluetooth機能

micro:bit(マイクロビット)にも、あらかじめBLEが搭載されているので、Web Bluetooth機能を使ってブラウザー(Webページ)と通信することができます。この記事では、JavaScriptのWeb Bluetooth APIを使って、micro:bitの温度センサーで取得した温度のデーターを、ブラウザ上に表示します。

7-1-2.micro:bitの準備

micro:bitの準備

micro:bit(マイクロビット)の準備として、Web Bluetooth機能で温度を取得するために必要な「Bluetooth温度計サービス」を有効にしたプログラムを、あらかじめ書き込んでおきます。以下は、その手順です。

「高度なブロック」をクリックします。

「拡張」をクリックします。

「bluetooth」をクリックします。

「bluetooth」が見つからない場合は、キーワード「bluetooth」を検索します。

無線機能と一緒に使えないため、無線機能を取り除いてから追加する旨のメッセージが表示されるので、「Remove extension(s) and add bluetooth」をクリックします。

「Bluetooth」が追加されたことを確認します。

右上の「歯車」アイコンをクリックします。

「プロジェクトの設定」をクリックする。

ペアリングの方法を「No pairing Requested: Anyone can connect via Bluetooth.」に変更します。

「Bluetooth温度計サービス」を有効にしたプログラムを作成します。プログラムの開始時にスマイル、Bluetooth接続時にチェック、Bluetooth切断時にバツが表示されます。

作成したプログラムに名前をつけてダウンロード後、micro:bitへ書き込みます。プログラムが正しく書き込まれると、スマイルが表示されます。

これで、micro:bitの準備ができました。次に、JavaScriptのWeb Bluetooth APIを使ったWebページを作成します。

7-1-3.Webページを作る

JavaScriptのWeb Bluetooth APIを使って、micro:bitの温度センサーで取得した温度のデーターを、ブラウザー上に表示するWebページを作成します。表7-1-3-1は、Web Bluetooth機能でmicro:bitから温度を取得するサンプルです。エディターなどを使って、文字コードUTF-8(BOM無し)で保存します。ファイル名は「BLETemperature.html」とします。