toioのjavascriptライブラリが公開されたのでexample動かしてみた

# はじめに
toioの[技術仕様とJavaScriptライブラリ](https://toio.io/programming/index.html#y-three)が公開されました。
個人的にはずっとtoio制御出来ないかなーと考えていたので、キタコレって感じで喜んでおります。
今回は手順に則ってPCから動かしてみましたので簡単に記事を書きました。(node.js素人ですのでその点はご了承ください。）

<img width="400" alt="64278068_468142383991832_228479577108774912_n.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/0eed3af5-9a7a-0caa-534b-0d913b7638ba.jpeg">

# toioとは
SONYが出しているCube型のおもちゃです。
https://toio.io/

詳しくは上のリンクを見てもらいたいですが、カートリッジ式のソフトを交換して様々なゲームが遊べます。
リング状のコントローラーでCubeを操作して戦ったりできます（クラフトファイター）。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SIEの体感トイ・プラットフォーム「toio」3種類の専用ソフトが3月20日発売。未知の生命体を動かしたり、プログラミングの基礎を学ぶ冒険絵本などが登場 <a href="https://t.co/1AYJ01OuOg">https://t.co/1AYJ01OuOg</a> <a href="https://t.co/sRcahwozuj">pic.twitter.com/sRcahwozuj</a></p>&mdash; 電ファミニコゲーマー (@denfaminicogame) <a href="https://twitter.com/denfaminicogame/status/1085830048878215168?ref_src=twsrc%5Etfw">2019年1月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

いくつかゲームソフトがありますが、個人的には**GoGo ロボットプログラミング　~ロジーボのひみつ~**が特にお気に入りです。

https://toio.io/titles/gogorobot.html

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> 今日はもう遅いのでここまで <a href="https://t.co/FKRw3xaeQv">pic.twitter.com/FKRw3xaeQv</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1108703366215946240?ref_src=twsrc%5Etfw">2019年3月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

命令カードを読み込ませて、それでゴールを目指しますゲームですが、Scratchよりも簡単にプログラミングの基礎を身につけられるので小学校低学年にオススメです。（あとロジーボかわいい！）

# 公開された技術仕様
そんなおもちゃなtoioですが、その[技術仕様](https://toio.io/programming/index.html#y-three)が公開されました。

具体的に公開された情報は
- [Cubeのハードウェア仕様](https://toio.github.io/toio-spec/docs/hardware_components.html)
- [BLEの通信仕様](https://toio.github.io/toio-spec/docs/ble_communication_overview.html)
- [node.jsを用いたJavaScriptライブラリ](https://github.com/toio/toio.js)
の3つです。
これだけの情報があれば大人でもこれを使って遊べますね。
個人的にはM5Stackの足回りにしたりしても面白いかなと思ってます。
ゲームとかも自分で作れそうです。

### ハードウェア仕様
[Cubeの形状](https://toio.github.io/toio-spec/docs/hardware_shape)も公開されたので、これをベースに3D Printerで上モノ作ってもいいですね。ただ[走行性能](https://toio.github.io/toio-spec/docs/hardware_other)をみると、積載重量：200gとあるので、そこはご注意。

### BLE通信仕様
[通信概要](https://toio.github.io/toio-spec/docs/ble_communication_overview.html)をみると、BLE ペリフェラル（Peripheral）として起動することや、ServiceやCharacteristicsなどのBLE通信仕様が記載されています。

Caracteristicsをみると以下の機能を持つようです。
- ID Information / 読み取りセンサー
- Sensor Information / モーションセンサー
- Button Information / ボタン
- Battery Information / バッテリー
- Motor Control / モーター
- Light Control / ランプ
- Sound Control / サウンド
- Configuration / 設定

特に興味深いのは、[読み取りセンサー](https://toio.github.io/toio-spec/docs/ble_id)です。
toioは底面のセンサーで付属しているマットやカードのユニークなIDとその方向が読み取れます。
これによっていろいろなゲームを実現しています。実際に遊んでいるとCubeをマットに置くだけで勝手にゲーム開始位置に戻ったりするので面白いと思っていましたが、そういう仕組だったんですね。

https://toio.github.io/toio-spec/docs/ble_id
ここに細かく仕様について書かれていました。

# JavaScriptライブラリ
BLE通信仕様があるので、これに則って通信してもいいですが、とりあえずjsのサンプルを動かしてみようと思います。

https://github.com/toio/toio.js#computer-prerequisites
に環境構築方法が書いてあります。今回はWindowsの環境にしています。
Prerequisitesに記載されている通り、node.jsの[noble](https://github.com/noble/noble)というライブラリを使用して動いているようなので、nobleで必要なものをインストールしていきます。

https://github.com/noble/noble#windows

あとtoioのサイトにもリンクありましたが必要なものをインストールしている動画があるのでこれを見るのが手っ取り早いです。
[Bluetooth LE with Node.js and Noble on Windows](https://www.youtube.com/watch?v=mL9B8wuEdms&feature=youtu.be&t=1m46s)

一つちょっと引っかかったのは、nobleが更に
[node-bluetooth-hci-socket](https://github.com/noble/node-bluetooth-hci-socket)というライブラリを使っているのですが、これの[Compatible Bluetooth 4.0 USB Adapter's](https://github.com/noble/node-bluetooth-hci-socket#compatible-bluetooth-40-usb-adapters)に記載されているのが、nobleで動作確認済みのBLEドングル(モジュール)のようです。

最初Windows PCの内蔵BLEで試してみましたが、接続できませんでした。
ですので、このリストにある'BCM920702 Bluetooth 4.0'を購入したところ無事接続できました。
具体的には、BCM920702 でネットで検索するとこちらの商品が出てきたのでそちらを購入しています。
[サンワサプライ MM-BTUD40](https://www.sanwa.co.jp/product/syohin.asp?code=MM-BTUD40)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302503/6cda16b1-f079-dacc-d901-6dadde03fa4b.png)
おそらくリストに記載されている他の型番のものでも動くかとは思います。

あとは動画の通りに、node.jsやZadig toolなどをインストールしていき、完了です。

もう一つ、私のPCではAnaconda使っているので、python 2.7はcondaで環境用意しました。(参考にした記事はこちら [Anaconda で Python 環境をインストールする](https://qiita.com/t2y/items/2a3eb58103e85d8064b6))

```
# python 2.7の環境構築
$ conda create -n py27 python=2.7 anaconda

# py27への切り替え
$ activate py27
```


# toio.jsのexample実行
あとは、toio.jsをcloneして実行するだけです。
実行するコマンドはこちらに記載されています。
https://github.com/toio/toio.js#how-to-play-sample-application

例えば`yarn example:keyboard-control`を実行すると、PCの矢印キーの操作でCubeが動きます。
cubeの電源だけ入れておけば、example実行すると自動的に接続します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">example動いたー！ヤッター！😃<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/w70CcSKisi">pic.twitter.com/w70CcSKisi</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1139907907896504320?ref_src=twsrc%5Etfw">2019年6月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上の動画ではexampleのパラメータを微調整しています。

```keyboard-control/index.js
const DURATION = 150 // ms
const SPEED = {
  forward: [30, 30],
  backward: [-30, -30],
  left: [-30, 30],
  right: [30, -30],
}
```

SPEEDの各パラメータは左右モーターの回転速度です。
例えばleftはその場回転するように左右に同じ絶対値を入れて`[-30,30]`などとしています。
`DURATION`はキーを押した後に動く時間です。これも元の値より少し短くしてみました。

他のサンプルの`id-reader`は読み取りセンサーで認識したID値とangleが表示されます。angleもかなりの精度で出ていることが確認できました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">id-readerも動かしてみた。ユニークなidとangle取れてる。<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/z5tE7NAXvq">pic.twitter.com/z5tE7NAXvq</a></p>&mdash; Katsu Shun (@katsushun89) <a href="https://twitter.com/katsushun89/status/1139911392482324480?ref_src=twsrc%5Etfw">2019年6月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# おわりに
toioの技術仕様,JavaScriptライブラリが公開されたので、動かしてみました。
これでnode.js使っていろいろ出来そうですね。