Ionic/CapacitorでBluetooth(BLE)を利用するために

この記事は Ionic Advent Calendar 2018 - Qiitaの23日目の記事です

ここ2年ほど仕事でBluetoothを扱っているため、
Bluetoothとかなり仲良くなっているWebが大好きなエンジニアの@megadreams14です。

はじめに

昨年は、「IonicでBluetooth連携してみる」という記事を記載し、
今年はBluetooth以外でと思っていたんですが、ごめんなさい、
やっぱりBluetooth関連で書かせてください。

最近はIoT機器の普及やデータ通信の中継機としてBLE Gatewayのような製品が出ているなど、
みなさんもBluetoothと接する機会もかなり増えてきたと思うので、
これを機に是非開発にも興味を持って頂ければと。。。

Bluetoothについて

無線通信規格の1つで、2.4GHzの周波数帯の電波を使い、
数メートルから数十メートル程度の距離での無線通信を実現する通信規格です。

Bluetoothはバージョン4系で大きな仕様変更がされており、
ボタン電池1つでも数年の寿命があるほどの省電力さや
同時接続数が7つ(接続先を3bitで管理）までだったのが実質無制限になる(32bitで管理）などの変更が加えられた
「BLE（Bluetooth Low Energy）」という規格が整備されました。

上記のようなロゴがついた製品がBLE対応製品であり、
Ionicの公式で提供されている「Ionic Native - BLE」を利用すれば
簡単にBLE製品との接続やデータ連携を行うアプリを作ることが出来ます。

BLEの通信の仕組みは、簡単な例としては下記のようなイメージです。

• 参考
  • IonicでBluetooth連携〜Webの技術でBluetoothと向き合うために〜

最近のWebとBluetoothの関係性

これまで、Bluetoothを扱うのであればiOS/Androidまたはデスクトップアプリなど
よりネイティブな言語で記載することが求められていましたが
最近ではWeb Bluetooth API(現在仕様策定中)も整備されつつあるため、
アプリじゃなくてもWebブラウザでBluetoothとの接続が出来るようになってきています。

過去にWeb Bluetooth APIを試してみたことがあるので、興味ある方はぜひ！

• 参考
  • Web Bluetooth APIを使って体温計のデータをブラウザでBLE経由で受信してみた

なお、まだ仕様策定段階でもあるので、現在(2018/12/23)ではChromeとOperaのみで使用可能です。

※ 引用元 https://caniuse.com/#search=WebBluetooth

Capacitorについて

Capacitorは、1つのソースコードからPWA、iOSアプリ/Androidアプリ（ハイブリッドアプリ）、Electron（デスクトップアプリ）に変換するためのツールです。

まだBETA版(2018/12/23現在)ではありますが、
Cordovaの後継として、Ionic Teamが開発を進めております。

• 参考
  • Capacitor
  • 新しいHTML5 APPプラットフォーム「Capacitor」を試してみた
  • 新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！

なお、CapacitorはCordovaの後継でもあるため、
Cordovaで提供されているCordovaPluginもそのまま利用することが可能です。

• 参考
  • Using Cordova Plugins - capacitor

CapacitorとBluetooth

せっかくなのでCapacitorを使ってBluetoothを扱ってみたかったのですが、
残念ながら現在はCapacitor用のbluetooth/bleのプラグインはなく、
Cordovaで用意されているPluginを利用するしかまだ出来ない模様です。

Capacitor bluetooth / ble

もしくはCapacitorでPluginを開発することも出来るため、
下記を参考にしながらiOSのCore Bluetooth API,
AndroidのAndroid Bluetooth API を利用できるように構築すれば良さそうです。

• 参考
  • Capacitor Plugins
  • Capacitor iOS Plugin Guide
  • Capacitor Android Plugin Guide

そしてもう１点CordovaにもWebブラウザをサポートするbrowserがあるのですが、
Capacitorにも存在しているため、Web版(PWA)のPluginも開発しておけば、
Cordovaのように呼び出し元でプラットフォームを意識する必要はなさそうですね。

• 参考
  • Capacitor Web Plugin Guide

Capacitorについては、iOS/Android/Electron/Webの4つのプラットフォームへの展開がスムーズにできるので、BLEを扱う際には

プラットフォーム	BLE	備考
iOS	Core Bluetooth API	"Cordova Plugin" or "Capacitor Plugin"
Android	Android Bluetooth API	"Cordova Plugin" or "Capacitor Plugin"
Electron	Web Bluetooth API or Node.jsのBLE API
Web	Web Bluetooth API

と1ソースでそれぞれの領域で利用可能なBLE関連のライブラリをいい感じに扱うことが出来そうなので、
とても開発もスムーズになりそうですね。

最後に

弊社では、iOS/Android向けにはIonicでCordovaのBLE Pluginを利用して実装、
Windows向けのデスクトップアプリには、ElectronでNode.jsでBLE実装、
そしてWebブラウザ向けには、Web Bluetooth APIを検証したりしています。

ベースのアプリケーションはIonicを利用していますが、
Electronへの展開などは別のプログラムと組み合わせて行っていたりと若干手間もかかっているので、
そういう意味でもCapacitorは楽しみですね！

来年早々にでも、Capacitorで4つのプラットフォームに展開できる
BLEアプリケーションを実際に作ってみようと思います。

余談

Web Bluetooth APIが整備されてしまえば、
それぞれのプラットフォームに対してわざわざアプリ化する必要もなくなるので、
PWA 1つだけでいいんじゃねーかなーってのをすごく感じている...