WebサイトからBLE（Bluetooth Low Energy）（※1）デバイスへ接続できるWeb Bluetooth APIがChrome 56のデスクトップ版・Android版で正式にリリースされました（※2）。Web Bluetooth APIを使うと、BLE経由でWebサイトとデバイス間でデータのやり取りが可能となるので、心拍計から心拍数を取得したり照明の明るさを調整したりと、WebサイトとBLEデバイスを連携させたコンテンツを制作できます。

今回は、JavaScriptでWeb Bluetooth APIを使って、WebサイトとBLEデバイスを連携する方法を解説します。本記事ではBLEデバイスとして、マイコンボード「Genuinoジェニュイーノ 101（Arduinoアルドゥイーノ 101）」を使います。Genuino 101を使うことで、自分で好きなセンサーをスマートフォンなどの端末から制御できるようになります。

※1 BLE（Bluetooth Low Energy）：消費電力の少ないBluetoothの規格です。大きなバッテリーが積めないデバイスや、バッテリーを充電する機会が少ないデバイスなどで使われています

※2 参考記事「New In Chrome 56 | Web | Google Developers」

▲Genuino 101に接続したLEDをデスクトップ版Chromeからコントロールしている様子。Android版Chromeからもコントール可能です

▲Genuino 101に接続した温湿度センサーから湿度と温度を取得し、Android版Chromeで表示している様子。動画内ではUSBケーブルで給電していますが、モバイルバッテリーや乾電池から給電することで自由に持ち運べます。

Web Bluetooth APIとは

今までスマートフォンなどの端末でBluetoothを扱うには、ネイティブアプリで実装する必要がありました。ですが、JavaScriptでWeb Bluetooth APIを使って実装することで、Web制作者でも手軽にWebサイトとBLEデバイスを連携したコンテンツの制作が可能になります。

Web Bluetooth APIのサポート状況（2017年5月時点）は下図のように、Chromeのデスクトップ版とAndroid版、Android標準ブラウザでサポートされています。まだサポートされている環境は少ないですが、WebサイトからBLEデバイスがコントロールできるのは魅力的ではないでしょうか。

▲灰色の行が現行版バージョンを、緑色になっているものが対応していることを示します。「Can I Use」より

Web Bluetooth APIを使うためには次のような制限があります。WebサイトでWeb Bluetooth APIを使う際は注意ください。

  • SSL環境で実行すること
  • ユーザーアクション（クリックやキーボード操作など）をトリガーにして実行すること

本記事で解説するGenuino 101の他にも市販のBLEデバイスやiPhoneをBLEデバイス化するアプリ「LightBlue Explorer」でも接続可能なので、興味のある方はWeb Bluetooth CGのGitHubページ「Web Bluetooth Demos」のデモを参照ください。

▲デモ「WebBluetoothCG/demos/Racing Cars」の様子。WebサイトからBLEでラジコンカーをコントロールしています

Genuino 101とは

Genuino 101とは、BLEモジュールと加速度センサー、ジャイロセンサーが搭載されたマイコンボードです（※）。国内ではスイッチサイエンスから4,980円で購入できます。

※商標の問題で名前は違いますがArduinoのモデルの1つです。なぜGenuinoが生まれたのか気になる方はスイッチサイエンスの記事「新ブランド「Genuino」が発表されました。」を参照ください

C言語がベースになっているArduino言語で処理をプログラミングします。C言語と聞くと難しく感じますが、Arduinoはデザイナーなどの普段プログラミングをしない方でも扱いやすいように設計されサンプルの数も豊富で、はじめての方でも扱いやすいものとなっています。本記事で紹介するデモも公開されているGenuino 101のサンプルをベースに実装しました。

次のページでは、JavaScriptでWeb Bluetooth APIをどうやって使うのかを中心に、スマートフォンからGenuino 101のLEDをコントロールする方法を解説します。Genuino 101以外のBLEデバイスでも使える内容になっていますのでぜひご覧ください。