toioとUnityを連携しようとした話：Ver.macOS Catalina(10.15.4)

2020年5月15日 18:18

こんにちは！プロノハーツの宮坂です！普段はUnityを使って製造業向けのVRアプリを開発しています。

今回は『「toio」ではじめよう、おうちでロボット開発キャンペーン』に参加させていただきました。

「開発者向けマット（仮称）」を使用して、Unityとtoioを連携させ、おにごっこを作りました。その過程をお話します！
と、かっこよく発表したかったのですが、Unityの設定！toio.jsのExampleの実行！まではできたのですが、おにごっこの完成はまだ先です。
今後の投稿をお楽しみに・・・。

今回の開発で一番手間取ったところはなんと、「toio.jsのExampleの実行」です。
公式のページにやり方が書いてある「「toio.jsのExampleの実行」」を、なぜ手間取ったのか、その過程と問題解決についてまとめます。

１，toioとは

まず、『「toio」は子どもたちの創意工夫を引き出す全く新しいロボットトイです。』（公式HPより）

toioは公式から技術仕様が公開されていて、自由に開発することができます。
せっかくなので、普段使用しているUnityと連携させてプロジェクトを作成してみようと思いました。

２，実装環境

macOS Catalina Ver.10.15.4
homebrew: 2.2.16
nodebrew: 14.2.0
npm: 6.14.5
ruby: 2.6.3
xcode: 11.4.1

３，手順

１-Unityの設定
１−１，UniRxのインストール
１−２，C# websocketライブラリの設定

２−toio.jsの設定
２−１，Homebrewのインストール
２−２，Nodebrewのインストール
２−３，Node.jsのインストール
２−４，toio.jsのインストール

３−Unityとtoioの連携
３−１，Unityのシーン作成
３−２，toio.jsに新しいプロジェクトを作成

手順1と3はこちらを参考に、手順2はこちらを参考に設定しました。

４，実装

参考にしたのは以下のサイトです。

とはいえ、スムーズに行かないのも世の理ですね。
一発ではスムーズにサンプルを動かすことができませんでした。

公式のライブラリに記載されている使い方は以下の通りです。

git clone https://github.com/toio/toio.js.git   # clone repository
cd toio.js                                      # move to repository root
yarn install                                    # install dependencies
yarn build                                      # build @toio/* packages
yarn example:<name of example>                  # start sample application (see below)

問題となったのは「yarn install」と「yarn build」

「yarn install」を行ったときは1回目はエラーがかなり多く出ていました。
再度行った際にはエラーが発生せず、首をかしげるも

success Saved lockfile.

と出ていたため、問題ないかしら、と放置。

そして次に「yarn build」です。こちらは以下のようなエラーが発生

yarn run v1.22.4
$ lerna run build
lerna notice cli v3.14.1
lerna info versioning independent
lerna info Executing command in 2 packages: "yarn run build"
lerna ERR! yarn run build exited 2 in '@toio/cube'
lerna ERR! yarn run build stdout:
$ tsc --project .
src/characteristics/specs/motor-spec.ts(119,27): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(120,7): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(120,27): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(123,7): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(123,41): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(123,44): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(124,43): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(125,7): error TS1005: ':' expected.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
error Command failed with exit code 2.

lerna ERR! yarn run build exited 2 in '@toio/cube'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

以下の記述からTypeScriptのエラーである、というところまではわかったのですが、どうすればよいか検討も付かず・・・。

$ tsc --project .
src/characteristics/specs/motor-spec.ts(119,27): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(120,7): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(120,27): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(123,7): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(123,41): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(123,44): error TS1005: ':' expected.
src/characteristics/specs/motor-spec.ts(124,43): error TS1109: Expression expected.
src/characteristics/specs/motor-spec.ts(125,7): error TS1005: ':' expected.

しかし、見事エラーを解消することができました。その方法は次の項目で！

５，解決方法

参考になったのは以下のサイトです。

もともと以下のようだったスクリプトを

119     const x = target.x ?? 0xffff
120     const y = target.y ?? 0xffff

 :     // (略)
123     const angle = clamp(target.angle ?? 0, 0, 0x1fff)
124     let rotateType = target.rotateType ?? 0x00
 :     // (略)

以下のように「??」を「||」に変更すれば、エラーが解消できます。

119     const x = target.x || 0xffff
120     const y = target.y || 0xffff

 :     // (略)
123     const angle = clamp(target.angle || 0, 0, 0x1fff)
124     let rotateType = target.rotateType || 0x00
 :     // (略)

あとは公式ページにかかれている通り「yarn example:<name of example> 」すればtoio Cubeを接続され、起動が確認できました。
ここでやっと手順２が終了しました。

ここからがUnityとの連携本番です。
さっそく行ってみましたが、なにやらエラーが発生している様子・・・。
まだまだ、本格的に連携できるようになるには先は長いようです。
Unityと連携できるようになった暁には再度記事をまとめたいと思いますので、ご期待ください。

６，さいごに

弊社の強みであるUnityの開発技術を活かし、toioで色々な開発をしていきたいと思っています。
そのためにはまず、Unityとの連携を完成させるところから！

そして、今回はMacでの開発を行って参りましたが、普段はWindowsにて開発を行っているので、Windowsの情報が増えてくるといいなと思います！
現状でている情報も含めて、弊社でも随時検証していきたいです。

開発者シートが届いてからあまり時間が取れなかったのですが、ここまでかかった時間は総計１８時間！（設計：５時間、試行錯誤：１３時間）
その中では、xcodeが入らなくてOSを初期化したり、python3入れてみたり、noble入れてみたり、xpc-connectionを入れようとしてみたり・・・。
原因がわかった今思うと、かなり回り道をしていますが、ちょっとでもみなさんのお役に立てればいいなと思っています。

それでは！次回の投稿もお楽しみに！

#toio #おうちでロボット開発

この記事が気に入ったらサポートをしてみませんか？