本記事で解説するデモについて

本記事で紹介するデモのソースコードはGitHubに公開してます。ソースコードをダウンロードした上で記事を読み進めてください。

また、本記事ではJavaScriptでWeb Blutooth APIを扱う方法を中心に解説するため、Genuino 101(Arduino)のプログラミングについての解説は割愛します。詳しく知りたい方は、ソースコードにコメントとして処理内容を記載してますので参照ください。

Genuino 101をプログラミングするArduino IDEの設定方法については、クラスメソッドの記事「Genuino 101を弄ってみた」が参考になるでしょう。記事内で使用しているArduino IDEのバージョンが1.6.9となっていますが、本記事執筆時点での最新バージョン1.8.2でも同じ方法で設定できますので安心してください。

スマートフォンからBLE経由でLEDをコントロールする

スマートフォンからBLE経由でGenuino 101に接続しているLEDをコントロールする方法を解説します。スマートフォンからLチカさせるというシンプルなデモですが、JavaScriptでWeb Bluetooth APIを使ってBLEデバイスに接続する流れが一通り体験できます

▲macOS版Chromeからコントロールしている様子

▲Android版Chromeからコントロールしている様子

作成した電子回路

Genuino 101にLEDを接続したシンプルな電子回路です。

Genuino 101へBLE経由でアクセスする処理(JavaScript)

JavaScriptでWeb Bluetooth APIを使って、BLE経由でGenuino 101へ接続し接続する処理を解説します。

Web Bluetooth APIとBLEの通信はGATT(Generic Attribute)という仕組みで行っています。GATTを全て理解するにはBLEについての知識が必要になるため、ここではWeb Bluetooth APIで通信するために必要になるサービスとキャラクタリスティックを覚えておけば問題ないでしょう。

サービスとは、BLEデバイスに備わっている機能のことです。例えば、BLEで通信できる心拍計にはバッテリーの情報を扱うサービスや心拍を計測するサービスなどがあります。

キャラクタリスティックとは、サービスが扱う情報やデータのことです。例えば、BLEで通信できる心拍をサービスの心拍数がこれにあたります。サービスとキャラクタリスティックはそれぞれ固有のID(UUID)が設定されており、そのUUIDをWeb Bluetooth APIから指定することで、BLEデバイスとのデータのやり取りが可能になります。

次のコードでは、Genuino 101に書き込んだプログラム内で記述したサービスとキャラクタリスティックのUUIDを指定しています。

/**
 * サービスのUUIDです。
 * @type {string}
 */
const SERVICE_UUID = "19b10000-e8f2-537e-4f6c-d104768a1214";

/**
 * キャラクタリスティックのUUIDです。
 * @type {string}
 */
const CHARACTERISTIC_UUID = "19b10001-e8f2-537e-4f6c-d104768a1214";

navigator.bluetoothrequestDeviceメソッドで接続可能なBLEデバイスをスキャンします。requestDeviceメソッドの第一引数のでスキャンするBLEデバイスのフィルタリングが設定でき、接続したいBLEデバイスが搭載しているサービスのUUIDを指定します。

navigator.bluetooth.requestDevice({
  filters: [
    {
      services: [
        SERVICE_UUID
      ]
    }
  ]
})

BLEデバイスのスキャンに成功すると次の処理に移り、BLEデバイスへ接続します。

// 選択したデバイスに接続
.then(device => device.gatt.connect())

BLEデバイスへの接続に成功すると次の処理に移り、指定したUUIDに合致するサービスを取得します。

// UUIDに合致するサービスを取得
.then(server => server.getPrimaryService(SERVICE_UUID))

サービスの取得に成功すると次の処理に移り、指定したUUIDに合致するキャラクタリスティックを取得します。

// UUIDに合致するキャラクタリスティックを取得
.then(service => service.getCharacteristic(CHARACTERISTIC_UUID))

キャラクタリスティックの取得に成功すると次の処理に移り、BLEデバイスとの接続が完了します。ここからGenuino 101とデータの遣り取りをする処理を実装していきます。

.then(characteristic => {
  console.log("BLE接続が完了しました。");

  // BLEデバイス接続後の処理
})

接続したGenuino 101からデータを取得する処理(JavaScript)

Genuino 101のLEDが現在点灯しているのかどうかのデータを取得する処理を解説します。

BLEデバイスからデータを取得するには、BLE接続時に取得したキャラクタリスティックのreadValueメソッドを使います。readValueメソッドの実行に成功するとデータが取得でき(ここではvalue)、データからgetUint8メソッドで値を抽出します。

// キャラクタリスティックから値を読み込む
ledCharacteristic.readValue()
  .then((value) => {
    // 0番目のデータを取得
    let state = value.getUint8(0);

    if (state === 0) {
      // LEDが消灯状態
      offLED();
    }
    else {
      // LEDが点灯状態
      onLED();
    }
  });

接続したGenuino 101へデータを送信する処理(JavaScript)

JavaScript側からGenuino 101に接続されているLEDの明るさをコントロールするために、データを送信する処理を解説します。

BLEデバイスへデータを送信(書き込み)するにはキャラクタリスティックのwriteValueメソッドを使います。次のコードではGenuino 101へ1をデータとして送信しています。このデータをもとに、Genuino 101側でLEDを点灯する処理を実装することで、WebサイトからLEDがコントロールできるようになります。

// キャラクタリスティックの値を更新
// 1を送信してLEDを点灯
ledCharacteristic.writeValue(new Uint8Array([1]));

以上でJavaScriptでWeb Bluetooth APIを使ってGenuino 101へ接続し、データのやり取りをする流れを解説しました。これを応用すると、Webサイトから自作したリモコン装置を操作してエアコンをコントロールしたり、照明の明るさをコントロールすることも可能です。

次のページでは、温湿度センサーから湿度と温度を取得してスマートフォンで表示する方法を解説します。