LoginSignup
29

More than 5 years have passed since last update.

Web Bluetoothを使ってみよう(社内勉強会用)

Last updated at Posted at 2018-10-15

はじめに

Moffの社内勉強会用に話した内容を一部抜粋して記事を書いています。
勉強会では、JavaScript、Python、C#(Unity)、Swiftなどに強いエンジニアがBLEを理解するための助けになればという位置づけでお話しました。

Web BluetoothはmacとMoffBandさえあればすぐにセンサーデータを受信するものを作って目に見れるので、アプリやサーバサイドのエンジニアにとって、Web Bluetoothは初学にはよいと思いました。

Bluetoothについて

最初に、Bluetooth規格のバージョンについて主な特徴を抜粋します。

  • 5.0
    • データ転送速度向上(最大2倍)、通信範囲拡大(最大4倍)
  • 4.2
    • 転送速度を向上(最大2.5倍)
    • 6LoWPAN対応
  • 4.1
    • IPv6対応
  • 4.0
    • 省電力化。
    • 正式には、Bluetooth Smart。いわゆるBLE(Bluetooth Low Energy)
  • 3.0以前
    • いわゆるクラシックBluetooth
    • BLEと3.0以前の規格の両方に対応したデバイスをBluetooth Smart Ready

なお、最初のMoffBandは2014年~2015年に開発され、4.1を使用しています。
内部の機能としては4.0でもですが、4.1規格で実装されたBLEモジュールは4.0に比べてハードウェア的にもソフトウェア的にも改善されているからです。

BLEについてもう少し詳しく

参考資料のリンクを載せておきます。昔いろいろ勉強させていただきました。

(参考)Bluetoothについて + iOS

(参考)BLE 接続やProfileについて + Android

サービスとキャラクタリスティクス

上記の参考資料に目を通した前提で、
BLEを使うモバイルアプリをつくるなら、とりあえず下記の階層の概念を抑えておけばよいと思います。

  • Profile
    • Serviceの集合
  • Service
    • Characteristicsの集合
  • Characteristics
    • Read
    • Write
    • Notification

GATT

デバイスのFirmwareを開発では、ソフトウェア的に上記の仕様にしたがって実装されます。

デバイス発見から接続までの状態遷移

デバイスにはCentralとPeripheralという役割があり、
例えば、iPhoneがCentral、MoffBandがPeripheralという役割になります。

MoffBandの電源ボタンを押してOnにすればAdvertising状態になり、iOSアプリでスキャンすればScanning状態になり接続が確率すると、Connection状態になります。

  • Central
    • Standby
    • Scanning
    • Initiator
    • Connection
  • Peripheral
    • Advertising
    • Connection

Web Bluetooth

さて、一通りBluetooth、BLEについてざっと理解したところで、Web Bluetoothについて紹介していきます。

対応ブラウザ

対応ブラウザは、Chrome。ということだけで使う側としてはいいかなと。

下記リンク先を見ると、前はmacでも実装されていない機能があって、Chrome OSかAndroidが先行していましたが、今はほとんど差がなくなっていますね。
Windowsもようやく。。

ブラウザの実装状況は、こちらで。

Web Blueooth 仕様

仕様やサンプルコードが下記リンク先にあります。

それでは、サンプルを動かしてみましょうということで、下記リンク先のNotification SampleをMacのChromeで開いて下さい。

(↑ここで、MoffBandのProfileを入力して実行しました。注意点は、文字列はlower-caseじゃないとだめだそうです。)

↓実行した結果の画像
image.png

センサーデータが取得てきているのがわかります。

自分で手元でサンプルを実行したい場合は、下記のようにWebサーバをローカル実行して、

$ python -m SimpleHTTPServer )

ブラウザでアクセス

しなくても、file://でもOKだとは思います。

実装のおおまかな流れ

社内勉強会では、実際にMoffBandにないでセンサーデータ取得して加工できるように、下記の大まかな実装内容についても紹介しましたが、本記事では割愛いたします。

  1. navigator.bluetooth.requestDevice()でBluetoothDeviceオブジェクトを取得
  2. BluetoothDevice#connectGATT()でBluetoothGATTRemoteServerオブジェクトを取得
  3. BluetoothGATTRemoteServer#getPrimaryService()でBluetoothGATTServiceオブジェクトを取得
  4. BluetoothGATTService#getCharacteristic()でBluetoothGATTCharacteristicオブジェクトを取得
  5. BluetoothGATTCharacteristic#writeValue()でデバイス制御

応用アイデア

っで、ブラウザでWebBluetoothができると何が嬉しいか?

例えば、

1 : プログラミング学習(*1)にデバイス連携させてみたり

(*1)
http://scratchx.org/

2 : HTML5ゲーム(*2)にデバイス連携させてみたり

(*2)
https://rgames.jp/

3 : スマホでライトセーバー(*3)をデバイスをライトセーバーにしたり

(*3)
https://www.chromeexperiments.com/experiment/lightsaber-escape

といったことが、できるようになるなと。


最後に

Web Blueoothはブラウザ側で動作するプログラムというのもあって、プロダクトには適用していませんが、何か試したいことをささっと作るときにはいいなと思います。(2回目、、、)

BLEでのデバイス開発に取り組んでから約5年(2018年現在)が経ち、今までにアプリにサーバサイドにと色々取り組んできて、いまやReact Native, AWS Lambdaとかでアプリ側は全部JavaScriptで記述してみたり、AWS Kinesisでサーバサイドでセンサーデータを処理させるといったことにも取り組んでたりします。

Moffでは、ヘルスケア関連のプロダクトやサービスを開発するエンジニアを募集しています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29