【toio 2022】100円ショップのアイテムと toio を組み合わせて手軽に作れる作品【マスコットキーホルダーなどを走らせる】

## はじめに
この記事は、「[toio Advent Calendar 2022](https://qiita.com/advent-calendar/2022/toiotomo)」の 3日目の記事です。

## この記事の内容
この記事では、100円ショップのアイテムと toio を組み合わせた事例を、一つ取り上げて紹介します。

## ダイソーのマスコットキーホルダーやセリアのハロウィングッズを toio で走らせる話
### 動作している様子など
具体的には、以下の動画に出てくるものの話です。

●【ヒーローズ・リーグ2022】100円ショップのアイテムを toio で手軽に動かす！ - YouTube
　https://www.youtube.com/watch?v=ewRDIYSTzlE

<iframe width="560" height="315" src="https://www.youtube.com/embed/ewRDIYSTzlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

補足などは、ProtoPedia というサイトに記載しています。

- [toio と toio Do でマスコットキーホルダーを手軽に走らせる | ProtoPedia](https://protopedia.net/prototype/3359)
- [toio ＋ toioDo を使ってセリアで買ったハロウィングッズのカボチャ・お化けを走らせてみる | ProtoPedia](https://protopedia.net/prototype/3382)

その中からポイントだけ抜き出してみます。

### 材料を手に入れる
材料として使ったものを買った時のツイートを掲載して、材料の外観を示します。

https://twitter.com/youtoy/status/1568885301657088000

https://twitter.com/youtoy/status/1574386905650987008

いろいろ関係ないグッズもうつりこんでますが、購入後の状態はこのような感じです。

### 買ってきたアイテムを加工する
今回の材料となる 100円ショップのアイテムを、toio と組み合わせられるように加工します。

この時、真似してやってみたいという方がいた時に、それが簡単になるようにしたいという思いがあり、できるだけ簡素で手間のかからないやり方を採用しました。ただ単に、買ってきたものの底の面に、toio がはまり込むための穴をあけて、中の綿をある程度取り出してやるだけ、なのですが。

![ダイソーのマスコットキーホルダーの底面に toio をはめこむ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5965aaa8-f9f7-cfa2-e226-6e8e260db73d.png)

![セリアのハロウィングッズ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f84ceded-0907-afef-27e4-04a3a62675d3.png)

### 動作している時の様子
この後、動作している様子を掲載して、その動作を実現しているプログラムを掲載します。

#### toio Do で少ないブロックで動かす
以下は、できるだけブロックのプログラムを簡素化して、でもそれなりの動きをさせようとしてみたものが、動作している様子の動画です。
 
●#toio ＋ #toioDo でダイソーのマスコットキーホルダーを走らせてみる - YouTube
　https://www.youtube.com/watch?v=Dy5MWEhg6qQ
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dy5MWEhg6qQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

●#toio ＋ #toioDo でダイソーのマスコットキーホルダーを 2台同時に走らせてみる - YouTube
　https://www.youtube.com/watch?v=xBOHKzQMZyc
<iframe width="560" height="315" src="https://www.youtube.com/embed/xBOHKzQMZyc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

●#toio ＋ #toioDo を使いセリアで買ったハロウィングッズのカボチャ・お化けを 2台同時に走らせてみる - YouTube
　https://www.youtube.com/watch?v=jo51AkRB8z0
<iframe width="560" height="315" src="https://www.youtube.com/embed/jo51AkRB8z0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上記で使ったプログラムは、以下の通りです。かなり利用したブロックの数が少ないです。
![プログラム（簡易版）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/69e17c6f-13e7-50f5-be2d-ed03cf9d42a5.png)

1台を走らせるのにブロック 6個を使う、という感じです。そのうち半分は乱数を発生させるブロックになります。

#### toio Do で使うブロックを増やして実装したもの
今度は、動きを少し複雑にするため、toio Do で利用するブロックを増やしたものが、動作している様子の動画です。

●#toio ＋ #toioDo でダイソーのマスコットキーホルダーを 2台同時に走らせてみる 〜その2〜 - YouTube
　https://www.youtube.com/watch?v=xMVg1oTv6bI
<iframe width="560" height="315" src="https://www.youtube.com/embed/xMVg1oTv6bI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この時に作ったブロックのプログラムは、以下のとおりです。先ほどより、かなりブロックの数が増えました。
![マスコットキーホルダーをCoderDojo武蔵小杉で走らせた時のもの](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fba97c19-dd43-d304-73ad-4dff2b53fe5d.png)

このプログラムの所在が行方不明になっている関係で、斜めで粗い画像しか掲載できずすみません。
また、時間がとれた時に、これと同じものを組み直して、解説などできればと思います。

## 【別の事例】 ダイソーのマスコットキーホルダーとおもちゃの刀を組み合わせた話
また、今回の本題（100円ショップのアイテムを走らせる話）とはずれますが、上で用いていたマスコットキーホルダーと、ダイソーのおもちゃの刀を組みあわせたものも試作しました。

以下は、とあるコンテスト用に作ったもので、時間の関係で中途半端になっている部分があるのですが、思い描いていたコンセプト（※ キャラクターに魔法のカードをかざすと、刀に魔法の力が宿る、みたいなイメージのものを作りたかった）のもとになる部分は実装できていたものでした。

●ダイソーのマスコットキーホルダーとおもちゃの刀の組み合わせ：刀を光らせる （デバイス： M5Stack の ATOM Lite と toio、実装環境： ビジュアルプログラミングの UIFlow） - YouTube
　https://www.youtube.com/watch?v=6nrRdsRALZM
<iframe width="560" height="315" src="https://www.youtube.com/embed/6nrRdsRALZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

●ダイソーのおもちゃの刀を光らせる色を toio を使って決める（デバイス： M5Stack の ATOM Lite、実装環境： ビジュアルプログラミングの UIFlow） - YouTube
　https://www.youtube.com/watch?v=eeQqbd5kuuI
<iframe width="560" height="315" src="https://www.youtube.com/embed/eeQqbd5kuuI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

仕組みなどについてご興味がある方は、以下のページに記載された情報などをご覧ください。
●自分で操作しておもちゃの刀を光らせる（デバイス：toio・ATOM Lite、実装：UIFlow） | ProtoPedia
　https://protopedia.net/prototype/3317

## おわりに
最初は、全然違う目的での買い物をしていて、ふと目にとまったマスコットキーホルダーを買ったことから始まった上記の内容。
100円ショップのアイテムは、まだまだたくさんあって見きれてないものもあり、同じような流れで楽しい作品を作ることができるかもしれません。

そういった試行錯誤を、引き続き、続けていこうと思っています。