【toio】toio.jsでサンプルプログラムを動かすまでの手順について

## はじめに
「Node.jsって何？」というレベルのプログラミング初心者がtoioのJavaScriptライブラリで開発を始めるまでに、時間がかかったので、手順を備忘録としてまとめておきます。参考にして頂ければ幸いです。



## 動作環境
Windows11
Node.js：v20.11.0
npm：10.2.4
yarn：1.22.21



## 必要なもの
- Bluetooth USBアダプタ
Windowsで環境構築する場合、toio.jsが使用している「noble」ライブラリの関係で、内蔵Bluetoothではなく、**別途Bluetooth4.0 USBアダプタが必要**になります。
今回は、エレコムのアダプタを使用しましたが、問題なく動作しました。
[Bluetooth(R) USBアダプター　LBT-UAN05C2](https://www.elecom.co.jp/products/LBT-UAN05C2.html)

詳細は[nobleの前提条件](https://github.com/noble/noble?tab=readme-ov-file#windows)に書かれています。

ただし、後ほどドライバーを書き換える作業をすると、**Bluetooth USBアダプタとして使用できなくなる**ので、注意してください



## 手順１　Node.jsをインストール
1.  [Node.jsの公式](https://nodejs.org/en)から推奨のLTS版をダウンロード
[toioのGitHub](https://github.com/toio/toio.js#computer-getting-started)によると、10以上のバージョンであれば動作するようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/d5cf5655-b6de-837a-371f-e320b947c12d.png)
1. ダウンロードできたら、インストーラーを起動
「node-v20.11.0-x64.msi」というようなファイル名でダウンロードできているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/7b4181f4-fd08-3b9a-16cc-da3b26336b49.png)
1. 基本的にデフォルトのままで大丈夫ですが、この画面では、**チェックを入れてインストール**してください
チェックを入れることで、環境構築に必要なツール諸々が自動でインストールされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/f256d8d2-9051-dd3e-1920-70307405175f.png)
1.「Finish」を押して完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/e59ba6e4-667a-3dc4-221d-17a09ea5dd08.png)

1. 正常に動くか確認する
インストールできたら、コマンドプロンプトを起動して正常に動いていることを確認します。

Windowsの検索窓から「cmd」と入力して、コマンドプロンプトを起動

以下のコマンドを実行して、
```node.jsバージョン確認
node --version
```
ダウンロードしたバージョンが表示されれば、正常にインストールできています。
```node.jsバージョン確認結果
v20.11.0
```
パッケージ管理システムのnpmについても確認します。
```npmバージョン確認.
npm --version
```

```npmバージョン確認結果.
10.2.4
```

・参考サイト

https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b



## 手順２　yarnをインストール
npmと同じパッケージ管理システムであるyarnがtoio.jsでは使われているため、インストールします。

```npmでyarnをインストール.
npm install -g yarn
```
1. 正常に動くか確認する
```yarnバージョン確認.
yarn -v
```
```yarnバージョン確認結果.
1.22.21
```

・参考サイト

https://qiita.com/uttiy3/items/1b89446e03991c7c2c3d


## 手順３　Zadigをインストール
Zadigを使用してアダプターのドライバーを書き換えます。

Zadingの使い方は以下のYouTubeを参考にしました。
https://youtu.be/mL9B8wuEdms?si=rfwEdVUxDTn7RDeQ&t=105

1. [Zadingのページ](https://zadig.akeo.ie/)から「Download」項目の「Zading 2.8(versionによって異なる)」をクリックしてインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/a97e7cff-02d2-f552-dc24-cd590c5a92af.png)

1. 「zadig-2.8.exe」を起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/a8c93d7a-7904-5b20-fae6-ce09add6fc5b.png)

1. 「Options」の「List All Devices」にチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/d3d0700a-d47b-15bd-6e8f-e8765927e298.png)

1. USBアダプタを接続し、リストから選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/7fcf78ee-8bc4-8378-a18e-3e88861bcd3f.png)

1. WinUSB(v6.1.7600.16385)を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/e4f6fd2d-ede6-ca6e-d1fe-b4a7f39161df.png)

1. 「Reinstall Driver」を実行
※**注意**
これを実行すると**Bluetooth USBアダプタとして機能しなくなります**
[node-bluetooth-hci-socketのGitHub](https://github.com/noble/node-bluetooth-hci-socket?tab=readme-ov-file#windows)にロールバックすると戻ると書いてありますが、戻りませんでした。
1. 「The driver was installed successfuly」が表示されたら完了です



## 手順４　Gitをインストール
toio.jsのGitHubからファイル一式をダウンロードするために、Git Bashをインストールします。
1. gitのページからダウンロード
https://gitforwindows.org/
1. インストーラーを起動
「Git-2.43.0-64-bit.exe」がダウンロードされたら、デフォルト設定のままインストールします。
1. 正常に動くか確認する
インストールが終わったら、コマンドプロンプトで正常にインストールできているか確認します。
```Gitバージョン確認.
git -v
```

```Gitバージョン確認結果.
git version 2.43.0.windows.1
```

・参考サイト

https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c

## 手順５　toio.jsをローカル環境に複製する
1. [toio.jsのGitHub](https://github.com/toio/toio.js)に移動して、URLをコピー
![スクリーンショット 2024-03-15 120940.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1198056/dfa120a8-50aa-16a5-b5a4-47718f36110b.png)
1. コマンドプロンプトを開いて作業環境のディレクトリに移動
今回は```C:\Users\ユーザー名```に複製する
1. 以下のコマンドを実行
完了すると「toio.js」というフォルダができているはずです。
```リポジトリをクローン.
git clone https://github.com/toio/toio.js.git
```

## 手順６　yarnのインストールとビルド
cdコマンドでtoio.jsディレクトリに移動し、以下のコマンドを実行
package.jsonが設置されます
```
yarn install 
```

```
yarn build
```

## 手順７　nobleをインストール
toio.jsを展開したディレクトリで、以下のコマンドを実行し、nobleをインストールします。
```nobleのインストール.
npm install noble
```
※実行後、バージョン違いによるエラーが起きる場合は、以下のように、
```--legacy-peer-deps```を追加することで、強制的にインストールできます。
```
npm install --legacy-peer-deps noble
```
ここまでの手順が正常に終われば、環境構築は完了です。

## 手順８　サンプルプログラムを実行
サンプルプログラムは「examples」の中に３つ用意されています。
実行方法はGitHubに書かれています。
https://github.com/toio/toio.js#video_game-example

今回は、```keyboard-control```を試します。
toio.jsに移動し、以下のコマンドを実行します。
toio Cubeの電源が入っていることを確認してください。
```keyboard-control実行.
yarn example:keyboard-control
```
Bluetoothが自動で接続され、キーボードの矢印キーでtoioを動かすことができます。


## 参考サイト

https://qiita.com/KatsuShun89/items/5f86a9811565267f6b30


https://qiita.com/Q1J011/items/37c08a5bfaa9f4a68438