ブラウザの Web Bluetooth API を使って toio の BLE プロトコルバージョンを取得するための下調べ

## はじめに
「ブラウザの Web Bluetooth API を使って、toio の BLE プロトコルバージョンを取得する」ということをやろうとしたのですが、そのための下準備として調べた情報を、メモとして記事に書きます。

ちなみに記事執筆時点の最新のバージョンは、以下の公式のポストなどに書かれている「システムソフトウェア v02.0006」に対応した BLE プロトコルバージョンです。

https://twitter.com/toio_jp/status/1769619071216345591

●システムソフトウェアの最新バージョン02.0006が公開！新コンテンツ「トイオ・プレイグラウンド」に対応！ | toio blog | toio（トイオ）
https://toio.io/blog/detail/202403_toio_systemsoftware_v2.6_release.html

### 自分の手持ちの toio の話
なお自分が持っている toio を、アップデート用アプリを使って全て最新バージョンにした状況です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b9977a7e-2106-62a4-4dd8-d3c7b25da5a0.png)

そのため、今回の内容を用いて最終的に試した内容では、出力として上記最新バージョンに該当するバージョン情報を、Web Bluetooth API を使って取得できるはず、という想定です。

## おおまかな流れ
toio の BLE プロトコルバージョンを取得する流れを、以下に記載します。
この手順は、toio公式で公開されている技術情報の関連しそうな部分と、ブラウザの処理で必要になる API などの技術仕様の情報などを見て、それらを統合した内容として書き出してみたものです。

1. toio とブラウザを BLE で接続する（Web Bluetooth API を利用）
   - BLE で接続する際に必要な UUID のうち、「Characteristic UUID」については「技術仕様の 通信仕様 ＞ 各種機能 ＞ 🔄 設定」に書かれたものを利用
1. BLE接続後、「BLE プロトコルバージョンの要求」のための書き込み操作を行う
1. 上記の書き込み操作を行った後で、「BLE プロトコルバージョンの取得」のための読み出し操作を行う
1. 読み出し操作の結果は DataView で得られるため、その中から必要な部分のバイト列を抽出
1. 抽出したバイト列を、UTF-8文字列にデコード

## 上記の流れに書いた情報の参照先
上で「おおまかな流れ」として書いた書く項目の、各種関連情報を列挙していきます。

### toio との BLE説続
ブラウザの Web Bluetooth API を 使って toio との BLE接続を行う際の、 BLE プロトコルバージョンを取得する処理で必要な「Characteristic UUID」に関する情報を掲載します。
（ブラウザの Web Bluetooth API を 使った toio との BLE接続は、過去に記事をいくつか書いているため、そちらを検索してご参照ください）

●設定 | toio™コア キューブ 技術仕様
　https://toio.github.io/toio-spec/docs/ble_configuration/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1d576f81-a304-0f0a-665d-bedd8698ff5e.png)

### BLE接続後の書き込み・読み出し
toio との BLE接続後の流れで、「BLE プロトコルバージョンの取得」までの流れを補足します。

まず、「BLE プロトコルバージョンの取得」をするためには、その操作を要求する書き込み操作が必要となるようです（単純に「toio との接続後に、BLE プロトコルバージョン取得のための読み出しをする」、ということはできない仕様のようです）。

その要求処理に関連した情報が掲載された公式ページの URL などは、以下のとおりです。

●設定 | toio™コア キューブ 技術仕様 ＞ BLE プロトコルバージョンの要求
　https://toio.github.io/toio-spec/docs/ble_configuration#ble-%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%E8%A6%81%E6%B1%82

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7f9db41d-5238-017d-350b-b3f0bdc82345.png)

上記を使った対応を行った後、読み出しの操作を行います。
それに関連する公式ページの情報は、以下のとおりです。

●設定 | toio™コア キューブ 技術仕様 ＞ BLE プロトコルバージョンの取得
　https://toio.github.io/toio-spec/docs/ble_configuration#ble-%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%E5%8F%96%E5%BE%97

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3debbe01-7b73-1019-1145-7ecead5f0477.png)

最終的に得たい情報は、この中の「BLE プロトコルバージョン（5 bytes utf-8）」の部分の文字列です。

#### toio の BLE プロトコルバージョン
toio の BLE プロトコルバージョンについて、公式の仕様のページでは、記事執筆時点では最新のバージョンに関する記載はありません。

●アップデートについて | toio™コア キューブ 技術仕様
　https://toio.github.io/toio-spec/docs/how_to_update_cube/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/12ee57bb-e602-c108-f94e-3bc529ba8a38.png)

最新版にした toio では、システムソフトウェア「v02.0006」に対応した「BLE プロトコルバージョン」の「v2.4.0」が取得できる見込みです。

### BLE で読み出したデータの文字列へのデコード
BLE で読み出したデータは、ブラウザの Web Bluetooth API を使った場合、以下の DataView で得られます。

●DataView - JavaScript | MDN
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/DataView

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0ce3b71b-3a56-6d3e-6af5-3c41eb029612.png)

そして、DataView におけるバイト列を取り出すには、以下を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/db63282f-1c5e-6722-d464-240208321b85.png)

buffer の部分からバイト列を取得した後は、上の toio公式の情報として書かれていた「BLE プロトコルバージョン（5 bytes utf-8）」に該当するバイト列をさらに取り出した上で、それを UTF-8 の文字列にデコードします。

デコード処理では、以下を使います。

●TextDecoder - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/TextDecoder

●TextDecoder: decode() メソッド - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/TextDecoder/decode

ひとまず、この流れで「ブラウザの Web Bluetooth API を使った、toio の BLE プロトコルバージョンの取得」が行えそうです（今回の内容を記事にするにあたり、簡単な動作確認は行っています ← その動作確認で行った内容に、情報を付け加えたり、内容を整理したりということを行って、ソースコードを具体化した記事は別で出せればと）。