はじめに
「プログラミングで学ぶ」をコンセプトにした学習サイトであるところのK3Tunnelを使って小学校にプログラミング授業をお届けし始めて5年。ゆっくりとしたペースではあるものの活動を継続しており、2021年度は約1,000名の小中学生に授業をお届けできました。2022年度も1,000名を超える小中学生にお届けできそうです。
また、継続的にコンテンツ開発も続けており、2022年は「低学年向けのコンテンツ」の開発に初挑戦しました。1
2年生算数をターゲットに「自動販売機のおつりに出す10円玉の枚数を計算する」のをテーマにしました。硬派さは失わず、低学年向けでありながら、プログラミング画面は大変質素な作りになっております。単純に計算するだけのプログラムを組む内容で、出力は文字列のみです。
画面キャプチャは、自動販売機に投入した金額（うけとったお金）が200円で、ジュースの値段（ジュースのお金）が130円の時のおつりの10円玉の枚数は7枚である。というプログラムになっています。授業では、一貫してこのシチュエーションを扱い、最後に「うけとったお金」を変更して、おつりの10円玉の枚数を計算してみるといったアクティビティをしていきます。
すでに複数回小学校で実践を重ねており、授業進行、ワークシート類の工夫により、楽しく取り組んでいただける完成度にはなってきておりますが、学校現場の先生方からは「結果をアニメーションにしてほしい」というリクエストをいただいたりもしております。それも複数。体感としては「毎回言われる」レベルです。
そこで「10円玉の枚数を表すアニメーションとは」を考え、Scratchでちょっと作ってみたというのがこのエントリーのテーマになります。（リンク先のScratchプロジェクトは気まぐれに非公開にする可能性あります）
なおScratchで作ってみたものの、Scratch経験はそれほど豊富ではありません。ごくたまに子ども向け入門書を参考にしつつググりながら簡単なものを作ったり、ちびっこ初心者と一緒に「猫逃げ」を何回か作ったことがある程度です（と言い訳しておきます）。
10円玉の枚数を表すアニメーションとは
実際のところ、10円玉の枚数を表すアニメーションをK3Tunnelの機能として実装することはおそらくないと思われ2、リクエストをいただいても、深く話すことなくお茶を濁してしまっています。なのでリクエストをくださった先生方の脳内に、具体的に何が浮かんでいたのか、想像するしかありません。
アプリケーションのUIを設計するときは、データがないとき、ちょっとあるとき、たくさんあるときに分けて考えると良いそうです。それに倣って考えてみます。
おつりがないときのアニメーション
何も起きないか「おつりはないよ！」と自販機がしゃべるとかそういう感じでしょうか。今回は、とりあえず何もしないことにします。
おつりが10枚未満の時のアニメーション
なんとなくの想像ですが、先生方は、自動販売機から、チャリンチャリンと10円玉が飛び出してくるアニメーションを思い浮かべているような気がします。しかし、その後はどうでしょう。飛び出た10円玉をどう表現するのが自然でしょうか。
例えば・・・
- 海賊の財宝みたいにジャラジャラっと山になる
- ガマグチの小銭入れに吸い込まれていく
- 10円玉が整然と並ぶ
などが考えられます。
算数の教科書からの連想で、こんな感じで10円玉が整然と並ぶのが自然な気がします。
10枚未満であれば、10円玉が1枚ずつ自販機から飛び出てきて、整列するというのは、ごく自然に思われます。
おつりがいっぱいあるときのアニメーション
授業では、自動販売機がうけとったお金を変えるアクティビティをするのですが、とりあえず入れてみる値としては、500円玉、1000円札、5000円札、10000円札あたりが妥当でしょう。
ジュースの値段が130円だったとき、おつりの10円玉の枚数は以下の通りです。
| うけとったお金 | おつりの10円玉の枚数 |
|---|---|
| 500 | 37 |
| 1000 | 87 |
| 5000 | 487 |
| 10000 | 987 |
現実の自動販売機が、全部10円玉で出すはずはありませんが、残念ながら10円玉の枚数しか計算できないプログラムですので致し方ありません。子どもたちは、限界に挑戦するのが大好きなので、相当大きい値（eが登場するくらい）を入れる子が続出すると思われますが、とりあえず987枚までは自然に表現できるアニメーション出力を考えます。
987枚10円玉を並べるのは、現実的ではありませんので、10の塊を作るのがまあ妥当でしょう。
10の塊は、10円玉を重ねたものをイメージして、こんな感じで並べるのを目指してみます。（これは87枚）
目標とする987枚はこんな感じ。
Scratchで実装してみる
計算するところ
とりあえず、けいさん！ボタンを作成。
このスプライトが押されたら、計算するようにします。あえてK3Tunnelのコンテンツで作るものと同じようなコードにしてみました。「うけとったお金」を変更したいときは、コードの中で直接修正する前提です。
一番上の「初期化」は、使っている変数をゼロにするのとスプライトの座標を指定しています。最後の「おつりけいさん終わったを送る」は、10円玉スプライトでうけとってアニメーションを描画するためのメッセージです。
こうして改めて眺めてみると、10円玉にしたときの枚数は、切り下げにするべきだったかなとふと思いましたが、アニメーションを作ってみようという本エントリのテーマ的にはどちらでもよいので、このままにしておきます。
10円玉のアニメーション
ここからが本題です。整然と並べるために、座標をチクチクいじっていく必要があります。めんどくさいです。
10円玉のスプライトは１つにした
1つのスプライトに、10円玉のコスチュームと10枚重ねたコスチュームを入れました。
X座標とかY座標とか変数に
テキトーに実装していったら、最終的にこの辺りが変数になりました。
「きりかえ」変数は、10円玉のコスチュームと10枚重ねたコスチュームのきりかえに使っています。
必要なだけクローンする
「おつりけいさん終わった」メッセージを受け取ったら描画開始！クローンしまくりです。
計算結果の「おつりの10円玉」と同じ数だけ表示するまでクローンしてね。という気持ちでブロックを並べました。Scratchの演算子には、<=がないので、本来はORでくっつけるべきなのでしょうが、めんどくさくなり、若干気持ち悪いけど整数しかこない前提でごまかしています。
クローンされたらどうするか
コスチュームを入れ替えている前半部分です。
表示するべき10円玉の枚数がまだ10枚以上ある間は、10枚重ねたコスチューム、そうでない場合は10円玉1枚のコスチュームにして、X座標をずらしつつ、表示していっています。ここでも不等号はごまかしました。
真ん中あたりの「きりかえ=0」だったらのあたりは、きりかわるその時1回だけの初期化処理的なものを書いております。
で、後半は10個並べたら次の行へ行きたいよね。おつり計算用の変数が初期化されたらクローンは削除しとこうか。という気持ちでブロックを並べました。
実行結果
10000円うけとった時の実行結果はこんな感じ。吹き出しと重なっちゃっているのは愛嬌。
これでいいのか
先生方が想像したものだったかどうか・・・
もう少し可愛らしいものを想像していらっしゃるような気もします。
数字だけより、アニメーションの方がいいかどうか・・・
実際に動くところを見ると、ぱっと見で数の大きさがわかります。10の塊や100の塊がとらえやすいなど、数の感覚が十分に育っていない低学年の子どもたちにとっては、算数の学習としても、数字だけでなくアニメーションもあった方が良いかもしれません。
しかし、今回の実装では、子どもたちが大好きな「限界まで大きい数字を変数に入れた場合」が表現できません。発展として「10円玉以外の硬貨やお札でもおつりが出せるようにした場合に、それぞれの枚数を計算できるようにしよう」というテーマに取り組むケースでもだめです。ブロックの基本的な動きが理解できると、色々試行錯誤したくなってきますが、実行するたびに無駄なイフェクトがあると相当イライラしますので、その辺りのバランスをとる必要もあるでしょう。K3Tunnelの機能として実装するならアニメーションのトリガーとなる特別なブロックを使えるようにする必要があります。ほかの出力と共存させるのか、アニメーションしか出ないようにするのか、引数はどうするかなどイロイロ検討しないといけません。
などなど「おつり計算」というテーマに限定しても、プログラミングの自由度をある程度担保しつつアニメーション出力できる機能を実装するのは、相当ムズカシイことが想像されます。一方で、子どもたちは、数字だけの出力でも楽しそうに取り組み、変数に入れる数字を変えて計算結果が変わることに興奮する姿を見せてくれます。
出力のみをアニメーションにするのは、相当なコストをかけてまで実現するべきものかというと、そうでもないよな・・・と思ってしまいます。
いっそのこと
子どもたち自身に、10円玉の枚数を表すアニメーションってどんなのだろうと考えてもらって、Scratchで、実装するのも良さそうです。学校の授業時間内にやるのは難しそうですが発展課題として提示してみたら、低学年でも挑戦してくれる子がいそうな気がします。
おわりに
本エントリでは、10円玉を並べるところだけに注目していますが、自動販売機のボタンを押すことをトリガーにジュースとおつりを出すものも作ってみたりもしました。なんだかんだと3,4時間かかっております。Scratchレベルが少し上がった気がします。つくることで学ぶことの効果を感じずにはいられません。K3Tunnelの機能として実装したら、きっと、開発者の実装力、デザイン力アップにつながるだろうな。と思います。
※ 本エントリの内容は、あくまでも個人の見解です