プログラミング入門

プログラミング初心者のためのScratch(スクラッチ)入門-タイマーを作ろう

プログラミング初心者の子供に何を教えたらいいの?とお悩みの保護者のためのScratch(スクラッチ)の入門講座。Scratchで猫の動かし方はわかったけど・・・次にどんなことをしたらいいの?という疑問にお答えするシリーズです。
今回は、タイマーアプリを作ってみたいと思います。
 

1. タイマーの機能を整理しよう。

タイマーを作る前にそもそもタイマーってどんなもの?かを子供達と一緒に考えましょう。
 

1-1. タイマーの要素を考える

タイマーも身近な機械の一つ。料理の時はもちろん、勉強する時やお仕事をする時、大事なことを思い出す時に使う方もいることでしょう。タイマーももちろんScratchで作れます。その前にタイマーにどんな「要素」があるか整理してみたいと思います。何かを作る時には、作りたいものにどんな要素があるか整理しておくことをおすすめします。これをすることで分析力が育つからです。

「要素」という言葉は子ども達には難しいと思います。その場合には「タイマーにはどんな機能がある?」「タイマーってどういうふうに使う?」という風に年齢に応じて問いかけを簡単にしていってみてくださいね。

さて、タイマーの要素はつぎのような感じになると思います。

(1)測りたい時間を自分でセットできる
(2)残り時間が減っていくのが目で見える
(3)残り時間が0になると、音がなる

そして、その要素を全部作るのか?それとも一部だけにするのか?ということを決めていきましょう。

 

1-2. それぞれをどのように作るか?考える

さて、タイマーに必要な要素を洗い出したらそれをScratchでどのようにつくるか?Scratchの機能に落とし込んでいきます。

(1)測りたい時間を自分でセットできる
この機能に関して、ぱっと思いついたのは2つの方法です。

①「〇〇と聞いて待つ」ブロックを使って、時間をセットする方法。
②リアルなタイマーのように、ボタンを押して時間をセットする方法。イメージとしては以下の商品です。
https://www.amazon.co.jp/dp/B01N2GLDEM/
「10分」「5分」「1分」「10秒」のボタンが並んでいて、それを押して時間をセットします。
 
(2)残り時間が減っていくのが目で見える
こちらも2つの方法を思いつきました。どちらも数字が減っていきますが、
①変数を使う
②数字の絵のスプライトを使う
という方法でできそうです。
 
(3)残り時間が0になると、音がなる
これh「音」なので、あまり方法は選べなさそうです。音ブロックを使ってアラーム音がなるようにしたいと思います。
 

1-3. 作り方を選んで、プログラムの全体像を決める

上で考えた作り方を組み合わせていきましょう。どの組み合わせでもOKですが、今回は次の3パターンを作ってみようと思います。

パターン1:変数と数値だけのタイマー
(1)- ① と(2)- ①の組み合わせで作ります。

パターン2:ボタンで時間を設定できる、変数タイマー
(1)- ② と(2)- ①の組み合わせで作ります。
ボタンで時間を設定できるように作ってみましょう。

パターン3:ボタンで時間を設定できる、デカ見えタイマー
(1)- ② と(2)- ②の組み合わせで作ります。
数字の絵のスプライトを使って時間が大きく見えるようにつくってみましょう!

 

2. タイマーを実際に作ってみよう

ではここからタイマーを3種類作っていきます。
 

2-1. 変数タイマーを作る

まず最初にスプライトと、変数「タイマー(分)」「タイマー(秒)」を用意します。変数は「分」と「秒」に分けておきます。

次に、「〇〇と聞いて待つ」ブロックを使って、スプライトがタイマーにセットしたい時間を尋ねるようにします。つづいて、入力した答えのうち、分の部分を「タイマー(分)」に、秒の部分を「タイマー(秒)」にそれぞれ代入するようにします。

