こんにちは。Cacooチームエンジニアの川端です。
前年度に引き続いて今年度もリゾートワーク制度を利用して、宮古島の小学校で授業をしてきました。そのレポートをお送りいたします。前回のレポートはこちらになります。
リゾートワーク制度については弊社プレスリリースをご覧ください。
宮古島の天気は雨模様
前回は家族も連れていったのですが、今回は家族の都合がどうしても合わず一人で行きました。
二泊三日の旅程全て雨でした。。。半袖で大丈夫だろうと思っていましたが風もかなり強くて長袖が必要でした。想像していたリゾート感はおおよそ感じることはできませんでした。
タクシーの運転手さんにそのことをこぼすと「家族も一緒に連れて来ないからさぁ！」と笑われました。もしまた機会があれば絶対家族も連れて来ます！笑
授業の内容
前回の授業に引き続いて、アバターを描いて変身する体験学習を行いました。
アバターとは、ゲームやアプリ内の自分の分身のことを言います。聞き馴染みのない人のためにゲームやSNSなどを例にとって言葉の説明をしました。子どもたちはゲームの名前が挙がるたびに「知ってるー！」「やったことあるー！」と大きなリアクションがあって楽しかったです。中には30年以上前のゲームを知ってる子どももいて驚きました。
子どもたちに顔の絵を描いてもらい、その絵をカメラが読み取ります。そしてPCの前に座ってもらいPCの内蔵カメラの映像に顔の絵をはめ込むというシステムです。
変身システム
いざ授業
今回は宮古島市立下地小学校にお邪魔しました。前日に情報室の下見をさせていただきました。福岡に住んだことのある先生が対応してくださって、博多通りもんをお土産にもっていくと喜んでくださいました。
昔ながらの校門にノスタルジーを感じます
今回の授業は小学二年生2クラスでしたので、2コマの授業を2回行いました。情報室での授業というだけでテンションMAXでみんな入ってくるなりハイタッチしてくれました。みんな楽しみにしてくれていたようでだいぶ緊張が和らぎました。
最初の自己紹介では、家族や趣味のロードバイクや出身地の紹介をしました。私の出身地である滋賀県が誇る琵琶湖と宮古島どちらが大きいかのクイズを出したりしました。ちなみに正解は琵琶湖の方が3倍ほど大きいです。だいたい半々くらいの正答率でした。
顔の絵を描くワーク
顔のテンプレートが印刷された紙に、2人ペアになって1枚の絵を描いてもらいました。絵が描けるというだけでテンション上がりまくりでした。
前回の6年生が描いた絵を例に見せていましたが、1クラス目の授業では某人気キャラクターの絵にインスパイアされ、同じキャラを12グループ中5組が同じモチーフを選んでいました。何を描くのかは自由なので良いことだと思います。早く終わったペアは他のペアのところにペンを持っていって色塗りを手伝ったり描き方のアドバイスをしていて、助け合いの精神が素晴らしかったです。
先生の補助を受けながらPCで画像検索をしているペアもいました。私が初めてインターネットで検索したのは中学の頃でしたので、補助を受けながらとはいえ小学二年生でそこまでできるのかと驚きました。
みんなキャッキャ言いながらお絵かきしていました
顔の絵に変身するワーク
子どもたちがカメラの前に立って自分の顔がイラストに変わると「わー！」「なにこれー！」などの驚きの声や「変なかおー！」「似合うー！」などの面白がる声があがりました。中には恥ずかしがる子もいましたが最終的には全員に体験してもらうことができました。今回は2クラス合計44人の子どもたちが体験しました。子どもたちの純粋に楽しんでくれている様子を見れて嬉しかったです。
描いたアバターに変身した様子
授業の最後に感動させてもらった
前回の6年生に授業をしたときも元気いっぱいでしたが、2年生はそれを上回る有り余る元気で終始圧倒されました。話をしている最中に「それ知ってるー！」と大きなリアクションがあったり、「〇〇しましょう」と呼びかけると「はい！」と大きな返事が返ってきたり、大人向けの発表では到底味わうことのできない活気あふれる授業でした。
そして最後の質問コーナーでみんな思い思いに手を挙げて感想を言ってくれました。「変身するのがおもしろかったです」や「顔の絵を描いて楽しかったです」など、恥ずかしがりながらもみんなちゃんと感想を言ってくれたその姿にとても感動しました。担任の先生も、ここまでみんな感想を言うのは珍しいとおっしゃってくださいました。
みんな手を挙げて感想を言ってくれて嬉しかった
授業後の心境Tweetです。私には2歳になる娘がいるのですが、娘が産まれてからこういう子どもが楽しんでいる姿や頑張っている姿にめっぽう弱くなりました(涙腺的な意味で)。少しでも子どもたちの世界が広がってくれれば嬉しいです。
宮古島の小学校での出張授業が無事終了。最後に２年生のみんなが思い思いに感想を言ってくれて「ありがとうございました！」って言ってくれたのが感動して泣けた。雨とかもうどうでもええ！
— SatoshiKawabata (@kwbtsts) December 6, 2019
変身システムの解説
自作のシステムで授業をするのはかなり緊張しますが、子どもたちの反応をダイレクトに見ることができたので作った甲斐がありました。
宮古空港で記念に撮影
ソースコードはこちらになります。
GitHub – SatoshiKawabata/mask-maker
実際に動くデモはこちらになります。動作確認はChrome(Ver. 78)でしかやっておりません。
https://satoshikawabata.github.io/mask-maker/
主な課題は以下の3点です。それぞれどうやって解決したかを紹介します。
- 顔のトラッキングをどうやるか？
- 画像のスキャンをどうやるか？
- 円滑に体験してもらうための工夫
1. 顔のトラッキングをどうやるか？
カメラの前に立ったときに顔を検出して、絵の画像を貼り付けないといけません。
トラッキングを自前で作れる気がしなかったので、ライブラリを探しました。openCV.jsとかopenFrameworksとかでできないかなと思いましたが、clmtrackrというライブラリを使うことにしました。他と比べてブラウザで使えて導入も簡単そうだったからです。
2. 画像のスキャンをどうやるか？
授業なのでいちいちプリンタでスキャンしている時間はありません。そこでwebカメラを机に固定して絵を撮影する形にしました。
↓ライブラリにこういうテンプレートが用意されているので、これに沿って絵を描いてスキャンすると顔のテクスチャとしてピッタリ顔にはまるようになります。
顔のテンプレート画像
3. 円滑に体験してもらうための工夫
24人ほどのクラス全員に体験してもらわないといけないので、回転効率を良くしないといけません。1人2分かかったとしたら約50分もかかってしまいます。円滑に回すため、 絵のスキャン→カメラの前で変身 の流れを速く回す必要があります。また、スキャンした絵はせっかく描いてくれたものなので、ローカルに画像ファイルとして保存しておきたかったです。
ブラウザを使用するのでスキャンした絵の画像をそのままファイルシステム上に保存することが難しい、という問題が出てきました。そのため一々画像をダウンロードしてきてまたアップロードしてという面倒な操作が発生します。
この問題を解決するために「スキャンした絵の保存」と「スキャンした絵の画像の配信」ができるサーバをnode.jsで実装しました。
サーバサイドでやっていることは以下の2点です。
- 画像のpostリクエストを受け付けて、画像を保存する
- 保存されている画像のgetリクエストを受け付けて、画像を返す
サーバのソースはこちら。
ローカル起動する際はWebpack Dev Serverを使うのでdevServer.beforeプロパティの機能を使いました。これを使うとWebpack Dev Server上でnode.jsのサーバを実装することができます。今回はこの機能を使って実装を行いました。
システムトラブルの予防策と綿密なリハーサル
現場で起こりうる最悪の状況を想像しながらそれに耐えうるシステムの設計と、事前の綿密なリハーサルが必要です。以下の点に気をつけました。
- 最悪PCが壊れてもいいようにもう一台控えのPCを用意
- ネットワーク環境が無くても授業できるようにローカル環境で完結できるようにした
- 事前にHDMIでOKと聞いていたが、VGAの接続コネクタも準備した
- 前日に情報室に下見に行って接続確認した
- リハーサルでは自宅で家族に生徒役をやってもらって実際の授業の流れを練習して失敗を重ねた
学生時代にメディアアートを作っていて美術館で作品の展示やデモをやったことがあったのでそのときの経験が生きました。デモには不測の事態がつきものですが、今回はトラブルも無くうまくいってホッとしました。
終わった後は観光と行きたかったが…
授業が終わった後はPOTARI 宮古島でロードバイクをお借りして島を一周する様子をこのブログに書く予定でしたが、雨と風がひどくてキャンセルしました。。。余った時間で島の駅みやこでお土産選びをして宮古そばを食べました。
タクシーの運転手さんといっぱい話した
今回はレンタカーは使わずタクシーをたくさん使いました。運転手さんと「天気悪いですねー」みたいな世間話をしました。天気悪いときにできる観光はありますか？と聞くと「飲むしかないさぁ」と的確なアドバイスを頂きました。
以下、タクシーの運転手さんから聞いた情報です。※沖縄の方言が聞き取れなかったところもあるので間違ってるかもしれません!
- 12月は北風が吹いて寒い
- 宮古島の建物は風に強いので風速100mでも大丈夫
- サトウキビの収穫がそろそろ始まり製糖工場が稼働しだす
- 収穫には子ども・孫が手伝いに来るのが昔は当たり前だったが最近の若いもんは(ry
- 製糖工場が稼働している期間は甘い香りが周辺にたちこめる
- 夏に海水浴するときはTシャツを着ないと日焼けでひどいことになる
最後に
終わってみればすごく楽しめましたし、授業を通して感動させてもらいました。小学生相手に授業なんてそうそうできる経験ではありませんので、リゾートワーク制度を作ってくれた会社に感謝です。
下地小学校のブログでも授業の様子を取り上げていただきました。
リゾートワークのレポートは以上となります。宮古島市立下地小学校のみなさま、温かく出迎えてくださりありがとうございました。株式会社リチャージの村田さま、写真のご提供ありがとうございました。
次回、宮古島に行くときは必ず家族も一緒に連れていこうと思います！
