Zenn
💡

UIFlowを使った小学生向けのオンラインワークショップを実施する

2022/02/07に公開
#
M5Atom
#
lチカ
#
uiflow
#
workshop
#
小学生
idea

こんにちは。　ボーイスカウト練馬第１０団　ビーバー隊長の阿部です。
コロナ感染の第六波の対応で小学生たちと集まって遊ぶ機会を当団でも自粛してます。
（２０２２/2現在）

それでも遊びを諦めないのがオ・ト・ナ。　
ということで、うちの隊で先日実施したM5Atomを使ったオンラインワークショップの準備、手順をシェアします。
子供たちみんなと遊びたいけどオンラインしか使えない時に参考にしてください。

1.準備するもの

1.1.ホスト側の環境

  • インターネットに接続できる無線LAN環境
  • パソコン（私の場合はMac）
  • USB-CtoUSB-Cのケーブル：M5AtomLiteとMacを繋ぐため
  • 給電用のUSBハブ
  • ライブ中継用のスマホ
  • 定点撮影用のスマホホルダー

1.2.参加世帯に一組ずつ準備

1.3.参加者に準備いただいた環境

  • Zoom利用可能な端末
  • UIFlow(http://flow.m5stack.com)に接続可能なパソコン・タブレット
    上記を１台でまとめている世帯もありました。

2.M5Atomのセットアップ

2.1 M5burnerのインストール

リンク先の記事を参考にしました。　ありがとうございます。
https://zenn.dev/saitotetsuya/articles/m5stack_m5burner

2.2 UIFlowの書き込み

  • パソコンにM5Atomを繋ぎます。

  • m5Burnerを起動します。

  • 送信先を"/dev/tty.usbserial-*****"に変更します。

  • M5AtomLite用のUIFlowをダウンロードします

  • UIFlowをBurnします。

  • 利用可能なWifiのSSIDとパスワードを入力してStartを押下してください。

  • 無線LAN接続が成功するとLEDが緑色に点灯します。
    赤色だと失敗なのでSSIDとパスワードを再設定してください。

2.3 Api Keyの確認

  • Configureボタンを押下してApiKeyを確認します。

  • ApiKeyはUIFlowで操作する際のパスワードになりますので記録しておいてください。

  • Start ModeをInternet ModeにしてSaveボタンを押下します。

3.UIFlowのテスト

-　右上の設定メニューを選択します。

  • ApiKeyを設定しM5AtomLiteのアイコンを選択しOKボタンを押下します。

  • コマンドから本体LEDを選択して「LEDバーの色を○にする」のブロックをググッと掴んで動かします

  • Setupの凸とLEDブロックの凹がくっつくようにブロックを動かします。

  • カチャーンと合体したらRunボタンを押下します。

  • 光りましたね！　

UIFlowの動かし方はこのエントリでは説明しないので本家の説明などご覧ください。
https://m5stack.github.io/UIFlow_doc/ja/

4.NeoPixel LEDの接続とテスト

  • LEDとM5AtomLiteをGroveケーブルを繋いで動作テストします。

5.参加世帯への案内

  • オンラインミーティングのURL

  • UIFlowへの接続テスト
    https://flow.m5stack.com/　に接続できるか各世帯に事前確認します。

6.当日の取り進め

  • M5Atom Liteを接続したLEDを人数分、レイアウトします。（今回はセロテープで止めました）

  • M5Atom LiteをUSBハブ経由でコンセントやバッテリーに接続します。

  • Zoomの１チャンネルをLEDのライブ中継にするため、スマホをホルダーで固定してLED会場を常時撮影します。

  • UIFlowで各機を制御できるか確認して、準備OKです。

  • 実際にプログラムを作る前に光の三原色を説明しました。

  • 次に参加者それぞれが作りたい色と赤青緑を何点にするかそれぞれに聞いてみます

  • この後、実際に私がUIFlowでプログラムを組んで、自分の決めた数値が好きな色になったか確認してもらいました。

  • 次に参加者それぞれでUIFlowを使ってLEDを制御してもらうため、APIKeyを伝えます

  • 今回はLEDのブロックとタイマーのブロックを組み合わせて光のパターンを作ってもらいました。

7.振り返り　改善点

各参加者へのUIFlowの使い方指導が必要だったので、ワンオペは破綻しましたが
時間は余裕を持たせていたので、なんとか参加者全員、LEDを点灯できました、

今後は２,3世帯に１名サポーターをつけてトラブルが発生したらブレイクアウトルームに
移動してもらおうと思います。
（もう野外活動自粛がないことを願いますが。）

8.スカウト募集

ボーイスカウト練馬１０団ではどんな時でも楽しい遊びを探求するスカウトを募集しています。
https://www.scout.or.jp/tokyo/nerima10/
気になったら見学にきてください。

Discussion