【Scratch 2019】Scratch と micro:bit で鳴き声がする動物パズルを作る（2019/12/12）

この記事は 「[Scratch Advent Calendar 2019](https://qiita.com/advent-calendar/2019/scratch)」の 12日目の記事です。

今年の Scratch Advent Calendar には、既に以下の記事 2つを投稿していますが、また記事を書いてみようと思います。
　●機械学習・音声認識・デバイス連携の独自拡張（2019/12/6）
　　https://note.com/youtoy/n/nba3960d52ccb
　●画像認識・デバイス連携・関連の独自拡張（2019/12/7）
　　https://note.com/youtoy/n/n8cae77447867

## はじめに

### この記事に書く作品について

今回の話は、[横浜の保育園](https://www.kurakids.ed.jp/)で行われたハッカソンで作った、以下のツイートの動画にある「鳴き声がする動物パズル」についてです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨日の くらき永田保育園 でのイベントで、1歳児クラス担当の保育士さんのアイデアの１つを作ったものです。<br><br>犬を覚えたものの、他の動物と区別ができてない（犬ではない動物のことも &quot;ワンワン&quot; と呼んでしまう）、<br>また、音への興味が強まっている、<br>という背景から考えたという動物パズルでした。 <a href="https://t.co/aIAmybWba7">pic.twitter.com/aIAmybWba7</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1129784612505366528?ref_src=twsrc%5Etfw">May 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ハッカソンのデモで実現した内容はシンプルで、
　「動物がピースになったパズル」、
　「パズルのピースをはめると、そのピースの動物の鳴き声がする」
という2点です。

この記事では、この作品のアイデアについて（※考えたのは保育園の保育士さんです）や、実装の話などを書いて行ければと思います。

### 元になったアイデアと製作の流れ

この作品のアイデアは、1歳児クラスを担当する保育士さんが考えられたものでした。

背景としてあるのが以下の2つです。
　・まだ複数の種類の動物の区別がつかず、どんな動物を見ても「ワンワンだ！」と言う
　⇒ 動物の種類を覚えられるおもちゃを提供したい
　・音への興味が強くなっている子達が多いので、音を使う仕組みも入れたい（＝動物の鳴き声）
　⇒ 猫のピースをはめこんだら、猫の鳴き声がするといったように、動物と鳴き声が対応するような形で鳴き声がする

ハッカソンの作品作りを始める前は、上記の要件だけがあがっていたので、ハッカソンの中でアイデアをだされていた保育士さんに例えば以下の内容など、具体的な作品にしていくために必要な内容をヒアリングしていきました。
　・「素材は何が良いか」
　・「（パズルのピースになっている動物に合わせて、鳴き声を正しくだすために）ピースが正しくはまる仕組みの部分をどう作るか（※素材にも関連）」
　・「具体的にどんな動物を選ぶか」

また、持ち込んでいた材料・デバイスが限られていたので、流用できそうな材料を探すために、保育士さんに案内してもらい園の部屋のおもちゃを見てまわったりしました（アイデア具体化の際の、発想を得る情報を得るのも兼ねて）。
結局、自分が持っていた PC と micro:bit を使う以外は、他の参加者の方が持っていた「導線、発泡スチロール・スチロールカッター」をお借りし、園のプリンタでイラストを印刷させてもらったりして作りました。

### 作品の実装部分

作品全体の構成は、
　「Scratch を動作させているPC --- micro:bit --- 導線やアルミ箔（＋発砲スチロール製のパズル） 」
というものです。これらの 1つ1つを見ていこうと思います。

#### Scratch のプログラム
Scratch で作った内容は、とてもシンプルです。
以下のように「ピンがつながったときに鳴き声を再生」というだけのものになります。
![IMG_7129.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3d47abac-adc2-fe91-2654-2a0eb3d2927c.jpeg)
Scratch で micro:bit を使うために、PC には ScratchLink を入れて、ブラウザで Scratch を動かし、Scratch の micro:bit 拡張を使っています。

#### micro:bit の物理的な構成（＋α）

そして、micro:bit本体の物理的な構成は以下のとおりです。
ピンの 0番と 2番と GND に導線がつながっているだけです。
![IMG_7132.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9dc2a36d-46fd-c5b2-dfa7-68edd97031b9.jpeg)
これらの導線の反対側がどうなっているかというと、以下のとおりです。
![IMG_7131.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f0ca8b4f-c696-8e7a-f628-331b27331022.jpeg)
動物の絵柄がかかれたパズル本体のところに導線がのびていて、動物ごとに「ピンからのびた導線 ＋ GND からのびた導線」のセットが貼り付けられています。

ハッカソンの限られた時間や材料の中で作られたDIY感が満載です（笑）

#### パズルのピースの物理的構成
パズルのピースは、土台となるパズル本体の動物の顔の部分に形が合うよう作られています。
![IMG_7134.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b56f96b5-8592-0e3a-35dd-5d5b823bc9c6.jpeg)
そして、ここにある動物の顔のピースをひっくり返した状態が、以下となります。
![IMG_7130.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/52e0ede7-43c7-1348-c0a1-51c8ef992276.jpeg)
裏側に、アルミ箔を折りたたんだものを貼り付けています。

#### パズルのピースの物理的構成
作品は、上で見たような構成になっています。

プログラムは、micro:bit の 0番ピンか 2番ピンと GND がつながった際に、動物の鳴き声がするように作っています。
0番か 2番かのどちらがつながったかで、鳴き声を変えています（ちなみに、ハッカソンでは時間や手持ちの材料の都合で、デモ用に鳴き声がする動物は 2種のみで作りました）。

上でパズルの本体と、パズルのピースの裏の写真をだしましたが、パズルのピースが正しくはめられたときに、「ピンと GND につながったそれぞれの導線の間が、パズルの裏面に貼られたアルミ箔でつながる」という状態になります。
なお、パズルのピースの形は全て異なるように動物のイラストを選んでいるので、間違った組み合わせでピースがはめ込まれることは物理的にありません。

そして、上記のピンと GND がつながったかどうかを micro:bit が検知する構成で、その検知に連動して Scratch上で鳴き声がするようになっているため、パズルのピースがはめ込まれたらそれに対応した動物の鳴き声がするわけです。

## 終わりに
この作品は、デモ用で、限られた時間で作る必要があったため、実際に遊べるものにするには、変更が必要な部分があります。

例えば、鳴き声をだす部分は PC からだす構成ですが、パズル単体で動作させたいので、小型デバイス（micro:bit より、M5StickC とかのほうが良いかな・・・）に音の再生モジュール（「DFPlayer Mini」が良いのでは？ と情報をいただいていたりします）を使った構成だと、デバイスの構成をシンプルに可搬性を良くできます。
また、発砲スチロールで簡易に作ったパズル本体も、強度などを考慮して材料を工夫できないか、とか、動物の鳴き声を増やすには端子の部分の構成の工夫が必要、などというところです。

ぜひ、その辺りは改良したものを作ることができたら、というところです。