M5StackとM5UI.Flowで子供のプログラミング教室#１

プログラミング教室

嫁さんの要望により、子供にプログラミングを教えてということで、どんなコンテンツがいいかなと。

いきなりコードを書くのはハードルが高いので、Scratchみたいなブロックで勉強ができるのがいいと思いました。 けど、PC上だけで動くのはあまり面白くないと思い、デバイスと連携したものとなると結構高い。

そこで見つけたのが、M5Stackをデバイスとして使えるM5UI.Flow。 M5GOという専用のキットもあるみたいですが、手元に普通のM5Stackがあったので、それを使って始めることに。

M5Stackのページから、UI.Flowを使えるようにするために必要なソフトウエアがあるので、これらをダウンロードして環境を整えます。

  • M5Burner
    • UI.Flowで作ったアプリを実行するためのファームウエア
    • ファームウエアを焼いた後に起動すると、セットアップメニューが選べるので、USB接続を選ぶ
  • UIFlow-Desktop-IDE
    • Web版のIDEもありますが、PCにインストールする版のほうが子供には使いやすそうなので、そちらを使いました
  • CP210X Driver
    • M5StackとUSBシリアルで繋ぐときに必要なドライバ

IDEの初期設定

IDEを開くとどのデバイスにつなぐか聞いてくるので、指定してあげます。 f:id:sparkgene:20190831140344p:plain

ここで、ThemeでIDEの色を指定できるので、子供に好きな色を選ばせると、それだけでも自分のもの感が出るのでやる気がでてきます。

f:id:sparkgene:20190831140822p:plain

このようなUIとなっていて、真ん中のグループから使いたいブロックを選んで、右側のエディタに配置します。

課題１ 背景色を変えてみる

ブロックのグループから、「グラフィック」を選ぶといろいろな操作ができるブロックが表示されます。 この中から、画面を塗りつぶす物をドラッグして、エディタに置きます

f:id:sparkgene:20190831141933p:plain

切込みと、山の部分が接続可能な部分なので、ドラッグしてカチッとハマるようにドラッグして動かします f:id:sparkgene:20190831141516p:plain

最後に表示したい色を選びます f:id:sparkgene:20190831142052p:plain

これで背景が指定した色で塗りつぶされる動きをします。画面右上にある実行ボタンみたいのをクリックするとM5Stack側に転送され、実行されます f:id:sparkgene:20190831142813p:plain

M5Stack側の表示もちゃんと変わりました！ f:id:sparkgene:20190831142528p:plain

IDEの上の部分でブロックとソースコードの表示切り替えも出来るので、ステップが終わるごとに、子供に実際はこんな感じのコードが書かれてて、こっちをいじっても動くんだよみたいな説明をしてます f:id:sparkgene:20190831142655p:plain

最初の手順はIDEの使い方を教えつつ、簡単な処理を実現して、すぐに結果を見れるようにすると、子供も興味を持って集中して作業してくれます。 デバイスがある方が大人も子供もテンションが上がるので、とりあえず最初の一歩は成功したかなと。

課題２ 音を鳴らす

M5Stackは音も鳴らせられるので、次はこれにチャレンジします。

「ハードウエア」->「スピーカー」と選ぶと、音を鳴らすためのブロックが見つかるので、「LowAの音を１拍鳴らす」を使います

f:id:sparkgene:20190831143553p:plain

これで、実行ボタンを押すとM5Stackから１拍の時間だけ音が鳴ります。すごい簡単ですね。「LowA」の部分を変えるといろいろな音に変わるので、子供には実際に色々と試してもらいます。

課題３ 曲みたいに音を鳴らしてみましょう

今までの手順だと、１つのことしかさせていないので、ここからは複数のことをやらせる方法について教えていきます。 例として、チューリップの花のを音がずれてもいいので、リズムだけ合うように組み上げること一緒に進めます。

まずは最初のステップとして、音をつなぎ合わせて雰囲気は伝わる感じに仕上がりました。 「さいたー」みたいな音にしたいので、「た」の部分は２拍にします。 f:id:sparkgene:20190831152715p:plain

曲の詩は「さいたー」が２回繰り返しているので、そこをプログラムで変えてみましょうとします

f:id:sparkgene:20190831151600p:plain

この課題では、繰り返し音を変えながら試すことを通して、「実際に自分が思う通りに動くように、繰り返し修正をする（デバッグ）」と、同じことを繰り返す場合は、「繰り返し（ループ）」という仕組みがあることを勉強してもらいました。

デバイスを使った勉強は、画面だけで見るよりも、実際にアクションとリアクションを楽しめるので、子供も楽しんで触ってます。

課題４ ボタンを押したら、音が流れるように

M4Stackにはボタンが３つ付いているので、この課題ではボタンを押したら、曲が流れるようにします。

「イベント」->「ボタンAがawsPressed」のブロックをエディタにドラッグします

f:id:sparkgene:20190831151704p:plain

次に、先程作ったものを、「Setup」の方から、ボタンのイベントに移動します。

f:id:sparkgene:20190831151856p:plain

f:id:sparkgene:20190831152520p:plain これで、実行ボタンを押してM5Stackの一番左のボタンを押すと、音楽が流れてきます。 ボタンをBやCに変更して、動きが変わるのも試してみます。

最後に、実際のコードはどのような形になっているか見て、どんな風に動いているかを一緒に調べます。

f:id:sparkgene:20190831153331p:plain

この課題では、イベントを元になにかの処理をすることを知ってもらいました。

応用編 押すボタンによって、動きをを変えてみましょう

押すボタンによって、画面の色と音を変えるように、本人たちにやってもらいます。

f:id:sparkgene:20190831153836p:plain

まとめ

小学校２〜３年の子供向けにやってみたけど、結構興味を持ってくれました。 前にLegoでプログラミングみたいな教材を試してみたことがあったけど 、人数分揃えるには高すぎるし、Legoで遊んでしまう問題もあり集中できない問題がありました。M5Stackを使った自作教材だと、やりたいことを自由に組めるし、デバイスはやっぱり面白いし、今後はセンサーモジュールも買って拡張し放題なので、勉強に丁度いいと思いました。

プログラム教室の過去記事

sparkgene.hatenablog.com