技術とエンタメと、その他・・・

主に、技術ネタ、エンタメ系のネタを書いていく予定です。また、自分が参加したイベントに関する記事も投稿予定。

#toio の #Doコン 用に作った #toioDo の作品のコードについて

はじめに

この記事は、ロボットトイ「toio」に関するコンテストである「Do!コン」 に関する話です。そのコンテストに作品を出したのですが、出した作品のコードを以下で説明していきます。

作品の関連リンク

●toioドミノボウリング | ProtoPedia
 https://protopedia.net/prototype/2248

●toioドミノボウリング( #toio #Doコン #toioDo ) - YouTube
 https://www.youtube.com/watch?v=CHE4_lzTbZE

出した作品の概要

冒頭に書いたコンテストに出した作品は「toioドミノボウリング」という名前のもので、全体の動作などは以下の動画のとおりです。

www.youtube.com

作品名のとおり「toio を動かして ボウリングのピンに見立てたドミノを倒す」というゲームになります。

f:id:youtoy:20210510020745j:plain

操作用の UI について

この作品を実行・操作するための UI は「緑の旗」と「ステージ上に置かれたスプライト 1つ」です。

f:id:youtoy:20210511002248j:plain

出した作品のコード(全体)

まず、コード全体は以下となります。

f:id:youtoy:20210510235401p:plain

以下では、作ったコードを 6つのまとまりに分けて掲載します。
6つのうち 5つはスプライトに、残り 1つは背景にコードを書いています。

スプライト用

f:id:youtoy:20210510232153p:plain

f:id:youtoy:20210510232206p:plain

f:id:youtoy:20210510232218p:plain

f:id:youtoy:20210510232229p:plain

f:id:youtoy:20210510232240p:plain

背景用

f:id:youtoy:20210510232626p:plain

実装した内容

以下に、実装した処理の概要を記載したコードのまとまり 6つの画像を掲載します。

まとまり1

f:id:youtoy:20210510234703p:plain

ここでポイントになる部分は、以下のとおりです。

  • スタート後、初期位置へ自動で動いていく(邪魔にならないよう、端のほうを動くよう導線を設定)
  • スタート時に、開始が分かりやすいように動きや声で知らせるようにしている
  • 初期位置を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている

なお、これ以降も含めて BGM・効果音関連の処理は、背景の部分にコードを書いています。

まとまり2

f:id:youtoy:20210511002838p:plain

ここでポイントになる部分は、以下のとおりです。

  • 角度を決めるゲームモードになっている間が分かりやすいように BGM を鳴らしている(先ほどの位置決めの時と異なる BGM を選択)
  • toio がいきなり外に向かって飛び出すような角度にならないよう、toio の位置を基準にして取り得る向きの範囲に制約を加えている(アークタンジェントを使った 2点間の角度計算を利用)
  • 向きとして取り得る角度の最小と最大の間を直接変化させるのではなく、角度を少しずつ変化させるようにし、ある程度は角度を狙ったところに止められるようにした

まとまり3

f:id:youtoy:20210510234736p:plain

ここでポイントになる部分は、以下のとおりです。

  • マットの外に出て動き続ける、ということがないよう、少し余裕をもった所定の範囲内で動きが止まるように制約をつけた
  • タイヤの速さは、基準となる速さと補正値の和をとるようにして、この後に出てくる「toio がいる位置によって移動する向きが変わる仕組み」を取り込みやすくした

まとまり4

f:id:youtoy:20210510234749p:plain

ここでポイントになる部分は、以下のとおりです。

  • 動き出すタイミングが分かりやすいよう、声で知らせるようにした
  • 位置決め・角度決めのゲームモードからドミノを倒すモードに変わったことが分かりやすいよう、BGM を鳴らすようにした(位置決め・角度決めと異なるもの)
  • 「toio がいる位置によって移動する向きが変わる仕組み」について、仕組みを複数のパターンから切り替えられるよう、ブロック定義の入れ替えで仕組みの変更を行えるようにした
  • 移動終了が分かりやすいように、効果音や動きを入れた

まとまり5

f:id:youtoy:20210510234802p:plain

ここでポイントになる部分は、以下のとおりです。

  • 「toio がいる位置によって移動する向きが変わる仕組み」を実装する際に、位置指定が複雑になりすぎないよう、座標を使うのではなくマスの番号を利用する仕組みにした
  • 上記の仕組みで複数のマスをまとめて指定できるように、マスの列の範囲指定を使ったり、 単純な範囲指定より複雑なパターンを使えるよう、行と列の和が偶数であるかどうかを判定する処理を使った(複数の斜め方向の列をまとめて指定するパターンを使った)

なお、この部分はユーザ自身で改造してほしい、改造ポイントと想定しています。

まとまり6

f:id:youtoy:20210510234815p:plain

ここでポイントになる部分は、以下のとおりです。

  • BGM の処理を toio の処理と並列で動かせるよう、メッセージを送る仕組みを使った
  • 複数の BGM や 効果音が重複して鳴らないよう、またうまく切り替わるよう、スクリプトの停止処理を組み合わせて仕組みを作った

まとめ

以上が、今回の作品でスプライト・背景のそれぞれに書いたコードと、その説明です。

#toio に関するノウハウのメモと余談(2021/5/4開催のもくもく会でのメモ)【 #GWアドベントカレンダー 2021/5/5 】

この記事は、2021年の GWのアドベントカレンダー 5/5 の分の記事です。

はじめに

toio の非公式のユーザコミュニティで、2021年5月4日にもくもく会を開催しました。
そのイベント中に行われた質問・回答の内容や情報共有された内容について、一部ピックアップしてメモしたのが、今回の記事の内容です。

toio の簡易マットを平らにする

「toio コア キューブ」(単体)に付属している厚紙ではない簡易プレイマットなど、折りたたまれているものを拡げて使う形のプレイマットがあります。これを拡げて使う際、「拡げたマットの折り目に toio が引っかかるが何か対策がないか?」という質問が出ていました。

それについて、「透明で薄いプラスチック製などのカードケースで、サイズが A3 のもので挟み込んで使っている」という話が出て、具体的に商品のリンクが共有されていたので以下に記載します。この 2つがイベント内で共有されていました。

Amazon | プラス SFカードケース A3 PC-003クリア 43-003 | 文房具・オフィス用品 | 文房具・オフィス用品
 https://www.amazon.co.jp/dp/B003DXWD4C

●サンデーPET | アクリサンデー株式会社  https://www.acrysunday.co.jp/product/diy-pla/diy-pet/266/

その後、100円ショップで入手できて利用できたものがあった、という情報も出ていました。

ビジュアルプログラミングでのランプの制御関連

ランプをつけてから消すまでの時間を、ランプをつけた後に決める

これは、参加者の方から出た質問に関する内容です。
「toio のビジュアルプログラミングでは、ランプをつける処理は最初に秒数を指定する必要があるが、何か別の動作時間が不定の処理があって、その別の処理が始まってから終わるまでの間だけランプをつけるようなことができないか?」というものです。

つまり、「実行してみてから処理が3秒かかるかもしれないし、5秒かかるかもしれない処理(処理を実行した後に、結果的に時間が定まるもの)」があり、「ランプをつける時点では不定の時間の間だけ、ランプが点灯するようにする」ということになります。

これを解決するための 1つの方法が、「並列処理(メッセージを送る機能)とランプを消す処理の組み合わせ」になります。動きとしては「処理時間不定のとある処理が終わらないくらいの時間ランプをつける + 処理時間不定の処理が終わったらランプを消す処理を実行する」というもので、ブロックで組むと以下となります。

f:id:youtoy:20210504152512j:plain

この例の「1秒待つ」の部分は、本来は「実行してみてから処理時間が定まる処理(そして、9秒以内には終わると見込まれるもの)」が入る想定の部分です。これにより、当初設定している 9秒より短い時間で、かつ、何らか別の処理の時間が終わったタイミングに合わせてランプが消灯される、という動きになります。

もし、この処理時間不定の処理がどれくらいで終わるか読めないという場合は、以下のようにすると良いかもしれません(どうやら、ランプをつける処理は、連続して実行すると処理と処理の間で消灯するような見え方にならないようです)。

f:id:youtoy:20210504155139j:plain

それと、以下は自分が作ったものではない別のサンプルで、キーを押下したタイミングで既に実行中だった toio 関連の処理を止めるサンプルです。

f:id:youtoy:20210504153253p:plain

ビジュアルプログラミングでのモーター制御・位置座標ベースの制御関連

短い時間間隔で動きを制御をする

質問した内容

toio DO の「つくる」のサンプルで「シンプルなコントローラーをつくる」というものがあります。
これは、アプリ上に表示された矢印アイコンを押すと toio を動かせて、アイコンを押している間だけ toio が動く仕組みで、アイコンが 1回押されるごとに 0.05秒(20ミリ秒)だけモーターを動かす処理が実装されています。

同じアイコンを押しっぱなしにすると 0.05秒分の処理が繰り返される形ですが、このとき toio の動きは小刻みな動きではなく、連続的な動きとなります。この「短い時間間隔で toio を動かす処理を連続的に実行するやり方」について「絶対位置座標指定を使う処理で似たようなことができないか?」という質問をしました。
具体的には以下のようなことを実現できるかどうか、という話になります。

  • 短い時間間隔で目標地点(目標は現在位置からすごく近い地点を指定)をどんどん変更して、絶対位置座標指定で移動させ、全体の動きを滑らかなものにする
  • 円や直線など特定の軌跡の上を正確にたどるような動きをさせる

上記 2つ目について少し補足すると、「直線上を移動させたいのなら、両方のモーターを同じスピードで動かすだけで良いのでは?」などという話に思えるかもしれませんが、実際にやってみると意図した角度とずれた方向に動いたりします。

質問への回答

自分で試しに「短い時間間隔で絶対位置座標指定を使った動作を繰り返すような処理」を作ってみると、toio の動きがガタガタしてしまっていました。そこで、そもそもそのようなことが実現できるかどうかを確認した形ですが、回答は「実現不可だが、意図した軌跡の上を動かすのは別のやり方がある」というものでした。

ちなみにこれができない理由は、「ビジュアルプログラミングの絶対位置座標指定での移動は、現在位置から目標地点までのモーター制御で加速と減速を行う仕様であるため」とのことでした。加減速が間に入りつつ動き続けるので、動きがガタガタしてしまうようです(なお、絶対位置座標指定で動く速さを遅くしてやれば、加減速が目立たず連続的に動くような感じに見える、とのこと)。

回答の続きですが、意図した軌跡の上を動かす方法の 1つは「つくる」のサンプルの STAGE 7 にある「PID制御で円運動」と似たようなことをやる、というものです。
少し補足すると、上で書いていた「直線上を動かしたいのに、意図した軌跡からズレて動く」という時に「常に toio の位置座標と意図した軌跡とのズレを比較しつつ、そのズレを補正するようにモーターの制御を動的に変える」という対応をします。

余談

今回のもくもく会で、 以下の 2つの話を見聞きしました。  ・簡易マットの上に簡易カードを置いて、簡易カードに触れたら特定の地点にたどり着いたことを判定をする仕組み
 ・クリアケースで簡易マットを挟み込んで保護

そして、その後にふと思いついて、以下のゲームを作ってみました。

www.youtube.com

使ったブロックは 11個となっています。

f:id:youtoy:20210504194448j:plain

仕組みの詳細については、以下の記事に書きました。
●#toio を捕まえるゲームを #toioDo で作ってみた【 #GWアドベントカレンダー 2021/5/5 】 - Qiita
 https://qiita.com/youtoy/items/4d024906b3238d03881f

#toio の回転動作の ON/OFF をカメラで認識した手の動きで制御(軽いお試しの概要メモ)【 #GWアドベントカレンダー 2021/5/4 】

この記事は、2021年の GWのアドベントカレンダー 5/4 の分の記事です。

はじめに

自宅にある toio の台数が、購入したもの・コンテスト関連で入手したものと合わせて全部で 6台になりました。
それで、群制御的なことをやりたかったのですがスキル・知識が足りない状況だったので、まずはこんなこと(Web Bluetooth API を使った 6台同時接続と一斉動作)を試してみてました。

そして、この toio の動作を自分の手の動きで制御できたら良いな、と思いつつ、まずは過去の以下のプロトタイプを作る時に使った両手の認識(MediaPipe Hands の TensorFlow.js実装を利用したもの)と組み合わせられないかな、と思って試したのが今回の内容です。

本当は、5/1(土)・2(日)にオンラインで開催された「子どもプログラミングパーク」というイベントで、自分が担当になっていた企画の「モノとつながる楽しいプログラミング(トーク&デモ)」という企画でデモができれば、と進めていたものでしたが、途中まで作って間に合わずという状況になったものでもあります。
なお、その企画中では Teachable Machine を使った音の機械学習と組み合わせて「回転・ぐるぐる・回れ」等と声を出すと、それに連動して 6台の toio が一斉に回転する、というデモを行っていました。

できあがったもの

ここで、今回作ったものの動画を掲載します。
カメラで認識された手の指先の距離(親指と人差し指の指先の距離)がある閾値以上になると toio 6台が一斉に回転し、その距離が閾値より小さくなると toio が動かなくなる、という内容です。

技術的な部分の軽い補足

この仕組みを実現するために使っている技術は以下の通りです。
 手の認識: MediaPipe Hands の JavaScript(TensorFlow.js)実装
 toio の制御: Web Bluetooth API

手の認識

MediaPipe Hands は、Google が提供している仕組みで、以下のページに概要が書いてあります。
 ●Hands - mediapipe
  https://google.github.io/mediapipe/solutions/hands.html
自分が使ったのは、ブラウザ上で動く JavaScript実装のものでしたが、Python等の他の言語で利用できるバージョンもあります。

本来は両手を同時に認識したり、複数人の手(3つ以上の手)を同時に認識することもできる仕組みですが、今回は片手分の認識のみを利用しています。以下で補足している toio の動作の ON/OFF のトリガーに使っている情報は、認識した手の「親指と人差し指のそれぞれの指先の位置の距離の大きさ」で、その値が特定の閾値を超えているかどうかで toio 関連の処理の ON/OFF を切り替えています。

toio の制御

Web Bluetooth API を使った toio の制御についてですが、これは以下の toio の通信仕様にある内容を使い、仕様で規定されたバイナリデータを送る等のプログラムを JavaScript で実装しています。
 ●通信概要 · toio™コア キューブ 技術仕様
  https://toio.github.io/toio-spec/docs/ble_communication_overview
 ●モーター · toio™コア キューブ 技術仕様
  https://toio.github.io/toio-spec/docs/ble_motor
動きの制御は、上記のモーターの仕様に書かれた「時間指定付きモーター制御」で、500ミリ秒の間だけ左右のモーターがそれぞれ順回転・逆回転となるように動かす命令を実装しています。そのモーター制御の命令が、上記の手の認識の結果をトリガーとして ON となった時には連続してたくさん送られるので、500ミリより長い連続した回転動作が行われる形です。

それと、上で掲載した動画の撮影前の下準備として、toio 6台とのペアリングの処理を行っています。

これらの toio 6台とのペアリング・一斉動作の ON/OFF を行うためのプログラムについて等は、以下の記事に書いてあるので、よろしければご覧ください。
 ●Web Bluetooth API で toio を 6台同時に制御する - Qiita
  https://qiita.com/youtoy/items/2fae3f4365788810215d

以上が今回の内容の、おおまかな情報です。

【Advent Calendar 2020 まとめ】2020年12月に書いたアドベントカレンダー用記事(全20記事)のまとめ【 #GWアドベントカレンダー 2021/5/1 】

この記事は、2021年の GWのアドベントカレンダー 5/1 の分の記事です。

はじめに

2019年のアドベントカレンダー用に記事を書いた後、以下のようなまとめ記事を書いていました。

●【Advent Calendar 2019】書いた全30記事(※ 後から5記事分を追加)のまとめ - 技術とエンタメと、その他・・・
 https://yo-to.hatenablog.com/entry/20191225/1577243263

2020年もアドベントカレンダー用の記事を書いていたのですが、2019年のまとめと同様にどんなタイトルのものを書いたか、ざっと記載してみようと思います。

昨年、12/25 までに 25記事書いて、その後に年内に 5記事を追加しました。
2020年も同じように、12/25 までが 16記事で、その後に 4記事を追加となっています。

アドベントカレンダーの登録先と昨年との比較

登録先

自分が登録したアドベントカレンダーが作成されていた先は、以下の 2つ「Qiita と Adventar」でした(去年も同じでした)。

qiita.com

adventar.org

数としては、Adventar のカレンダーが 3つで、残りは Qiita のカレンダーでした。

昨年との比較

昨年と今年で記事を投稿したカレンダーのテーマと、投稿した記事の数は以下のとおりでした。

f:id:youtoy:20210502165730p:plain

2019年のように毎日1記事のペースで書くのは厳しそうだったので、当初の予定では 10記事に満たない記事数になるはずでしたが、終わってみたら 20記事を書いた形になりました。
書いたネタというか、登録先のカレンダーのトピックは、2019年と同じものもあれば 2020年に新規に登録をしたトピックのものもありました。

12/25 までにアドベントカレンダー用に書いた記事の一覧

12/1 ベストバイガジェット

●【ベストバイガジェット2020】自宅の無線LAN環境をパワーアップ!: TP-Link Deco X20(2-pack) Wi-Fiルーター(2020/12/1) - 技術とエンタメと、その他・・・  https://yo-to.hatenablog.com/entry/20201201/1606748700

12/3 micro:bit 2020

●【micro:bit 2020】 新バージョンの micro:bit(v2)で micro:Maqueen、micro:bit用GROVEシールド v2.0、Scratch連系を試す! - Qiita  https://qiita.com/youtoy/items/11a49f22e9fa7bb1ffeb

12/5【1つ目】 NoCode

●【NoCode 2020】 IFTTT Pro の新機能 3つ(クエリー・フィルター・複数のアクションの実行)の内容をチェックしてみる! - Qiita  https://qiita.com/youtoy/items/a5e70c1dbf1c78eb94fa#%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%BC

12/5【2つ目】 スマートスピーカー

●【スマートスピーカー 2020】 IFTTT で Alexa・Google Assistant を利用して IFTTT Pro の新機能(クエリー・フィルター)との組み合わせも試す - Qiita  https://qiita.com/youtoy/items/ab6747622d137fcadead

12/6 obniz

●【obniz 2020】テキストプログラミングを自分で書かず Node-RED と #obniz を組み合わせて使おうとしてみる(obnizOSも利用) - Qiita  https://qiita.com/youtoy/items/9d00ab9e87720e7f6a2f

12/10 toio

●【toio 2020】 #toio のシェイク検出の情報を Web Bluetooth API で受け取り Smoothie Charts(smoothie.js)でリアルタイムにグラフ化 - Qiita  https://qiita.com/youtoy/items/82cf0e90e11bf68c0507

12/13【1つ目】 toio

●【toio 2020】 #toio 2台をコントローラー的に使うために姿勢検出の情報を Web Bluetooth API で受け取ってみる - Qiita  https://qiita.com/youtoy/items/12360dc5d2236f803fbe

12/13【2つ目】 IoTLT

●【IoTLT 2020】 micro:bit を使った IoT(Grove - UART Wifi V2 との組み合わせ、IFTTT利用) - Qiita  https://qiita.com/youtoy/items/459289951134544e73eb

12/14 Node-RED

●【Node-RED 2020】ダッシュボードで LED表示と表組みでの情報提示(天気情報の表示も) - Qiita  https://qiita.com/youtoy/items/0f04ff829fb21e79892d

12/17【1つ目】 ライブ配信

●【ライブ配信 2020】今年のコミュニティでのイベント事情とオンラインイベント・配信の話のあれこれ(便利そうな仕組みの試作なども)|豊田 陽介|note  https://note.com/youtoy/n/n438f4921f1de

12/17【2つ目】 NoCode 2020

●【NoCode 2020】IFTTT Pro の新機能活用を模索: Googleカレンダー連携をクエリーで使う方向性(まだ模索中) - Qiita  https://qiita.com/youtoy/items/8439d987ec07aadf1329

12/19 JavaScript

●【JavaScript 2020】PubNub を使ったリアルタイム通信を試してみる(JavaScript を利用) - Qiita  https://qiita.com/youtoy/items/f3ada57fccbf57cfff60

12/20 enebular

●【enebular 2020】 #enebular の InfoMotion によるグラフ表示を試してみた!(PubNub との組み合わせ) - Qiita  https://qiita.com/youtoy/items/b6ffb2b48858a09955ca

12/21【1つ目】 CoderDojo

●【CoderDojo 2020】 DojoCon Japan 2020 のセッション登壇とワークショップの準備の話 - 技術とエンタメと、その他・・・  https://yo-to.hatenablog.com/entry/20201221/1608479618

12/21【2つ目】 JavaScript

●【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 ( #M5Stack )への文字の送信 - Qiita  https://qiita.com/youtoy/items/3da58570972803134f6c

12/23 Seeed UG

●【Seeed UG 2020】 Wio Terminal のバッテリーベースの情報を見たり Web Bluetooth API と連携させるための準備をしたり - Qiita  https://qiita.com/youtoy/items/715eb8acebbc0b44a3a5

※追加: 【17記事目】JavaScript

●【JavaScript 2020】 CodeceptJS でファイルのダウンロード - Qiita  https://qiita.com/youtoy/items/7e1c398c29e07f8bd79b

※追加: 【18記事目】JavaScript

●【JavaScript 2020】音声ファイルの可視化をブラウザ上で簡単に試す(Web Audio API) - Qiita  https://qiita.com/youtoy/items/b69597499268a4a438e8

※追加: 【19記事目】NoCode

●【NoCode 2020】 MQTTブローカーの shiftr.io と IFTTT の Webhook をつなぐ(shiftr.io の HTTP Interface) - Qiita  https://qiita.com/youtoy/items/c690e2f1aa064e6dd289

※追加: 【20記事目】JavaScript

●【JavaScript 2020】 MQTT で受信したデータを Smoothie Charts(smoothie.js)以外でリアルタイムにグラフ化: Chart.js とプラグインを利用 - Qiita  https://qiita.com/youtoy/items/252f255c9d794bf3d964

【CoderDojo 2020】 DojoCon Japan 2020 のセッション登壇とワークショップの準備の話

この記事は CoderDojo Advent Calendar 2020 の 21日目の記事です。

はじめに

DojoCon Japan への参加について

昨年のアドベントカレンダーに登録した記事で書いた「#DojoConJapan」。自分にとって、その時が初参加でした。

●【CoderDojo 2019】#DojoConJapan に初めて参加して(2019/12/23) - 技術とエンタメと、その他・・・
 https://yo-to.hatenablog.com/entry/20191223/1577112775

2020/12/27(日)にオンラインで開催される「DojoCon Japan 2020」は、以下のセッション登壇(以下の画像の向かって左)ワークショップ(以下の画像の向かって右)の担当の 2つの内容で参加することになったので、それに関する話を書こうと思います。

f:id:youtoy:20201220222903j:plain

【余談】 2018年のアドベントカレンダーで書いた記事

余談ですが、アドベントカレンダーという話題に関し、2018年のカレンダーにも記事を登録していました。その時は以下のようなタイトルの内容を書いていました。

●#CoderDojo に関わりはじめて【CoderDojo Advent Calendar 2018】 - 技術とエンタメと、その他・・・
 https://yo-to.hatenablog.com/entry/20181105/1541422829

セッション登壇の話

今回「各地で活動して得られた経験、デモや紹介をしたあれこれ」というタイトルで、12/27(日)の 14:00-14:20 でセッション登壇をさせていただくこととなりました。

登壇の話をもらった流れ

この話は、10月の初めの週末に東京ビッグサイトで開催されていたイベント「Maker Faire Tokyo 2020 | Make: Japan」に、自分も共同主催者の 1人となっている toio のユーザコミュニティで出展していた中、会場内で「依頼をするかもしれない」という頭出しをもらいました。

ちなみに、展示では「toio + ビジュアルプログラミング」・「toio + Teachable Machine を使った音の機械学習(制御は Web Bluetooth API を利用)」を使った作品を展示していました。

(余談が多くてすみません・・・)

その後、この記事の後半で記載しているワークショップの担当の話をいただいた際に、頭出しされた話がどうなったか確認したところ、正式に実施となった話を聞けました。

その際、セッションの企画をされていたチームからは「講演内容案: 複数 Dojo の参加して得られた知見・違い、心がけていることなどについて」という提案をいただいていました。

プロフィールや概要を作る段階で見返したこと

今回のセッション紹介のページで、自分の関係する部分には以下の内容が書かれています。

  • 年40回以上のペースでメンター参加し
  • 20以上の Dojo に参加
参加した Dojo の話

今回の依頼をいただいた際に、「複数 Dojo の参加して」という部分がセッション企画のチームからの提案内容のポイントになっていたようでした
それを具体化しておこうと思い、普段参加するイベントに関してメモをしているもの(CoderDojo に限らず、主に技術系のイベントにたくさん参加しているため、メモしてまとめておかないと情報を覚えきれないという背景により作っているもの)を見返して、このあたりの数字が出てきました。

その細かい部分を登壇に何らか含めるかは、時間や全体構成を見つつ考え中ですが、ここでは記載してみようと思います。

コロナ禍の前後のどちらかで初来訪した各Dojo や、複数合同で開催されていたイベント、それと Dojo 主体のイベントではないものも含めた各地の Dojo との出会いについて書いてみようと思います(順不同)。

  • コロナ禍以前に初来訪
    • 東京
    • 埼玉
      • さいたま
      • 複数の Dojo 合同(でかドージョー)
    • 神奈川
      • 横浜
      • 小机
      • 保土ケ谷
      • 鴨居
      • 長津田
      • 複数の Dojo 合同(でかドージョー)
    • 千葉
      • 複数の Dojo 合同のイベント(@柏)
  • コロナ禍以後に初来訪
    • 愛媛
      • 伊予
    • 愛知
      • 瀬戸
      • 瑞穂
    • 三重
      • 伊勢
    • 埼玉
      • 新座志木
    • 神奈川
  • コロナ禍以前で見学等を行った 上記以外のイベント等
    • 関西
      • 複数の Dojo 合同イベント(@吹田)
    • 中四国
      • 広島・山口の Dojo が展示をしていたイベント(@広島)

こうして書きだしてみると、いろいろな思い出などもよみがえってきました。

参加ペースの話

年間での参加のペースについて、4半期ごとの回数を2019年1月からの期間で書きだしてみました。

  • 2019年:
    • 1〜3月 12回
    • 4〜6月 10回
    • 7〜9月 10回
    • 10〜12月 9回
  • 2020年:
    • 1〜3月 6回
    • 4〜6月 19回
    • 7〜9月 9回
    • 10〜12月 10回

ここで、2020年1月〜3月の回数が少ないですが、これは新型コロナウィルスの影響が出ている部分です。
そして、2020年4月〜6月の回数が突出して多いのは、オンライン開催の試行錯誤がこの時期に多く行われていた影響と思われます。各月での参加数は、以下となっていました。

  • 2020年 4〜6月
    • 4月 5回
    • 5月 7回
    • 6月 7回

そして、コロナ禍の前も後も、週末に複数の Dojo に参加するようなことをよくやっているのですが、記録を見ていた時に週末に4つの Dojo のイベントに参加したという記録がこの期間にありました。

  • 4/11 午前 瀬戸
  • 4/11 午後 オンラインCoderDojo
  • 4/12 午前 瑞穂
  • 4/12 午後 伊勢

全てが関東以外の Dojo への参加となっていて、オンライン開催があってこその状況でした。

ちなみに、コロナ禍前の記録では週末 3つが参加数の最大で、以下など複数回ありました。

例えばこのような感じだったり、

  • 3/30 午前 御茶ノ水
  • 3/30 午後 さいたま
  • 3/31  でかドージョー in 横浜 vol.2

他に以下のような感じです。

  • 9/14 午前 小机
  • 9/14 午後 西新宿
  • 9/15 午後 池袋

東京・埼玉・神奈川をまたいで、物理的な移動をしつつの参加を伴って、という感じでした。

このように様々な Dojo に参加させていただいた際の話を、思い出しながらお話しできればと思います。

担当するワークショップの話

この記事の前半で書いたセッション登壇とは別に 12/27(日)の 15:10 - 16:10 の時間でワークショップを 1つ担当する予定です。

ワークショップに関する話をもらった流れ

上記のセッション登壇の可能性について頭出しをいただいた話とは別に、ある日「DojoCon でオンラインのワークショップのファシリテーションを」という連絡をいただきました。こちらは、何のワークショップとなるイメージであるかは大まかに「体や道具を使った体験 アンプラグド、Scratchのモーションセンサーなどの担当」という案をいただいていました。

そして、過去に自分がやってきた内容を頭に思い浮かべつつ、オンラインの実施でイメージがぼんやりと浮かんだ「Scratchのビデオモーションセンサー」で進める予定で回答をしました。

過去にビデオモーションでやったこと

今回の自分が担当のワークショップで扱うビデオモーションセンサーについて、今まで CoderDojo でメンターをやってきた中で、作品をいくつか作ってデモをしたり Dojo に参加しているニンジャの子達に作品を体験してもらったりしてきました。

それら全てを公開できてはいなかったりするのですが、いくつか公開しているものをここに掲載してみます(埋め込みコードだとカメラがうまく動かなそうだったので、リンクやリンク+アニメーションGIF を掲載して、体験する場合は Scratch のページを見ていただく形にしています)。

作品1: ボールを跳ね返す

以下の作品は、自分の地元である愛媛県Dojo である CoderDojo伊予 に参加した際に作ってみたものです。
内容は、複数のボールのスプライトが画面の一方から他方へ動いており、それに触れた場合に効果音が鳴ってボールが動いていた方向と反対の方向へ跳ね返るというものです。
 https://scratch.mit.edu/projects/400449080

f:id:youtoy:20201220234150g:plain

作品2: たくさんのスプライトの色を変化させる

以下の作品は、クローンをしたたくさんのスプライトにビデオモーションセンサーに関する処理をつけて、動きのある部分を可視化してみようとしたものです。ビデオモーションセンサーで単純な動きを検知するだけでなく、もう少し複雑な動きの検出ができそうかを試そうと思って作ったものです。
 https://scratch.mit.edu/projects/408170139

f:id:youtoy:20201220234454g:plain

作品3: ボールを消す

そして以下の作品は、画面に下へ落ちるボールがたくさん出てきて、それに触るとボールが効果音とともに消えるというものです。上で掲載していた作品を作る前に、見た目と音の両方でフィードバックをする仕組みを試そうとして作ったものです。
 https://scratch.mit.edu/projects/305196069/

他に試作した作品や全体の話

この他にビデオモーションセンサーを Dojo のニンジャの子達(参加者の子達)に体験してもらうため、画面に動物や楽器のスプライトを配置して、それに触ると鳴き声したり楽器の音が鳴ったり、というものを作ったりしました。

ここまで紹介したどの作品も、基本的には、ビデオモーションセンサーで動きを検出し、その動きに対するフィードバックを音や見た目にわかりやすい変化で示す、という構成にしていました。
このフィードバックのやり方を色々変えることで、楽しそうな何かができないかと、試行錯誤した感じでした。

ワークショップの方向性

自分が担当する Scratch のビデオモーションセンサーを使ったワークショップの申し込みページは以下になります。

●[ワークショップ] Scratch ビデオモーションセンサー - DojoCon Japan | Doorkeeper
 https://dojocon-japan.doorkeeper.jp/events/114692

今回、セッション登壇もあったため、大規模にする方向は準備に確保できそうな時間などを考えると難しそうだったため(複数の方にサポートいただいて、参加人数を多くするという方向にすると、事前にサポートいただくメンバーとの情報共有や調整が各種発生して、その時間が十分にとれるか怪しかったため)、基本的に自分 1名で対応可能な内容・規模で進めることにしました。

また、今回のワークショップは初心者向けで組み立てていますが、時間は60分の長さとなるよう調整させてもらいました。
これは、Scratch 自体も初めてという子が多い場合は、Scratch の使い方自体のフォローから始めて、ビデオモーションセンサーの部分を複雑すぎない内容でポイントになる部分を体験できるようにしたり、というやり方もできるように想定してのことです(30分枠だと、Scratch 自体も初めての子が多い場合に状況によって時間が不足して、破綻しそうな予感があったため)。
時間に関わる部分の話では、参加する子達の中に Zoom の操作にそこまで慣れてない子がいた場合に、最初にアイスブレイクも兼ねて Zoom の操作(ワークショップで使いそうなミュートや画面共有)をしつつコミュニケーションをする、ということも想定していて、これをやる場合にも時間があると良さそうというのがありました。

まとめ

昨年、初めて参加した DojoCon Japan。
今年はオンライン開催になり、またセッションとワークショップを担当させていただくこととなって、昨年とは関わり方・参加の仕方が大きく変わることになりました。

そのような変化がありながら、本番に向けた準備が両方とも残っている状態ですが、締切のぎりぎりまで試行錯誤をしてみようと思っています。

登壇準備をするために CoderDojo の活動を振り返って出てきた話

今回、セッション登壇で紹介すると書いた内容の中に「各地のDojoで紹介してきた、様々なプログラム・ガジェットを使った作品」というものがあります。 この候補をあげていくなかで出てきた作品を、ここでいくつか掲載してみようと思います。
(ちなみに、この記事の最初のほうで掲載した toio を使った展示作品も、紹介するかもしれない候補ではあったりします)

ビデオと機械学習を使ったものの試作

以上の話は公式の Scratch を使った話でしたが、それ以外に @jishiha さんが公開されている機械学習などの独自機能が追加された Scratch である「 stretch3.github.io 」でも、カメラを使ったものを試作したりしています。

ビデオモーションセンサーでは実現できない、「手や顔の位置・細かな動きに連動するような仕組み」を作ったりすることができます。

手の検出: handpose2scratch

顔の検出: facemesh2scratch

画像の機械学習ml2scratch

「何かの作品を作っている」というよりは、「何か作品を作るための前準備として、どんな機能が作れそうか試す」という感じのことをあれこれやっています。

個人的には、カメラを利用するものではない「 stretch3.github.io 」の独自拡張機能もこれまで色々試していて、Scratch の上で楽しいことができそうな方向の話は今後も追いかけていきたい部分です。

Scratch に IoT の仕組みを組み込んでみた話

上記の @jishiha さんが作られていたような、Scratch に独自の機能を組み込む話は、自分も少しやってみました。

IoT の話で良く登場する通信のやり方で「MQTT」というものがあるのですが、それを Scratch に組み込んでみて、スマートフォンや小型のデバイス上で行った操作を Scratch に反映させる、ということをやってみました。

この事例だと、micro:bit 連携やクラウド変数で似たようなことができそうな例になってしまっているのですが、それらの機能ではできないことも実現できるはずなので、何か面白い作品を考えられればと思っているところです。

HackforPlay でやってみたこと

普段の CoderDojo の活動では、Scratch や micro:bit 関連のサポートをしていることが多いのですが、それ以外に HackforPlay(ハックフォープレイ)関連も対応することが増えました。

その中で、いくつか作ってみたものがあるのですが、その 1つを紹介してみます。こちらは、標準機能ではないものを JavaScript のプログラムで書いてみたもので、ニコニコ動画風にコメントを表示させる、というものです。

これは、元々はオンラインのイベントが増える中、そこで使えそうな仕組みを自作してみようとしたものがあり、それを HackforPlay にも組み込めるか試してみた流れでした。

そして、せっかく自作したので、他に既に出ていた同じ機能を持つアプリにない機能を足してみたりしていて、例えば LINE アプリで入れたコメントが画面にながれる機能を足してみたりしました。