パパ教員の戯れ言日記

パパ教員の立場から、ただただ戯れ言を綴る日記。教員全体の意見ではありませんので、悪しからず。

micro:bitを使った本気のオンラインワークショップしてきたのでやり方全部公開します。その2 実践編

全くmicro:bitを触ったことの無い子に、micro:bitを触って楽しんでもらうにはどうしたよいか。

しかも、完全リモートで。

そんなことを考えて行った、オンラインでのワークショップ。今回はいよいよ実践編です。

4000字超えてますので、それなりの覚悟が必要です。笑

前回の準備編はこちらです。

blog.edunote.jp

流れを置いておきます

自信がある方は以下の補足説明をすっ飛ばして流れをどうぞ。

誰でもできるようにと、平均化したバージョンになりますので、実際に行ったワークショップとはちょっと違います。

docs.google.com

では、実際にワークショップを行った際の気づきを入れながら、追っていきましょう。

1 準備状況、接続を確認する

今回のイベントはZoomでのオンラインイベントでした。
そのため、まずはZoomでの接続状況を確認しておきます。
イベント中、一人だけどうしても音声が繋がらず、電話でやったという逸話が残っております。(ありがとうカケホーダイ)

名前を呼びながら、出欠を確認し、参加者の表示名を変更しておきます。今回は下の名前でひらがな表記にしておきました。ここら辺は毎週Zoomで勉強会やっているので慣れたもんです。入ってきたままの名前だと、iPhoneとか機種名になっている場合もあるので、呼びかける際にそこから名前に変換する作業があって脳の処理が追いつかなくなります。呼びやすい名前に変えるのが良いと思います。(そこら辺は本来は共同ホストにお願いした方が良いんですが、今回は一人で進行からZoomの操作までしております。)

Zoomの接続が確認できたら、次にChromebookとmicro:bitの確認です。
Chromebookで、お願いしたイベントページが開かれているかを確認しました。
イベントページには前回載せた動画と、TFabTile、MakeCodeへのリンクが貼ってあります。今回Zoomに参加している端末と操作するChromebookは別の端末のため、Zoomのチャット機能でURLを送っても意味がありません。よって、イベントサイトを作り、そこに全部集約しました。

イベントサイトがChromebookで開けていると言うことは、ChromebookのWi-Fi設定は完了しているということが分かるので、あとはおうちの人が離れていても何とか進められます。

micro:bitは、写真を見せて接続を確認します。

f:id:justsize:20201004170848j:plain

ChromebookがUSB-Cなのでちょっと複雑に

Chromebookが今回はUSB-Cしか無いので、ハブを介してUSB-Aにするのと、同時にPD入力対応のハブなので電源を繋いでもらいました。これでバッテリー切れは防げます。

TFW-LT2との接続は「ファミコンのカセットみたいに差し込む」って言ったんですけど、そろそろ保護者でも通じなそうなので他の言い方を考えないとダメですね。笑

ここまでしっかりと確認ができたら、まずはTFabTileのリンクを踏んでもらいます。(最初のイベントではここのリンクのターゲット設定を _blankにしてしなかったので、更に無駄な時間がかかりました。新しいタブで開かせるの大事。)

TFabTileは、まだα版なので、登録とか一切無いのですが部屋のIDを事前に複数作るということができません。よって、直前に部屋を作って、招待リンクをサイトに貼って、という作業がありました。そのうち楽になると思います。

無事に入るとこうなります。

f:id:justsize:20201004171532j:plain

手前はZoomの画面、奥はTFabTileの画面です

オンラインだけど、受講者の画面が全部把握できます!
これがもう、便利過ぎてありがたかったです。

1回目のワークショップでこのありがたさを思い知ったので、

f:id:justsize:20201004171703j:plain

何画面だ

こんな環境でやりました。
左のデスクトップPCはZoom用 (ホントはゲーミングPC)。その右のChromebookでTFabTileを出し、その画面を右端のモバイルモニターに出し、真ん中のWindowsのノートPCはプレゼンを共有するために使いました。(フォント&ビデオの関係でこれでしか出せないという罠に)

あ、もしかするとお分かりかもしれませんが、配信したのはこちら。

f:id:justsize:20201004171929j:plain

e Sports Studio AKIBAでの配信でした

まさかね、e sportsの会場で、カッターとセロハンテープ使って工作してるなんて光景が繰り広げられるとは、ソフマップの方も思ってなかったと思う。うん。

2 プログラミングをしよう

1800文字書いてようやくプログラミングですが、本当に初歩からやっていきます。

まずはmicro:bitは小型のコンピュータであること、プログラミングによって制御が可能であることを伝え、まずはMakeCodeのシミュレーターでプログラミングをします。

makecode.microbit.org

画面の「新しいプロジェクト」を押しましょう。名前はつけずに「作成」を押します。

f:id:justsize:20201004174304p:plain

題名は入れなくて良いと言わないと題名だけで時間が数分かかります

次に、「ずっと」に好きなアイコンを表示させるプログラムを作成します。

f:id:justsize:20201004175325g:plain

Hello, world!ではない

これが、スムーズにできているならサポートの必要はほぼ無いです。
まずはZoomの画面共有で見せる→やってみて→アイコンを変えたり増やしたりしてみてとつなげれば、最初から「自分の作ったプログラム」になって愛着がわきます。これを、必ずハートにしろとか言っちゃうとつまらないので、ここは自由にさせるところです。

完成したら、左のシミュレーターで意図したとおりになっていることを確認します。

そして、

「おめでとう!これで初めてのプログラミングはカンペキにできました!」と声をかけます。

