IOTについて(2) JavascriptでのBLEの活用(bluejely)

2021.02.21

機械学習技術 人工知能技術 自然言語処理技術 セマンティックウェブ技術 オントロジー技術 検索技術 データベース技術 アルゴリズム デジタルトランスフォーメーション技術 Visualization & UX ワークフロー&サービス ITインフラ技術 確率的生成モデル 時系列データ解析技術 ストリームデータ制御技術 IOT&センサー技術 コンピュータのハードウェア 本ブログのナビ
IOTについて(2) JavascriptでのBLEの活用(bluejely)

前回に続き、今回は実際のBLEの通信について述べてみたい。まずは最もシンプルなものとして、bluejellyというjavascriptのライブラリを利用してBLEと通信してみる。

bluejellyはWeb Bluetooth APIというlavascriptのライブラリのラッパーで、htmlファイルとbluejelly.jsとstyle.cssの3つのファイルだけで動作し、htmlファイルを書くことで様々なBLEとの接続が可能になるものとなる。例えばサンプルの中で最もシンプルな外部のBLEデバイスをscanするコードは以下のようになる。(bluejelly.jsのサンプルコードの抜粋)

<!doctype html>
<!--Copyright 2017-2020 JellyWare Inc. All Rights Reserved.-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="BlueJelly">
    <meta name="viewport" content="width=640, maximum-scale=1.0, user-scalable=yes">
    <title>BlueJelly</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="bluejelly.js"></script>   
<h1></h1>
<div class="container">
    <div class="title margin">
        <p id="title">BlueJelly Sample</p>
        <p id="subtitle">Hello, BLE</p>
    </div>
    <div class="contents margin">
        <button id="scan" class="button">Scan</button>
        <hr>
        <div id="device_name"> </div>
    </div>
</div>
<script>
//--------------------------------------------------
//Global変数
//--------------------------------------------------
//BlueJellyのインスタンス生成
const ble = new BlueJelly();
//--------------------------------------------------
//ロード時の処理
//--------------------------------------------------
window.onload = function () {
  //UUIDの設定
  ble.setUUID("UUID1",   "00000000-0000-0000-0000-000000000000", "00000000-0000-0000-0000-000000000000");
}
//--------------------------------------------------
//Scan後の処理
//--------------------------------------------------
ble.onScan = function (deviceName) {
  document.getElementById('device_name').innerHTML = deviceName;
}

//-------------------------------------------------
//ボタンが押された時のイベント登録
//--------------------------------------------------
document.getElementById('scan').addEventListener('click', function() {
      ble.scan('UUID1');
});
</script>
</body>
</html>

このhtmlをブラウザで開けば動作する。ブラウザに「scan」のボタンが現れ、それを押すと周囲にあるBluetoothデバイスを検知して表示する。ただしブラウザのバージョンより動作するものとしないものがあり、macのSAFARI最新版で動作せず、chromeでは動作を確認した。このコードの中でBLEとのやり取りの部分はble.scanの関数くらいで、残りはほぼ表示に関するものとなる非常にシンプルなものとなる。

もう少しフレキシビリティのあるライブラリとしてはnode上で動作するnobleがある。次回はそれらを紹介したい。

モバイルバージョンを終了
タイトルとURLをコピーしました