放課後のtoioあそび：toioをmicro:bitと連携させてみた

この記事は「[toio™(ロボットトイ | toio（トイオ）) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/toiotomo)」に参加している趣味のブログです。

# toioをmicro:bitと連携させる

toioは[Visual Programming](https://toio.io/programming/#y-two )で自由にプログラムを作って動かすことができます。
最近[toio公式Note](https://note.toio.io/m/m63c44c67c36d)の方で詳しい使い方が紹介されているので、この記事ではやや普通ではない例を今後紹介したいと思います。まずは世界的に大人気のマイコンボード[micro:bit](https://microbit.org/ja/guide/)とtoioを連携させてみます。
toioの詳しい説明は[toio公式サイト](https://toio.io/)をご覧ください。

toioのVisual Programming環境はScratch3.0とほぼ同等の見た目で、拡張機能としても同等のものが使えるようになっています。今回はこちらを使ってtoioとmicro:bitを連携させてみます。個人的にはどちらも大好きなので夢の共演です！

今回完成させるのは、下記の画像のようにmicro:bitを傾けるとそれに沿ってtoioが動くプログラムです。

<blockquote class="twitter-tweet"><a href=https://twitter.com/akichika/status/1202476868735078400/></blockquote>

完成イメージはこんな感じです。toio公式Noteの[サンプルコード](https://note.toio.io/n/nbfe531ffaade?magazine_key=m63c44c67c36d)から改造するので、実質8つのブロックをいじるだけなので簡単です。

<img width="1438" alt="Visual_Programming__beta_-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/40fdf7d6-1c54-5718-bf71-de31139d9754.png">


なお、toioのVisual Programming自体の詳しい解説はこちらの[toio公式Note](https://note.toio.io/m/m63c44c67c36d)を参考にしてみてください。

では早速やってみましょう。


# 必要なもの
- [toio コア キューブ](https://toio.io/platform/)（以降キューブ）　1台
- [micro:bit](https://www.switch-science.com/catalog/5263/) 1個
- micro:bit用のMicro USBケーブル 1本
- micro:bit用の電池ボード（[MI:power](https://www.switch-science.com/catalog/3178/)等）1個　※ない場合はUSBで電源供給
- Mac　1台（※toio Visual ProgrammingのWindowsへの対応は2019年12月の予定とのこと）

micro:bitにはMI:Powerを取り付けて電池だけで動くようにしています。
![IMG_1407.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/03c39ac4-63b5-67b1-5b85-25e1a4664bfe.jpeg)
![IMG_1408.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/385d12bf-9c1b-b473-9c71-893c74144c3b.jpeg)

電池は基板と基板の間にあります。あまり長く持たないので、必要なときだけ電源を入れましょう。

![IMG_1409.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/f507ce11-c9f6-d266-cbce-6c8e0a15afd7.jpeg)


# 準備
## Scratch Linkのダウンロード

micro:bitをMac（やWindows PC）のVisual Programmingから動かすにはtoioと同じようにScratch Linkをインストールする必要があります。toioを動かしたことがある方は同じものが使えますが、もしすでにインストールされている場合はバージョンに注意し、新しいものがあれば適宜更新してください。

[Scratch Linkの公式サイトの説明](https://scratch.mit.edu/microbit)から引用：
<img width="1014" alt="Scratch_-_micro_bit.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/fdd8ba87-c950-c9ba-49fa-3f2a8f907c1a.png">


詳しいインストール方法はこちらの[Scratch Linkの公式サイトの説明](https://scratch.mit.edu/microbit)をご覧ください。


## micro:bitへのファイル書き込み

micro:bitをVisual Programmingから動かすには専用のHEXファイルというものを書き込む必要があります。といっても、micro:bitはPCにUSBケーブルで接続すると単なるUSBメモリに見えるので、ドラッグ＆ドロップするだけで完了です。

[Scratch Linkの公式サイトの説明](https://scratch.mit.edu/microbit)から引用：
<img width="1002" alt="Scratch_-_micro_bit_hex.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/c801ec85-5050-9fb6-91a0-38881cda4728.png">

※詳しくは[Scratch Linkの公式サイトの説明](https://scratch.mit.edu/microbit)をご覧ください。


## サンプルコードをダウンロード

今回の記事では、toio公式Noteのサンプルを改造したいと思います。下記の記事を参考に、[サンプルコード](https://note.toio.io/n/nbfe531ffaade?magazine_key=m63c44c67c36d)をダウンロードしてください。読み込み方法などもぜひtoio公式Noteを参考にしてください。

[toio公式Note](https://note.toio.io/n/nbfe531ffaade?magazine_key=m63c44c67c36d)から引用：
<img width="715" alt="toio™️「ビジュアルプログラミング」のあそびかた_サンプル編：リモコン操作（上級編）｜toio™公式.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/125b6b9a-40fb-7c71-4dd0-34c0997cbdf5.png">



# 早速プログラミングしてみる

## サンプルコードを読み込む

Visual Programmingの左上の「ファイル」から「コンピューターから読み込む」を選択し、ダウンロードしたサンプルコードを読み込みます。

<img width="480" alt="Visual_Programming__beta_読み込む.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/ba57ae92-6bf8-aa35-082a-95831cba348f.png">

※わかりにくい場合は[toio公式Noteの参考記事](https://note.toio.io/n/n6adda0b7e61d)を参照してください。

## micro:bitを接続する

micro:bitの電源を入れます。MI:Powerを使っている場合は電源ボタンをONにしてください。USB給電の場合はUSBケーブルを接続してください。
次に、Visual Programming上で左下（下記のピンク色囲み部分）の「拡張機能」ボタンを押します。

<img width="1455" alt="Visual_Programming__beta_-10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/365b3397-fadd-7648-bb96-38813de45f6a.png">

すると下記の画面に遷移します。

<img width="1438" alt="Visual_Programming__beta_-11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/ffd5fb02-c6ff-feb6-f987-76ccb39ca387.png">


この中のmicro:bitを選択すると接続画面が出てきます。

電源を入れたmicro:bit上のLEDには流れる文字でデバイス名が表示されます。Visual Programming上の名前と同じであることを確認して接続します。

![20191205_141025-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/c26cd7e9-c7cc-5bfd-1b25-93e3de3df47f.gif)


下記の画面が出たら接続成功です。「エディターへ行く」を押して戻ってください。

<img width="1437" alt="Visual_Programming__beta_-8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/05d2a27a-d715-485b-4c3e-eb0df4a1efff.png">



## プログラムを改造する

サンプルコードではキーボードの矢印キーを使ってキューブ操作しています。
今回はこの矢印キーをmicro:bitの加速度センサーを使った傾きに置き換えます。
下記のように「上向き矢印」を「前に傾ける」などに一つ一つ置き換えていきます。

<img width="1439" alt="Visual_Programming__beta_-7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/7b4187da-9551-f171-9e6d-ed4d1069f28a.png">

4つ置き換えできれば完成です。

<img width="1439" alt="Visual_Programming__beta_-6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/7afee724-dd98-f134-a43d-9a3ebe6bdd4b.png">


## micro:bitのLEDに矢印を表示する

せっかくmicro:bitを使うので、micro:bitに搭載されている5x5のLEDマトリクスに絵を表示してみましょう。傾いた方向に矢印が表示されるように「<ドット絵>を表示する」ブロックを追加します。

<img width="400" alt="Visual_Programming__beta_-12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/d5f7fef2-0ecb-59c6-7192-38d05c82e936.png">


4つ全部に反映できたら完成です。

<img width="473" alt="Visual_Programming__beta_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/e38639e7-fdfc-029b-105c-b38f56332286.png">

改造したプログラム全体の見た目はこんな感じです。矢印キー4ブロックを傾きブロックに置き換えて、LEDマトリクス表示の4ブロックを追加しただけです。簡単ですね。

<img width="1438" alt="Visual_Programming__beta_-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/5004f20a-1607-f567-15cf-9f947ae125df.png">


これでtoioとmicro:bitを連携させるプログラムの完成です！

## toioのキューブを接続する

toioブロックを表示し、右上の(!)マークをクリックします。

![visual-programing_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/c832e657-b860-3acf-9c1a-076116e59110.png)


次にキューブの電源を入れて接続します。

<img width="1437" alt="Visual_Programming__beta_-5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/a0736442-0815-d278-aa97-56528b5238a7.png">

<img width="1439" alt="Visual_Programming__beta_-4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/555e1627-c918-851b-2dd6-f5aa4b8b10ec.png">

接続方法の詳細は[こちらの記事](https://note.toio.io/n/n5103dca10b3f)を参考にしてみてください。

# 動かしてみる

まず、micro:bitを机に置いて安定させてください。
画面右上のスタートボタン（旗）を押すとプログラムがスタートします。

<img width="1438" alt="Visual_Programming__beta_-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33040/baa76856-fc13-e797-6108-2ca05d504df0.png">

次に、micro:bitを傾けます。前に倒すと前進、後ろに倒すと後進、右に倒すと右回転、左に倒すと左回転します。

<blockquote class="twitter-tweet"><a href=https://twitter.com/akichika/status/1202476868735078400/></blockquote>

これで無事に動きました！以上で完成です！


# まとめ

toioのVisual Programmingを使うとmicro:bitと簡単に連携することができます。toioにないLEDディスプレイや電極を使って様々な電子工作との連携ができそうですね。

次回以降はmicro:bitに周辺回路を取り付けてさらにいろいろ作ってみたいと思います。それではまた！