toio™️コアキューブをさわらずに手で動かす(MFTokyo2020出展記 展示編)

 本記事は、[toio™️コアキューブをさわらずに手で動かす(MFTokyo2020出展記 実装編)](https://qiita.com/kenichih/items/62dc46bbbf4051e73b8c)の続きです。

# とりあえず実装は終わったが
　実装は終わりましたが単に動くようになっただけなので、本番展示のときどう配置するか、持っていく機材リスト、当日の運用手順などをいろいろやることはたくさんありました。

#準備
##展示機材
　Maker Faire Tokyo(東京ビッグサイト会場)ではテーブルと椅子とAC100Vコンセントは用意されていますがそれ以外は自前で用意する必要があります。今回、ホワイトボードに開発者マットを貼り付けたものを垂直にたて、toio™️ core cubeを磁石で貼り付けて使いますので、ホワイトボードをたてかけるイーゼルが必要となります。例によってamazonで発注。
[THE DISPLAY B2軽量パネルに最適メタルイーゼル TDYS-001B ブラック](https://www.amazon.co.jp/gp/product/B0749KT7N3/)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/ab1c2e73-1ddf-a533-1838-8e6f6a5f10cf.png"  width=25% alt="イーゼル" />

##カメラの配置の検討
　自宅でのテストではカメラをホワイトボードの上につけて手の動きを捉えるようにしていました。一人の人間の手の動きを捉える場合それで問題はないのですが、展示会の場合、通路を多数の人が通りますので、toio™️ core cubeを手で操作している人の後ろを通りがかった人の手を認識してしまう可能性があります。なるべくそれを避けるため、操作している人以外の手が写らないようなカメラ配置を考える必要がありました。
　
　大まかにわけて正面から横向きに写す方法と、上から机側にむかって写す方法が考えられます。

　上から机に向かって写せば(画像の上下を逆にしておく必要はありますが)ほぼ操作者の手しか写りません。ただ、アーム状のカメラホルダを作らないといけないのと、手を奥や手前に動かすとtoio™️ core cubeが上下に動く、というのは操作感覚としてはズレています。
 ![MFT2020_camerapos3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/cedc2c8f-c37b-2d5f-7743-52d9f6978091.jpeg)

　正面から横向きの場合、手の動きとtoio™️ core cubeの動きの方向が一致するので操作のダイレクト感を得られます。あとはカメラのホワイトボードの下側におくか、上側におくかのどちらかですが、上側におく場合、射角が下向きになるため操作者の後ろの人の手が写りやすくなります。(後ろの人の下げた手が写りやすい)
![MFT2020_camerapos2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/1a58d776-0005-5d78-bd8d-81b8c1c9aebd.jpeg)

　下側から上むきの射角をとれば、操作者の後ろ側は操作者より高い位置を写すことになるので、後ろの人がバンザイでもしていない限りは大丈夫そうです。ただしこの場合、天井の照明がカメラに入るのでそれが認識に影響を与えるかどうかが不明です。
![MFT2020_camerapos1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/510a7836-b71e-8dd1-7771-61c60de018d3.jpeg)

　まあこの３パターンを想定し、あとは現地で調整するしかないのでカメラの取り付けをいろいろ試せるように治具や部材を持っていくことにしました。

## 飾り付け
　ホワイトボードの上を走り回るtoio™️ core cubeですが、そのまま使うのも味気ないのと、白地のプレイマット上の白いtoio™️ core cubeでは目立たないのでちょっと飾り付けをしました。ホワイトボード上をフォーメーションを組んでふらふらと動き回るのはUFO?、あるいは時期的に ハロウィンの幽霊？、はたまたフォーメーションを組んで動くので青い戦闘機？(ブルーインパルスはT-4なので戦闘機じゃないですけども)とかいろいろ考えつつ...というか今時の小中学生はUFO知らなかったり？とか思ったり。まあ結局はUFOにしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/051cdc66-80b0-dd45-7820-43629d5837ce.png" width=30% /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/980ddf9f-38a1-b337-7b1b-8af3ba2d6cc3.png" width=30% /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/8814647e-e504-00b8-1a93-e11c7cb5992b.png" width=30% />
　まいどお世話になっている、[いらすとや](https://www.irasutoya.com/)、からイラストをプリントして切って貼ります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/f202a7b2-d4d6-b33d-905b-8b3511d23f25.jpeg" width=25% /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/e0f4ffe4-799a-c7a9-4ace-8edf800d6bdb.jpeg" width=25% /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/d3f13f9e-0d45-4795-590e-7b5a5382a80f.jpeg" width=25% /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/cbeedd61-5d3b-8efc-6e7a-be81e33128e8.jpeg" width=25% />
ヨレヨレなのは展示で酷使した後、後日撮った写真のため

## ポスターの用意
　Maker Faire Tokyo運営サイドから送られてきた出展者ガイドには、「なるべく会話もへらして、見てわかるよう展示を」とありましたのと、確かに説明でしゃべり続けるのは大変なので、ポスターを作って展示することにしました。また、出展ガイドには説明ポスターの作り方っぽいものがあり、その中で「一番伝えたいことはなに？」というのをはっきりさせるのがポイントとのこと。
　なるほど、とにかく磁石さえ手に入ればtoio™️ core cubeを垂直に走らせることは簡単だよ、みんなやってみて、という点が今回一番伝えたいことなのでまずはその説明ポスターを一枚。あとは、しくみを知りたい人用の簡単な説明ポスターを作りました。何を使っているかのキーワードを並べた程度でわかる人はわかるし、細かい説明は聞いてもえばいいかなと。あと、操作方法ポスター。小さい子供たちも来ますので操作方法は5才ぐらいでもわかるような感じにしてみました。
　ポスターのプリントはPDFファイルにしてコンビニのカラーコピー機でプリント。複数のコンビニを試しましたがセブンイレブンのカラーコピー機が一番使い勝手良かった気がします。

###磁石を貼り付けるだけで垂直に走る点を説明
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/37919777-e86d-1836-16d9-5b8aa265c31f.jpeg" width=80% alt="磁石を貼り付けるだけで垂直展示" border="1" />|
|:-:|

###デモの操作方法
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/0884b303-0bd1-f549-75d5-51129a4747e3.jpeg"  width=80% alt="操作方法" border="1" />|
|:-:|

###しくみ
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/b202f929-6c77-53f8-80e8-d43012fa32ce.jpeg" width=80% alt="しくみ" border="1" />|
|:-:|

###休憩時のポスター
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/44c665dc-e451-58e8-4b20-3362cf495a98.jpeg" width=80% alt="休憩中のデモの説明" border="1" />|
|:-:|
　この休憩時用ポスターですが、食事やほかの展示を見学するために不在にするときには、自動デモに切り替えておこうと思って用意しました。自動デモとして動かすのはtoio™️ core cube 2台の間に糸を張って、LEGOのホイールで作ったコマをひっかけてディアボロのように動かす、というものです。これなら無人でもずっと動き続けるので不在でもとりあえずは大丈夫かなと。
[![toio™️でディアボロ](http://img.youtube.com/vi/mBkXiPprk6Q/0.jpg)](http://www.youtube.com/embed/mBkXiPprk6Q)

# 当日
 さあ当日。一緒に展示を行う加藤さん、豊田さんと待ち合わせて入場＆セットアップ。田中さんは今回YouTube Liveでのセミナー出演のお仕事のため、作品だけの展示となりました。

## 持って行ったものリスト

- Jetson Xavier NX関連
    - Xavier NX Dev.Kit本体、ACアダプタ
    - 広角カメラモジュール、標準カメラモジュール(RasPi Camera2)
    - USBカメラ(広角版)、USBカメラ(標準版)
    - USB延長ケーブル (カメラの設置で延長が必要かもしれないため)
    - USBキーボード(ThinkPadトラックポイントキーボード)
- 小型HDMIモニタ関連
    - 小型HDMIモニタ(8.9inch)
    - HDMIケーブル(Xavier NXのHDMI出力と接続)
    - USB microBケーブルとACアダプタ(モニタ用電源)
- テーブルタップ　口数多めのもの一本
- AC分岐アダプタ　口数多めのもの
- カメラ設置治具関連
    - 100均で買ったスマホ用三脚ホルダ
    - ミニ雲台
    - ミニ三脚
- ホワイトボード関連
    - 開発用プレイマット2枚一組 ２セット(汚損時に交換するため)
    - 開発用プレイマット固定用磁石
    - キャン★ドゥの磁石　たくさん
    - イーゼル
- toio™️ core cube関連
    - toio™️ core cube 6台  
    - toio™️ core cube トッププレート　6枚
    - toio™️ core cube 専用充電台 
    - USB microBケーブルとACアダプタ(充電台用)
    - toio™️ console (充電台として使う)
- ポスター、他
    - ポスター A3プリント 数枚
    - [ポスター展示スタンド](https://www.amazon.co.jp/gp/product/B08BV1FJ6R)　ｘ２
    - A3段ボール数枚
    - はさみ
    - 養生テープ、セロハンテープ、両面テープ
    - 紐  2m程度
    - ジップロック袋　数枚
    - ディアボロの展示で使うレゴ、糸
    - [3倍回転用治具](https://docs.google.com/presentation/d/1stbIVGFE-C8xWiwiPRONjDoHiZOsoFwbVvSaVIueOg4/edithttps://docs.google.com/presentation/d/1stbIVGFE-C8xWiwiPRONjDoHiZOsoFwbVvSaVIueOg4/edit)（展示用)
    - [toio™️でブンドド治具](https://youtu.be/ukMMr3n4Jcc)(展示用)
    - 不織布マスク  数枚
    - フェイスシールド　数枚
    - タオル、ハンカチ
    - ゴミ袋
    - カロリーメイト２食ぶん、飲み物は自販機調達
- トラブルで不動になった事態にそなえたビデオ(幸い、出番はありませんでした)
    - USBメモリにビデオファイルをいれたもの
    - RasPi3Bと、RasPi3Bで再生できるようにmicroSDにビデオを入れておいたもの
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/8e9aa2ea-bc02-5a81-e931-d913d37ab2a0.jpeg" width=33% alt="荷物" />荷物。A2サイズのホワイトボードを入れるのにTokyo Game Show 2019でもらった巨大なSEGA袋が役に立った。

## 搬入、セットアップ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/552636ba-9303-7777-3f99-dcd86d4afd14.jpeg" width=33% alt="MFTokyo看板" />来たぜビッグサイト

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/a5e949d3-74f1-a472-13ef-31b9de4a4004.jpeg" width=33% alt="2m離れましょう" />2m離れましょう

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/63098630-a0d2-af77-a9f7-b08a6eb820ae.jpeg" width=50% alt="機材の配置" />機材の配置

　結局、広角カメラモジュール(MIPI CSI)で、下から斜め上にむかって写すようにしました。天井のライトが映像にだいぶ入りましたが特に認識への悪影響はありませんでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/1d2a6197-21e6-1709-1599-6ba2dc054362.jpeg" width=33% alt="機材の配置2" /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/4cfbf9cf-56da-3a79-c872-52cd0516dd2d.jpeg" width=33% alt="機材の配置3" />


## 本番

toio™️で作ってみた友の会の展示はこんな感じになりました。
[![Maker Fair Tokyo 2020 toioで作ってみた友の会の展示](http://img.youtube.com/vi/KW4-MeohJEc/0.jpg)](http://www.youtube.com/embed/KW4-MeohJEc)(YouTube)

加藤さんの展示(toio™️で作ってみた友の会のみなさまの作品紹介とUnityの作品)
![120558068_3337803329778711_8462759488019233652_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/5bdd6ff3-78b1-201b-a6ed-0a0305abe944.jpeg)

豊田さんの展示
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">青いベルの音と緑のベルの音を機械学習で判別。地味に難しいことやってる<a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/fpqogGMZ5w">pic.twitter.com/fpqogGMZ5w</a></p>&mdash; ロボ先輩@3rd Factory (@3rd_factory_ro) <a href="https://twitter.com/3rd_factory_ro/status/1312615966870695936?ref_src=twsrc%5Etfw">October 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

田中さんの展示
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> でオートサッカー⚽️<br>AIカメラ <a href="https://twitter.com/hashtag/UnitV?src=hash&amp;ref_src=twsrc%5Etfw">#UnitV</a> と <a href="https://twitter.com/hashtag/M5StickC?src=hash&amp;ref_src=twsrc%5Etfw">#M5StickC</a> そしてスイッチサイエンスさんより発売された「toio™️開発用プレイマット」を使って自動でサッカーするデモを作りました。今日 <a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> でtoio友の会のブースで展示していただいてます！<a href="https://t.co/WUBoXI1D10">https://t.co/WUBoXI1D10</a> <a href="https://twitter.com/hashtag/toiotomo?src=hash&amp;ref_src=twsrc%5Etfw">#toiotomo</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/D3Jr1OrZBL">pic.twitter.com/D3Jr1OrZBL</a></p>&mdash; Akichika Tanaka (@akichika) <a href="https://twitter.com/akichika/status/1312585948442492929?ref_src=twsrc%5Etfw">October 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

自分の展示
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Jetsonとtoioとtensor flowでここまで出来る(驚愕)<br><br> <a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> <a href="https://t.co/vDiYMegRUt">pic.twitter.com/vDiYMegRUt</a></p>&mdash; オオカワマサシ (@masashiokawa) <a href="https://twitter.com/masashiokawa/status/1312639080929193984?ref_src=twsrc%5Etfw">October 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 運用とトラブル
　手認識で動かすデモは4台のtoio™️ core cubeでうごかし、1時間程度たったら別の2台のtoio™️ core cubeでディアボロのデモに切り替え、その間に4台を充電、という運用で考えていました。
  1日目、休憩&他の展示見学のため、手認識によるtoio™️ core cube操作のデモをディアボロの自動デモに切り替えました。が！、休憩から戻ってみるとデモが止まっている。
　どうやらBLE通信のリンクが切れているようで、おそらくですが、ディアボロのデモは数秒に１回づつの位置移動指示が飛ぶ程度でBLE通信を頻繁にはやっていません。このため、MFTの会場のようにWiFi/Bluetoothの2.4GHz帯通信が混みまくっている環境では、BLEのリンクが切れてしまうのだと思います。手認識で動かすデモはひっきりなしにBLE通信を行うためか、切れることは稀でした。(ゼロではない)
　止まりがちだったディアボロのデモですが、運良く稼働中のものを見ることができた方もいらっしゃったようでした。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">toioが垂直に動いてるー😊 <a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> <a href="https://t.co/w28GtIFDd8">pic.twitter.com/w28GtIFDd8</a></p>&mdash; Yamada3 (@keropiyo_) <a href="https://twitter.com/keropiyo_/status/1312597539762233345?ref_src=twsrc%5Etfw">October 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　2日目は、ディアボロの自動デモをあきらめて、6台のtoio™️ core cubeのうち4台を使いつつ、1時間ごとに2台づつ入れ替えて充電、のローテーションでいくことににしました。基本的にダウンタイムなし(トイレ、食事休憩はとる)運用。
　大変といえば大変でしたが、たくさんの方に垂直に走るtoio™️ core cubeを体験していただくことがができました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/980de49a-3c8d-687b-c1fa-5bdfcf6f3e8c.jpeg" width=50% alt="遊んでくれた子供たち１" />
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/1bec5d96-6984-34e0-5c8a-ab23fdc198c8.jpeg" width=50% alt="遊んでくれた子供たち2" />

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">toioの群をウォールで手でコントロールできるの、めっちゃツボった。素晴らしい!!<a href="https://twitter.com/hashtag/MFT2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFT2020</a> <a href="https://t.co/JWETj6oLlM">pic.twitter.com/JWETj6oLlM</a></p>&mdash; Hirotaka Niisato (@hirotakaster) <a href="https://twitter.com/hirotakaster/status/1312316930234040320?ref_src=twsrc%5Etfw">October 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 変な質問、トラブル集

- そのキーボードってなんですか
    - LenovoのTrackPoint Keyboard。Jetsonにつないで操作用に使っていただけですが。トラックポイント(赤ぽっち)つきだったのが珍しかったようで... これだとマウスを持っていかないで済むので使っただけです。
- LED帽子([こんなやつ](https://akiba-pc.watch.impress.co.jp/docs/wakiba/find/1208698.html)が気になる
    - 目を引かせるための単なる電飾看板用途に置いておいただけ(「#toiotomo」と表示し続けるようにしていた)
- (手認識の学習用の)アノテーションが大変だったでしょ？
    - いえ、MediaPipeの学習モデルそのまんま使ってるので巨人の肩に乗ってるだけっす。
- どうやって動いているんですか？
    - キューブの裏側に車輪があるんですよー(と言って車輪を見せる)
- (認識に使っているカメラの画素数を聞かれて200万画素程度と答えたら) カメラ画素数が多いのでは？
    - まあ、この手の認識器への入力としては画素数は多いけど、MediaPipeの内部処理(graph)の中では画素数を減らして処理している。
- ホワイトボードの裏を覗き込んでなんか機構がないか見る人
    - なんの仕掛けもないっすよー。磁石で貼り付いているだけ。
- 手の認識が働かない
    - 女性の手が認識されないことがありました。手が白かったり細かったりするとダメなのかもしれません。
    - 子供は手が小さいので認識されづらいのですが、カメラに近づくように声掛けして対応しました。
- 操作していない手が映る
    - ハンドバッグをひじにかけていると手が上のほうにあるため、操作していないほうの手が映りがちで誤認識していました。
    - 同様にスマホでデモを撮影しようとするとスマホを持っている手が映ってしまって誤作動とか。こちらでデモ操作してあげて、撮影してもらうようにしました。
- 手がとどかない
    - 3才ぐらいだとカメラに手がときません。椅子にのってもらいました。
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/6ec5d4f8-7d7a-fe46-96a6-21fd651c29aa.jpeg" width=33% />
- 動かしているうちにtoio™️ core cubeがぶつかってこんがらかって動かなくなる
    - こちらが手でほぐすか、お客さんに手を左右にふってもらってほぐれるように操作してもらいました。
- マスクに加えてフェイスシールドをつけての展示説明
    - 気温が高かったせいもありますが、フェイスシールドはとても暑い。これをつけてお仕事されている方の苦労がわかりました。
- 小学生には大流行
    - 今考えれば、鬼滅ネタを仕込んでおけばよかったかも。「toio™️の呼吸、壱の型」とか
- ゴミの収集があった
    - Tsukuba Mini Makers Faireではゴミ回収なしでちょっと困ったので、今回はなるべくゴミを出さないように準備したのですが、さすがビッグサイト、終わってからのゴミ収集サービスがありました。とはいえ捨てたのは使い終わったフェイスシールド程度でしたが。

#最後に
　申込＆各種とりまとめの加藤さん、またtoio™️で作ってみた友の会のみなさまに感謝します。
　疲れたけど楽しかった。またやりたい。

![120767297_1284023928601106_73257819025774427_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431649/3e7c9317-4b75-8ea9-c30e-c44008061f31.jpeg)