時間をセットできたら、つぎはタイマーが動くプログラムを作りましょう。まず、「タイマー(秒)」が0になるまで減っていくプログラムを作ります。

最後にアラームがなるプログラムを作ります。

これで完成です。実際に時間を入れて測ってみましょう。

きちんと時間が測れました!変数タイマーはこれで完成です。

じつは、このプログラムにはバグがあります。セットする時間を尋ねられたとき「あいうえお」という文字を入れることができてしまいます。5文字の文字列だったらなんでも入ります。本当は、文字か数字かのチェックを入れた方がいいのですが、それはまた別の記事で取り扱いたいと思います。

 

2-2. ボタン式変数タイマーを作る

先ほどの変数式のタイマーと同じように変数「タイマー(分)」「タイマー(秒)」を準備します。
それからボタンのスプライトを自作しましょう。今回は1min(1分)、10sec(10秒)、1sec(1秒)のボタンを準備しました。

本題とちょっと関係ないのですが、ボタンを押したときに「押している感」がでるように、クリックした瞬間にちょっと小さくなるようなプログラムを入れておきます。これがあるとボタンを押しているのが見た目でわかりやすくなります。

こちらのプログラムに、さらに変数の設定を加えておきます。

他のボタンのスプライトも同様に作ります。
こちらは10sec(10秒)のボタン

こちらは1sec(1秒)のボタン

そして、スタートの合図を送るためのボタンも作りましょう。

スタートボタンがクリックされると、タイマーの「スタート」の合図が送られるようにしておきます。

タイマーの残り時間が減っていくプログラムは先ほどの変数タイマーと同じなので、プログラムをそのまま使い回しをします。バックパックを使ってプログラムを持ってきましょう。今回は、以下のプログラムは「背景」に入れておきました。

ボタン式変数タイマーはこれで完成!プログラムを作るのはとても簡単でしたね。さらに、入力方法をボタンで作ることでおかしな値(数字ではない文字)が変数に入ってしまうことを防ぐことができました。

 

2-3. ボタン式デカ見えタイマーを作る

つぎは、タイマーの表示部分を変数ではなくスプライトで見せるようにしたいと思います。先ほどの「ボタン式変数タイマー」を改造する形式で作っていきたいと思います。

まず「ボタン式変数タイマー」のプロジェクトをコピーし、そこに数字のスプライトを4つ追加します。各スプライトには、コスチュームが1から0まで10個入っています。

分の10の位のスプライトのプログラムです。変数「タイマー(分)」の値に従ってコスチュームが変わるように作っています。

分の1の位のスプライトのプログラムはこのようになります。

秒の方のスプライトも同様に作ります。こちらは秒の10の位のスプライトのプログラム。

こちらは秒の1の位のスプライトのプログラム。

では実際に動かしてみましょう。

きちんと動くようです。ボタン式でか見えタイマーも完成です!これなら時間が大きくてみやすくわかりやすいですね。

ただ、こちらのプログラム分や秒に3桁以上の数字が入ると表示がおかしくなります。本当なら桁数のチェックを行った方がいいですね。

▼プログラムはこちら

 

3. まとめ

今回は、Scratchでタイマーを3種類作ってみました。

プログラムを作り始める前に、以下の手順で作り方を考えました。
手順1:タイマーの要素を整理し
手順2:各要素をどのように作るかを考える
手順3:考えた方法を組み合わせる

もしかしたら、この手順のどこかでお子さんがつまづくこともあるかもしれません。その場合には、つまづいているところを丁寧に教えてあげられるといいですね。

手順2は少し難しいところですので、ここは大人がアイデアを示してあげてもいいかもしれません。

また、今回は作り方を変えて3種類つくったことで、それぞれの作りかたのいいところや悪いところを比較できました。1つの方法だけでなく、いろいろな方法で作るということでさらにプログラムへの造詣が深まっていくこと思います。時間をかけてじっくり挑戦してみてくださいね。

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。