え?これでいいの?って思わせたら勝ちなので、大げさに。

「じゃあ次はちょっと難しいんだけどさ、やってみる?」

次は拡張ボードがもう活躍します。そう。音を鳴らします。

f:id:justsize:20201004180039g:plain

「最初だけ」に入れる

ここでも、メロディは好きなものを選ばせてOKなのですが、オススメはニャンキャットと伝えます。(終わるまでが長いから)

あとは、「バックグラウンドでずっと」にします。次への伏線。

「ここまでやったらさ、本当にこれが動くか、やりたいよね?じゃあ、micro:bitに転送してみようか。」

ここでWebUSBでの接続を教えます。ここ最近のリニューアルでWebUSBの接続設定が、右上の歯車から、左下のダウンロードボタンの隣の3つの点に変わっているのが注意点です。これも、Zoomの画面共有でお手本を見せてからやれば、全く問題なくできます。

f:id:justsize:20201004181015g:plain

左下の 3つの点をクリックしてスタートします

TFabTileで見るときは、アイコンの変化で見分けられますので、まだできていない子には個別で声をかけましょう。

f:id:justsize:20201004181228p:plain

ダウンロードボタンの左のアイコン(接続前)

f:id:justsize:20201004181302p:plain

ダウンロードボタンの左のアイコン(接続後)

ダウンロードすると、音が鳴りまして、止める手段が無いので、子どもがオロオロします。笑

「今音を止めたいと思ったよね。よし。止め方教えます。」

f:id:justsize:20201004181623g:plain

必要感、大事。

これも、Zoomで見本を見せて、実際にやってもらう流れです。

ここはちょっと創意工夫のしようが無いので、つまらないのですっ飛ばします。

「お待たせ。では、いよいよ、最初に見たようなランタンにしていこう。光るよ!」

f:id:justsize:20201004181809p:plain

拡張機能

拡張機能を選んで、

f:id:justsize:20201004181839p:plain

NeoPixel

明らかに光りそうな、輪っかになっているところを選びましょう。

これで準備はOK。プログラムをしていこう。

まずは準備ね。難しいのでよーく見てね。

f:id:justsize:20201004182422g:plain

ここはちょっとつまずくので、ゆっくりと。

まず、P0からP1になっていないところをTFabTileで見つけたら、声をかけます。
そして、初期値の24から8に変更していないところも見つけ次第声をかけます。

これ、TFabTileが無かったらどうやって声をかけたんだろう。あって良かった…。

次、とうとう光らせるよ。

f:id:justsize:20201004182813g:plain

いよいよ光る。

これで、基本となる原型は完成。

転送した後、少し時間をあげるから、色を変えたり、もっとブロックを増やしたりしていいよーと伝えます。

(ここでいよいよ光るもんだから、必死にプログラミングするのが微笑ましいですよ!)

終わったら、紙コップをその上に載せてみようと声をかけます。

「ほら、ランタンできたよ!」

といって見せるのがこの見本。

f:id:justsize:20201004183135p:plain

センスゼロ

「君たちには、これを超える作品を作って欲しい。頼む。」

さすがにそれは超えるわ…という雰囲気を出させたら勝ちです。(ここでクオリティの高すぎる作品を見せると目標値が高すぎてできないの。言い訳。)

f:id:justsize:20201004183333p:plain

工作タイム!

もうですね、プログラミングそっちのけで工作しますよ。
10分くらい無言だったんですよ、みんな。オンラインイベントで10分も誰も喋らずにじっと工作してるって、何ですかね。笑

あとは作品発表会をして、図工の先生が作ってくれた本気の作品を見せます。

f:id:justsize:20201004183641p:plain

10分でこれって、何だこのクオリティは。

もっとやりたいー!となったところで、宿題を出しました。

「実は、もう一個、プラコップが入ってるよね。それでもう一つ作品を作って見て!それが宿題だよ!(見られないんだけど!)」

f:id:justsize:20201004183805p:plain

プラコップは安定してキレイ

例えば、こんな作品とかもできますし、

ちょっとプログラミングをがんばると、振動に反応した作品なんかもできます。

あとはさっきの変な見本でもこうするとキレイに見える。(主観

こんな風に工夫のしがいがあるのが今回のワークショップの良いところだと思ってます。要するに写経で終わらないところ。

まだまだ使っていない機能があるので、

  • 明るさが変わったら
  • 温度が変わったら
  • ゆれたら
  • P2端子に電流が流れたら
  • 無線でメッセージを受け取ったら

等々、様々なトリガーが使えます。光らせ方も、単色だけじゃなくてレインボーもできますし、この基板に空いている穴はレゴブロックの円柱のやつが丁度入るので、レゴの作品の一部にもできちゃいます!もちろん、紐を通して名札みたいに下げるのもOKです。電池ボックスを繋げばスタンドアロンで動きますから、本体のLEDに名前をローマ字で流しておいて、まわりを光らせたり、音を鳴らしたりできる無駄にテンションが上がる名札が完成しますよw

また、つまずきを察知して先回りで教えには入れたのも大きかったですね。
一度TFabTileにきちんと入れてしまえば、そのあとはこちらのペースで進められました。オンラインでのプログラミングワークショップは、もしかするとこれが必須になるかも知れません。

と言う訳で、光+音の作品を簡単に実現可能な TFW-LT2、是非お試しください…!
で締めようと思ったんですけど、前回の記事で相当売れてしまったみたいで、なんと品切れです。笑

10月中旬に再販予定だと伺っておりますので、再販されましたら是非!

ワクワクする作品が作れたら、是非教えてくださいね!