toio doをローカルで起動する

つくると！8に出展

先日、CoderDojo香椎としてつくると！8に出展しました。

micro:bitをコントローラとしてtoioを動かし、ピン球をゴールに入れる簡易なサッカーゲームを用意しました。
toioにnanoblockのキャラクターを取り付けるためにこちらで公開されている3Dモデルを使用しました。

またtoioだけではピン球を上手く操れないので、上記のモデルに合わせたパーツを用意してもらいました。
（CoderDojo香椎を手伝ってくれている方が半日で作成してくれました。）

システム構成

toioは toio doを使って動かしています。
micro:bitの接続は micro:bit moreを使用しました。
特筆すべき構成ではありませんが、インターネット接続が前提になっています。
幸いなことに当日はネットワークトラブルもなく無事に終わることができました。

ネットワークトラブル対策

今回はトラブルはなかったものの、会場によってはネットワーク接続できないことも考えられます。toio doのサイト自体にトラブルがあり使用できないこともあるかもしれません。

不測の事態の対策としてtoio doをローカル環境でも動かせるように試してみました。

ローカル環境で動かす

toio doのソースはgithubに公開されています。

ソースを読んでみましたが実際のサイトと内容が違っていそうです。
ソースの更新日時を見ると6年前のようなので更新はされていなさそうです。

gh-pagesブランチを見るとビルドしたものがここにありそうです。

最新のv3.6.12をローカルにコピーし、WEBサーバを起動しました。

py -3 -m http.server 8000

http://127.0.0.1:8000/ にアクセスすると無事に起動しました。toioの拡張ブロックも追加されています。

micro:bit moreを追加したい

ここにmicro:bit moreの拡張があるので、ローカルでも追加できそうです。

試しに追加してみましたが、不正なエラーになりました。

エラーログに出ているstatic/assets/config.jsonをみると、localhost:8080しか許可されていないようです。

{
  "allowed_extension_urls": [
    "https://toio.github.io/",
    "https://toio.io/",
    "http://localhost:8080/",
    "https://studyapps.github.io/bidirectional-comm/bidirectional-comm.mjs",
    "https://studyapps.github.io/bidirectional-comm/bidirectional-comm-trial.mjs",
    "https://studyapps.github.io/bidirectional-comm/bidirectional-comm-basic.mjs",
    "https://studyapps.github.io/test/bidirectional-comm.mjs",
    "https://studyapps.github.io/test/bidirectional-comm/bidirectional-comm-trial.mjs",
    "https://studyapps.github.io/test/bidirectional-comm/bidirectional-comm-basic.mjs",
    "https://eqot.github.io/scratch-contents/2way2.mjs"
  ]
}

ポート:8080で起動しなおして、localhost:8080にアクセスしました。

py -3 -m http.server 8080

今度はmicro:bit moreの拡張ブロックが追加されました。

おわりに

サッカーゲームを作るときにtoio同士が衝突したときに何かさせてみたかったのですが、実際に動かしてみると衝突の判定が上手くいかず、断念しました。

toioの仕様をみると衝突判定のしきい値を変えられるようなのですが、toio doではできないようです。
ソースが更新されたら、衝突判定のしきい値を制御するブロックを試しに作ってみたいです。