【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つの内容で参加することになったので、それに関する話を書こうと思います。
【余談】 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 を利用)」を使った作品を展示していました。
会場内で、まずは作品を一つ動作させてる。#MFTokyo2020#toio #toiotomo pic.twitter.com/Vwr77Jp9CW
— you (@youtoy) 2020年10月3日
会場内で、二つ目の作品をも動作させてる。大丈夫そう!#MFTokyo2020#toio #toiotomo pic.twitter.com/dvQnTGJ0b0
— you (@youtoy) 2020年10月3日
(余談が多くてすみません・・・)
その後、この記事の後半で記載しているワークショップの担当の話をいただいた際に、頭出しされた話がどうなったか確認したところ、正式に実施となった話を聞けました。
その際、セッションの企画をされていたチームからは「講演内容案: 複数 Dojo の参加して得られた知見・違い、心がけていることなどについて」という提案をいただいていました。
プロフィールや概要を作る段階で見返したこと
今回のセッション紹介のページで、自分の関係する部分には以下の内容が書かれています。
- 年40回以上のペースでメンター参加し
- 20以上の Dojo に参加
参加した Dojo の話
今回の依頼をいただいた際に、「複数 Dojo の参加して」という部分がセッション企画のチームからの提案内容のポイントになっていたようでした それを具体化しておこうと思い、普段参加するイベントに関してメモをしているもの(CoderDojo に限らず、主に技術系のイベントにたくさん参加しているため、メモしてまとめておかないと情報を覚えきれないという背景により作っているもの)を見返して、このあたりの数字が出てきました。
その細かい部分を登壇に何らか含めるかは、時間や全体構成を見つつ考え中ですが、ここでは記載してみようと思います。
コロナ禍の前後のどちらかで初来訪した各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
作品2: たくさんのスプライトの色を変化させる
以下の作品は、クローンをしたたくさんのスプライトにビデオモーションセンサーに関する処理をつけて、動きのある部分を可視化してみようとしたものです。ビデオモーションセンサーで単純な動きを検知するだけでなく、もう少し複雑な動きの検出ができそうかを試そうと思って作ったものです。 https://scratch.mit.edu/projects/408170139
作品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
@jishiha さんの Stretch3 の拡張機能、Handpose2Scratch を使って、画面内のネコを指でつまんで動かせるようにしてみるテスト。 pic.twitter.com/7dueUADGDF
— you (@youtoy) 2020年10月5日
@jishiha さんの Handpose2Scratch を使った、指でつまんで Scratch内のネコを動かした動画の件、
— you (@youtoy) 2020年10月6日
当初は手でつかむ動作でやろうとしていたため、手を開く/握るの判定や、それと合わせて指の本数を認識する処理を作ってました。
その動画です(動画後半は、handposeの認識結果が重畳されたもの)。 pic.twitter.com/edG0GPo8uF
顔の検出: facemesh2scratch
午前の CoderDojo赤羽オンラインの参加時に、@jishiha さんが作られた facemesh2scratch で作品を作ってみて、デモもしてみました。
— you (@youtoy) 2020年4月5日
動画の内容は「口の開閉を検知し、口が開いたときに口元の位置から星が飛び出てくる」というもの。#CoderDojo の開催時間中に作ったものに、少し手を加えて動画に。 pic.twitter.com/WegirBCPLd
画像の機械学習: ml2scratch
Scratch でジャンケン画像を機械学習させて識別するのを試した時の動画。
— you (@youtoy) 2020年1月13日
今日の CoderDojoまちだ で、@jishiha さんの作られた独自環境の Scratch を使ったデモ(声でロボットカーを操作するもの)をやったら、
その独自拡張機能に興味をもった子が出て、それで一緒に試した時のもの。#CoderDojo pic.twitter.com/TSLNCvb7WL
「何かの作品を作っている」というよりは、「何か作品を作るための前準備として、どんな機能が作れそうか試す」という感じのことをあれこれやっています。
個人的には、カメラを利用するものではない「 stretch3.github.io 」の独自拡張機能もこれまで色々試していて、Scratch の上で楽しいことができそうな方向の話は今後も追いかけていきたい部分です。
Scratch に IoT の仕組みを組み込んでみた話
上記の @jishiha さんが作られていたような、Scratch に独自の機能を組み込む話は、自分も少しやってみました。
IoT の話で良く登場する通信のやり方で「MQTT」というものがあるのですが、それを Scratch に組み込んでみて、スマートフォンや小型のデバイス上で行った操作を Scratch に反映させる、ということをやってみました。
こちらの動画は、
— you (@youtoy) 2020年8月12日
スマホ上のWebサイト上のボタン操作でScratchキャットを動かす、というもの(先ほどと同じく、MQTTでやりとり)。
先ほどのものも含め、インターネット上のMQTTブローカーを経由している割には、そんなに大きな遅延はない感じでした。 https://t.co/lbWFgqArbH pic.twitter.com/1FjtvDmIqo
この事例だと、micro:bit 連携やクラウド変数で似たようなことができそうな例になってしまっているのですが、それらの機能ではできないことも実現できるはずなので、何か面白い作品を考えられればと思っているところです。
HackforPlay でやってみたこと
普段の CoderDojo の活動では、Scratch や micro:bit 関連のサポートをしていることが多いのですが、それ以外に HackforPlay(ハックフォープレイ)関連も対応することが増えました。
その中で、いくつか作ってみたものがあるのですが、その 1つを紹介してみます。こちらは、標準機能ではないものを JavaScript のプログラムで書いてみたもので、ニコニコ動画風にコメントを表示させる、というものです。
今日のCoderDojo小机にて、#HackforPlay の中で JavaScript の処理で専用の関数などではないものも動く、という事例を見たので、
— you (@youtoy) 2020年8月30日
昨日、軽く試作を始めたニコニコ動画風のコメントを表示する機能を実装してみた! pic.twitter.com/53LGrJuhzZ
これは、元々はオンラインのイベントが増える中、そこで使えそうな仕組みを自作してみようとしたものがあり、それを HackforPlay にも組み込めるか試してみた流れでした。
昨日の #コミュニティ放送部 のイベントで、ライブデモをやったニコニコ動画風のコメント表示機能( HTML+JavaScript で実装し、OBS でカメラ映像と合成 )、YouTube Live のアーカイブで見え方を確認してみた。
— you (@youtoy) 2020年9月27日
きちんと伝わっていそうで、良かった!https://t.co/7i3fXRWLlE pic.twitter.com/toZYaVWcGU
アドベントカレンダー用記事の引用で使うリツイート。 https://t.co/YylsHngrl7
— you (@youtoy) 2020年12月20日
そして、せっかく自作したので、他に既に出ていた同じ機能を持つアプリにない機能を足してみたりしていて、例えば LINE アプリで入れたコメントが画面にながれる機能を足してみたりしました。
前に作ったニコニコ動画風コメント表示、追加機能で LINE Bot からテキストを送れるようにしてみた!
— you (@youtoy) 2020年10月21日
LINEアプリで入力したテキストが、カメラ映像の上を流れていきます。
LINE Bot や、そこで入力されたテキストを MQTT で送信する処理などは #enebular 上の Node-RED を使いました。#noderedjp pic.twitter.com/mvjI9rIgS6