お手軽プログラミング体験アプリ「micro:bitで文字どっかん」

# はじめに

[「micro:bitからの文字列を無線通信経由でUnityアプリで受信する」](https://qiita.com/SIHO_o/items/5300f2c5c809f888c1b5)で作ったアプリをキッズ向けプログラミングイベントで実際に使ってみました。

![photo2.jpg](https://qiita-image-store.s3.amazonaws.com/0/310600/e3df42f9-ab9d-afa0-ab32-3923f19642c2.jpeg)

アプリを大きな画面に表示して、少し離れてmicro:bitのプログラミング体験を行いました。
今回、イベントでの改善個所を含めたアプリを作成しました。
ご自由にご活用ください。
子供向けプログラミングイベントのネタは下記のFaceBookグループにまとめてありますので、ご興味がありましたら、参加してみてください。
[「KidsEventLab.」](https://www.facebook.com/groups/276521872834438/)

# 機材など
PC1台＋大きなモニター
iPad mini 2台
micro:bit3台(1台はPCでの受信用。2台は体験用)
カラー名のシート
電池ボックス必要台数分
（電池ボックスは接続部をグルーガンなどで補強すると良いかも）

![photo1.jpg](https://qiita-image-store.s3.amazonaws.com/0/310600/c72f3688-4266-eac0-e56f-352fbf39abf6.jpeg)

# フィードバックによる修正
- 送信文字列の前後に空白スペースが入っていると色名と認識されない。iPadで予測変換から選択するとスペースが入りやすくなる。
- カラー名シートのフォントで使ったゴシック「a」がアルファベットを習いたての子供には難しいかった。（写真では塗り足してある）

![ColorList.png](https://qiita-image-store.s3.amazonaws.com/0/310600/b1aa410d-4e5d-2580-e358-84583bccc019.png)
カラー名シートも色サンプルを追加し、文字を認識しやすいフォントに変更しました。

# ダウンロード（2018.12.04版）
これらの反省点を踏まえて、改善したバージョンを作成しましたので、子供むけのプログラミングイベントでお役立てください。
Windowsアプリです。
アーカイブ：[micro:bitで文字どっかん（2018.12.04版）](http://www.viva-mambo.co.jp/siho/archive/microbit_TextBomb20181204.zip)
カラー名シート：[ColorList.pdf（2018.12.04版）](http://www.viva-mambo.co.jp/siho/archive/ColorList.pdf)

# 使い方
#事前準備
１）PCにmbedドライバーをインストールする。
　【ダウンロードリンク】
　[https://os.mbed.com/handbook/Windows-serial-configuration](https://os.mbed.com/handbook/Windows-serial-configuration)
　【参考記事】
　[シリアル通信【Windows編】](https://sanuki-tech.net/micro-bit/appendix/windows-serial-configuration/)

２）micro:bitに下記のプログラムを書き込む
　送信側：microbit_send＞microbit-PushG.hex
　受信側：microbit_reception＞microbit-receveG.hex

３）受信側のmicro:bitをUSBケーブルでPCに接続する。
４）デバイスマネージャーで（３）のポート名を確認。（参考：microbit_reception＞DeviceManager.png）
５）ポート名をinit.txtに書く
　windows＞microbitText_Data＞StreamingAssets＞init.txt
６）起動する
　windows＞microbitText.exeをWクリックして起動する。
　画面左上に「viva mambo,inc.」と表示されたら、送信側のmicro:bitでボタンを押す。
　※画面に変化がないときは、マウスで画面をクリックしてアクティブにしてください。
７）終了
　[Alt]+[F4]を同時に押して終了します。
　画面に変化がないときは、マウスで画面をクリックしてアクティブにしてください。



# 操作動画

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">プログラミングイベントで「手軽に体験できるコンテンツ」として、作ったものをアップデートしました。<br>効果音追加。USBポートも外部テキストにて設定可能。<br>また、色名が送られてきたら文字色も変わります。英語の授業にも使えるかな？ <a href="https://t.co/ICrE6CKWXI">pic.twitter.com/ICrE6CKWXI</a></p>&mdash; SIHO@ままプロ (@SIHO_o) <a href="https://twitter.com/SIHO_o/status/1059779036862328833?ref_src=twsrc%5Etfw">2018年11月6日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#micro:bitをiOSで操作するときの基本操作
動画で説明していますので、参考にしてください
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">少し手順が変わっているので、明後日のイベント用に新しく撮りなおした。<br>[micro:bit]iPadでのペアリング方法 <a href="https://t.co/yjpGB2YfFj">https://t.co/yjpGB2YfFj</a></p>&mdash; SIHO🏃‍♀️IT系技術者・漆工芸作家 (@SIHO_o) <a href="https://twitter.com/SIHO_o/status/1223152447226445824?ref_src=twsrc%5Etfw">January 31, 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">[micro:bit]iPadでのプログラミング画面の使い方 <a href="https://t.co/pzKwkO1Nd4">https://t.co/pzKwkO1Nd4</a></p>&mdash; SIHO🏃‍♀️IT系技術者・漆工芸作家 (@SIHO_o) <a href="https://twitter.com/SIHO_o/status/1223153671237554176?ref_src=twsrc%5Etfw">January 31, 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">iPadでmicro:bitをプログラミングするときの導入動画を新しくしました。書き込みモードにする手順が少し変更されたので、新しくしましたよ。<br>[micro:bit]iPadでのプログラムの書き込み方法 <a href="https://t.co/OUOYfGP0Mc">https://t.co/OUOYfGP0Mc</a></p>&mdash; SIHO🏃‍♀️IT系技術者・漆工芸作家 (@SIHO_o) <a href="https://twitter.com/SIHO_o/status/1223155493641707521?ref_src=twsrc%5Etfw">January 31, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>