M5Stack ワークショップ「M5いろさがし」at DojoCon Japan 2024
みなさん、こんにちは！マーケチームのすどうです。今日は、寄稿いただいた記事をご紹介します。M5Stackのワークショップについて書いて頂いています。
airpocketさん、ありがとうございます！
全国のSwitch Scientistの皆様こんにちは。自称Switch Scientist、プログラミングやものづくりなどのメイカー活動をしているairpocketと申します。
日頃からSwitch Scienceさんで購入した部品を使ってものづくりを楽しんでいるのですが、ご縁があってお誘いいただきましたので、先日開催したM5Stackを使ったワークショップについてご紹介したいと思います。
DojoCon Japanとは
9月15日に開催されたDojoCon Japan 2024の企画の一つとして、M5Stackのワークショップを開催させていただきました。DojoCon Japanとは日本のCoderDojoコミュニティーメンバーがあつまる年に一度のカンファレンスイベントです。
CoderDojoとは、子ども達にプログラミングを学ぶ場を提供するボランティア主導の世界的な非営利活動で、娘のotamaも地元のDojoに昨年から参加しています。今年のDojoConが運よく地元岡山で開催されたため、娘と一緒に参加しました。
ここでご紹介するワークショップのほかにもいくつかの企画に参加しており、娘が作成したmicro:bitやM5Stackを使った作品を多数展示させていただくなどしました。
テーブル二つを使って贅沢に展示させていただきました
M5Stackを使っていろさがしゲームを作ろう！
ワークショップの題材には小学5年生のotamaが作り、今年のM5Stack Japan Creativity Contest2024にもエントリーした「M5いろさがし」という作品を選びました。
この作品はM5StickC PlusとM5Stackカラーセンサーを使った二人対戦ゲームです。ゲームをはじめるとディスプレイ上部にお題となる色が表示され、プレイヤー１と２が身近にあるものの色を読み取ってお題の色に近かった方が勝ちというゲームです。
M5いろさがし
「M5いろさがし」は、UIFlowというM5Stack専用のブロックプログラミング環境で開発しているため、同じくブロックプラミング言語であるScratchの経験があれば抵抗なく参加できる内容になっています。参加の目安は「Scratchでプログラミングができる」としました。
今回のワークショップには8セットの機材を用意し、CoderDojoのニンジャ（参加している子どもたちをニンジャとよびます）達からチャンピオン（Dojoの主催者）まで幅広い年齢層、スキルレベルの人たちに参加していただきました。
ワークショップの様子 写真提供: DojoCon Japan 実行委員会
準備はとにかく念入りに
そもそも私は、ワークショップの企画も進行も初めての経験なので、参加者の方々にうまく伝えることが出来るか、時間通りに終了できるか、機材トラブルなく勧められるかなど内心ひやひやしながらのスタートです。制作者のotamaさんにもメンターとして手伝ってもらいました。
ワークショップの内容は、作品・M5Stackの紹介と実際のプログラミングです。進行用の資料として完成品のコードとワークショップ内容はGitHubにアップし、ワークショップ中にも自由に参照していただける様にしました。
説明がつたなくても資料を見て好きなペースで進めてください、というスタイルです。
ワークショップのリポジトリは公開していますので、興味のある方は是非ご利用ください。
GitHubリポジトリ
一番心配したのはネットワークトラブルですが、帯域や同時接続数は十分に余裕を持って設定していただきました。DojoConの実行委員の方々はみなさんボランティアですが、様々な技術者のあつまりなので、会場のネットワーク環境などもプロ機材持ち込みでセッティングしていただき非常に心強いです。
ワークショップの時間が1時間と限られていたため、ファームウェアの書き込みとネットワーク設定は前日までに済ませてプログラミングに集中してワークショップを進めました。
初めてのM5Stack
ワークショップには４名のニンジャと各地のDojoのチャンピオンやメンター３名の計７名の方に参加していただきました。
みなさんM5Stackを触るのはほぼ初めて、特にM5StickCの小さな筐体にディスプレイやバッテリーなどが詰め込まれていることには驚かれている様子です。
資料を確認しながらコーディングを進めるニンジャ
写真提供: DojoCon Japan 実行委員会
M5Stackの魅力のひとつは小さな筐体のなかにさまざまな機能が盛り込まれていることですが、実際に触ってもらわなければなかなか伝わりません。ファクトリーテスト用のファームウエアを見るだけでもその機能の一端に触れられるのですが、今回は時間が限られているため多数の周辺機器や開発環境などを含めたM5Stackエコシステムについて軽く（熱く）触れて、ワークショップを進めました。
ただの写経になってしまうと楽しさ半減ですので、完成品のゲーム内容についても説明し、進めている作業やプログラムがどのような役割を果たすのかをイメージしてもらえるよう心がけます。
ワークショップ最大の難関
M5Stackワークショップの大半の時間はUIFlowによるコーディングです。今回のワークショップの参加要件は「Scratchでプログラミングができる」程度としましたので、ニンジャ達はブロックプログラミングやロジックの組み立てに一定程度経験があります。
初めて触るUIFlowをすぐに使いこなす事はそれなりに難しく、最初は戸惑いつつコーディングを追いかけている様子でした。
一方で、普段からニンジャ達にプログラミングを教えているチャンピオン達はすぐに勘所をつかんでくれますので進捗に大きな隔たりが生じてしまいます。
本来であればスキルレベルごとにグループを分けるなどしたいところですが、今回はそうも行かなかったため、先に述べた様にワークショップ資料をGitHub上に公開し、チャンピオンの方には資料に沿って先に進んで頂きました。
スキル差による進捗スピードの差はある程度想定して対策を考えていましたが、想定以上の差が生じてしまいました。
ワークショップ企画時にはプログラミングが自在にできるチャンピオンであれば30～40分、初めてUIFlowを触るNinjaであれば50～60分程度の所要時間と見積もっていました。しかしながら、チャンピオンの方々はおおむね想定通りのスピードで進捗し完成まで進んでいただけましたが、ニンジャ達はバグを作ってしまうと大幅に遅れが生じるケースが見られました。
今回のワークショップでは、資料を参照できる様にするほか、プログラムの製作を「UIをつくってセンサを動かす」前半部分と、「ゲームロジックを追加する」後半部分に分けて、前半部分だけでもM5Stackを動かす体験が出来る様に構成していました。
途中、かなり冷や汗をかきましたが、前半部分まではワークショップの時間内に進めることが出来、参加者みんなにM5Stackが動くところを体験していただけてほっと胸をなでおろしました。
コードをM5Stickに書き込んで動作確認、動いた！
写真提供: DojoCon Japan 実行委員会
今回のようなコーディングのワークショップでは、参加者のスキルレベルを揃えること、ある程度マイペースで進められる様、資料を事前に共有しておくことが重要だと感じました。
公開している「M5いろさがし」ワークショップであれば、プログラミング経験者は45～60分、子ども向けは120分程度を想定するのが良さそうです。
また、デバッグにかかる時間は計算しづらいため、メンターを多く用意してデバッグ時にはマンツーマンで対応できる体制がとれるとなおよさそうです。
「Scratchの次」としてのM5Stack
CoderDojoに限らず初めてプログラミングを学ぶ場合、Scratchを使って学び始めることが多いかと思います。
このワークショップでは「Scratchの次」の段階としてM5Stackを選択肢の一つとして提案するために企画しました。
「Scratchの次」の環境にどのようなものが適しているかと考えると選択肢はとても沢山あって、正解は「子ども次第」ということになろうかと思います。
ゲームが好きな子であればMincraftやROBLOX、一足飛びにUnityで大人顔負けのコーディングに取り組む子もたくさんいる様です。ものを動かすことに興味がある場合はmicro:bitやLEGOが選ばれやすいでしょうし、Processingでクリエイティブコーディングに進むのも楽しそうです。
M5Stackはブロックプログラミング可能なマイコンボードという意味でmicro:bitにとても近い立ち位置にありますが、子ども用の教育機器として次のような特徴が大きなメリットになりそうです。
- ディスプレイがついていて表現力が高い。
- ボトムパーツやユニットによる拡張性が非常に（異常に？）高い。
- LEGOパーツを利用して容易に工作可能
今回のワークショップでも、micro:bitとくらべてM5Stackにはどのようなメリットがあるのか？という質問を頂きました。
いろいろな角度で比較できるかと思いますが、M5Stackはハード開発を最小限に抑えてアプリケーションやソリューションを実現できるエコシステムの多様さが最大の強みだと感じています。ソフト開発環境の面でもUIFlowを使えば最新のセンサユニットであってもライブラリ探しに時間を割くことなく即座に開発に取り掛かれます。
子どもたちが思い描いたアイデアを実現する際、どこから手を付けたらいいか判らないという状態を減らして、ものづくりに集中しやすくなる環境はとても貴重ではないかと感じています。
「M5いろさがし」は、
- M5StickCという比較的安価なマイコンボードを使用し
- カラーディスプレイとオンボードボタンでリッチなUIを実現
- カラーセンサとの接続はGroveケーブルのみ
- 複雑なライブラリはUIFlowがラッピングし開発が容易
というM5Stackで得られるメリットをうまく生かした構成になっており、M5Stack体験の入口としても良い題材だったのではないかと思います。
お父さんと一緒にデバッグ。この後、父の威厳は無事守られました。
写真提供: DojoCon Japan 実行委員会
おわりに
今回は、DojoConJapanというとても楽しいイベントに深くかかわることができてとても貴重な経験が出来ました。娘と一緒にこんなイベントに参加できるのもあと数年かな？などと思いつつ、楽しかったイベントを振り返りながらこの記事を書かせていただきました。
この様な機会を頂いたDojoConJapanの皆様、Switch Scienceの皆様に改めて感謝致します。ありがとうございました。
小さなお子様をお持ちのSwitch Scientistの皆さん、もしこの記事に興味を持っていただけたなら是非一緒にDojoConやCoderDojoに参加してみませんか？
おまけ
この記事を書いている間にM5Stack Creativity Japan 2024の結果が発表され、記事中でご紹介した「M5いろさがし」が学生優秀賞を受賞しました。ありがとう御座います。
M5Stack楽しいですよ、来年のM5Stack Creativity Japan 2025にも親子参加したいですね。