概要

ADBLE01Pを制御するWebアプリのサンプルを紹介しています。

ADBLE01Pを使用して、便利なアプリケーションを作りたい方はもちろん、BLEデバイス(カスタムプロファイル)と接続して、データを取得したり、設定を変更したりする方法の実験や勉強にも役立ちます。

Web Bluetooth APIを使用したWebアプリの利点

通常、ADBLE01PをiPhoneやiPadで使用するためにはiOS用のアプリを、Androidで使用する場合にはAndroid用のアプリを、Windowsで使用するためにはWindows用のアプリを、Macで使用するためにはMacOS用のアプリを作成する必要があります。Web Bluetooth APIを使用するとChromeやEdgeといった制約はありますがブラウザで動作するため、プラットフォームが異なっていても同一のコードで動作させることができます。ブラウザのバージョンによっては動作しない場合があります。実際、デバッグ中はWindows11のChromeでは動作せず、AndroidのChromeで動作確認をしていましたが、アップデートが入った後はWindows11のChromeでも動作するようになりました。

構成

図に示すような構成で動作します。

ADBLE01PをWeb Bluetooth APIで使用するシステム構成図

Web Bluetooth APIに対応しているブラウザからWebサーバにおいてあるhtmlファイルへアクセスします。このため、ネイティブアプリと違い、インターネットに接続できる環境下にある必要があります。今回は、その例を示していませんが、Webアプリを経由してデータベースサーバに測定値を送ってストアすることも可能です。

サンプルWebアプリ

電源電圧測定、LEDインジケータ設定アプリ

電源電圧測定・LEDインジケータ設定アプリへのリンクです。以下のQRコードを読み込んでも実行できます。

ADBLE01Pの電圧測定・LEDインジケータ制御アプリへのリンクQRコード

実際のWindows11での動作画面は以下です。ADBLE01Pに接続してバッテリの電圧を取得したり、LED点滅の設定を変更したりします。

ADBLE01Pのバッテリー電圧測定・LEDインジケータ設定変更のWebAPIアプリ

静電センサデータ表示アプリ

静電センサデータ表示アプリへのリンクです。以下のQRコードを読み込んでも実行できます。

ADBLE01Pのセンサ測定アプリへのリンクのQRコード

実際のWindows11での動作画面は以下です。ADBLE01Pに接続して取得した静電センサの値をリアルタイムにチャートに表示します。

ABLE01Pの静電センサの測定値をチャート表示するWebAPIアプリ

静電スイッチアプリ

準備中です。

LED発光制御アプリ

準備中です。

サンプルアプリの主な動作を説明

ブラウザの「ページのソースを表示」またはCtrl+Uで、ソースファイルを確認できます。動作を理解するのに重要な箇所を以下で説明しています。

電源電圧測定、LEDインジケータ設定アプリ説明

準備中です。

静電センサデータ表示アプリ

準備中です。

静電スイッチアプリ

準備中です。

LED発光制御アプリ

準備中です。