スクラッチでタイマーを作ってみよう

今回、プログラミングに挑戦するタイマーは、こちらです。

緑の旗をクリックすると、タイマーの設定画面が現れます。（すべてクローンで生成）

「▲」「▼」をクリックして、タイマーの時間を設定します。

「START」ボタンをクリックすると、タイマーがスタートし、「STOP」ボタンをクリックすると、タイマーを一時停止することができます。

セットした時間が過ぎると、音で知らせてくれます。

また、「RESET」ボタンをクリックすると、タイマーがリセットされ、最初の状態に戻ります。

セットできる時間は「00時00分01秒～99時99分99秒」となります。

素材をリミックス

まずは、タイマーの素材をコピーします。

下のデジタル時計の素材を置いてあるページを開いて、リミックスしましょう。

タイマーの素材ページを見る　＞＞

素材の確認

プロジェクトをコピーしたら、素材を確認しましょう。

こちらには、下の4個のスプライトがあります。

コスチューム

スプライトのコスチュームを確認すると、数字のスプライトには、「0～9」の10個のコスチュームがあり、コスチュームの名前は、数字になっています。

ここで注意しなければならないのが、デジタル時計で利用したコスチュームとは順番が違うということです。

こちらは、デジタル時計で利用したコスチュームですが、コスチューム番号「1」は「0」のコスチュームになっています。

今回のコスチュームでは、コスチューム番号「1」は「1」の、コスチューム番号「10」は「0」のコスチュームになっている点に注意しましょう。

また、スプライト「∧∨」には２つ、スプライト「ボタン」には６つのコスチュームがあります。

プログラム（初期設定）

それぞれのスプライトのスクリプトエリアを確認すると、初期設定のプログラムが設定されています。

こちらは、スプライト「数字」のプログラムです。

変数「時」「分」「秒」が「0」に初期設定されています。

（▶をクリックして動画を確認してね）

こちらの３つの変数は、時間を設定するときと、タイマーが動いている時の残り時間で利用します。

こちらは、スプライト「記号」のプログラムです。

「x座標を〇、y座標を〇にする」ブロックで初期位置を設定しています。

こちらは、スプライト「∧∨」「ボタン」のプログラムです。

どちらも「楽器を〇にする」ブロックで「(20)シンセリード」が初期設定されています。

 

「楽器を〇にする」ブロックの「音楽」ブロック群はスクラッチの拡張機能だったことを覚えているかな？

「【スクラッチ】ピアノの鍵盤で楽器の音を出してみよう①」で、キーを押すと「ドレミファソラシド」の音が鳴るプログラムを作ったよね。

「楽器を〇にする」ブロックは、あの時に利用したブロックです。

すべてのスプライトでクローンを作る

今回のタイマーのプログラムは、４つのスプライトすべてでクローンを生成しています。

クローンの生成方法は、「スクラッチでデジタル時計を作ってみよう②（クローン編）」で覚えたよね。

「記号」

まずは、一番簡単なスプライト「記号」のクローンを生成します。

スプライト「記号」は、初期位置が設定されていますので、その位置にクローンを生成するプログラムを作りましょう！

・

・

・

・

・

・

・

・

・

・

スプライト「記号」のクローンを生成するプログラミングはできましたか？

クローンを作るときはオリジナルのスプライトを隠しておくと、プログラミングが簡単にできる説明しましたよね。

こちらが、スプライト「記号」のクローンを生成するプログラムです。

　

初期設定で、「隠す」ブロックを使ってスプライトを隠しておいて、自分自身のクローンを生成するときに、「表示する」ブロックで表示させます。

「数字」

次は、スプライト「数字」のクローンを生成します。

生成するクローンは、「時」「分」「秒」の合計６つです。

こちらの定義『「数字」クローンを作る〇〇〇〇』ブロックを作って、６つのクローンを生成するプログラムを作りましょう！

生成するクローンの情報は、以下の通りです。

クローン番号	x座標	y座標	大きさ (%)	時間
1	-115	0	100	「時」の十の位
2	-55	0	100	「時」の一の位
3	25	0	100	「分」の十の位
4	85	0	100	「分」の一の位
5	120	0	50	「秒」の十の位
6	150	0	50	「秒」の一の位

・

・

・

・

・

・

・

・

・

・

スプライト「数字」のクローンを生成するプログラミングはできましたか？

（画像をクリックすると大きくなります。）

こちらが、スプライト「記号」のクローンを生成するプログラムです。

生成したクローンごとにそれぞれのプログラムを作りには、ローカル変数「クローン番号」を利用しましたよね。

変数「クローン番号」は、「このスプライトのみ」を選択して、必ずローカル変数で作りましょう。

　

大きさは「大きさを〇%にする」ブロックを、座標は「x座標を〇、y座標を〇にする」ブロックで設定しています。

プログラミングができたら、緑の旗をクリックして、６つクローンが生成されたか確認しましょう。

「∧∨」

次は、スプライト「∧∨」のクローンを生成します。

生成するクローンは、コスチューム「ボタン∧」「ボタン∨」の合計６つです。

こちらの定義『「∧∨」クローンを作る〇〇〇〇』ブロックを作って、６つのクローンを生成するプログラムを作りましょう！

生成するクローンの情報は、以下の通りです。

クローン番号	x座標	y座標	コスチューム名
1	-105	100	ボタン∧
2	-105	-20	ボタン∨
3	32	100	ボタン∧
4	32	-20	ボタン∨
5	124	62	ボタン∧
6	124	-20	ボタン∨

コスチューム「ボタン∧」「ボタン∨」をどのように切り替えるかは色々な方法があります。

自分なりに考えてプログラミングに挑戦してみましょう！

・

・

・

・

・

・

・

・

・

・

スプライト「∧∨」のクローンを生成するプログラミングはできましたか？

（画像をクリックすると大きくなります。）

こちらが、スプライト「∧∨」のクローンを生成するプログラムです。

こちらでは、コスチューム「ボタン∧」「ボタン∨」の切り替えに、グローバル変数「クローン番号」を利用しています。

よく見てみると、コスチューム「ボタン∧」のクローン番号はすべて「奇数」で、コスチューム「ボタン∨」のクローン番号はすべて「偶数」になっていますよね。

奇数か偶数かを条件にするときによく使われるのが、２で割ったときの余りからチェックする方法です。

今回は、ローカル変数「クローン番号」の値を２で割った余りが「１」のとき、つまり奇数のときはコスチューム「ボタン∧」に、偶数のときはコスチューム「ボタン∨」になるようにプログラミングしています。

他にもこちらの方法でもコスチュームを設定できます。

自分の力でプログラミングで実現させることが大切なので、どのような方法でも同じような結果になればOKです！

「ボタン」

次は、スプライト「ボタン」のクローンを生成します。

（画像をクリックすると大きくなります。）

生成するクローンは、コスチューム「START」「STOP」「RESET」の合計3つです。

こちらの定義『「ボタン」クローンを作る〇〇〇〇』ブロックを作って、３つのクローンを生成するプログラムを作りましょう！

生成するクローンの情報は、以下の通りです。

 

クローン番号	x座標	y座標	コスチューム名
1	-130	-100	START
2	0	-100	STOP
3	130	-100	RESET

こちらもコスチューム「START」「STOP」「RESET」をどのように切り替えるか自分なりに考えて、プログラミングに挑戦してみましょう！

・

・

・

・

・

・

・

・

・

・

スプライト「ボタン」のクローンを生成するプログラミングはできましたか？

（画像をクリックすると大きくなります。）

こちらが、スプライト「ボタン」のクローンを生成するプログラムです。

こちらでも、コスチューム「START」「STOP」「RESET」の切り替えに、グローバル変数「クローン番号」を利用しています。

こちらの結果は「数値」になります。

「コスチュームを〇にする」ブロックの〇に、「数値」の変数を入れるとコスチューム番号として認識されるの覚えていますか？

（画像をクリックすると大きくなります。）

こちらでは、コスチューム番号でコスチューム「START」「STOP」「RESET」の切り替えを行っています。

コスチューム番号の計算式は、以下の通りです。

実際にローカル変数「クローン番号」の「1」「2」「3」を当てはめてみると

のようになります。

これは、ローカル変数「クローン番号」の「1」「2」「3」から「1」「3」「5」になる計算式がないか考えたものです。

何かいいアイデアがないか考えるときにAIを利用すると、とてもいいヒントをもらえます。

（画像をクリックすると大きくなります。）

例えば、こちらは、AIチャットサービス「ChatGPT」に今回の計算式について質問した結果です。

こちらでは、ピンポイントに計算式を教えてくれました。

今回は、計算式を使いましたが、こちらの方法でコスチュームを設定してOKです。

スプライト「∧∨」をクリックして、変数「時」「分」「秒」の値を変更するプログラムを考える

（▶をクリックして動画を確認してね）

次は、スプライト「∧∨」のプログラムを考えていきます。

スプライト「∧∨」のコスチューム「ボタン∧」「ボタン∨」をクリックすると、以下のような動きをしています。

①の『コスチューム「ボタン∧」「ボタン∨」をクリックすると、ちょっと動いて元の場所へ戻る』は、アニメーションテクニックの１つです。

こちらの定義「動き」ブロックを作って、利用してください。

プログラムの内容を説明すると、「y座標を1ずらして0.1秒待ち、y座標を1戻す（元の位置に戻す）」簡単なアニメーションです。

②は、「〇の音符を〇拍鳴らす」ブロックで音を鳴らしています。

今回のプログラムでは、「71」を設定していますが、どの音を設定してもOKです

③④は、クリックして、変数「時」「分」「秒」の値を1増やしたり、1減らしたりするだけなので難しくないですよね。

⑤⑥は、変数「時」は「0～99」、変数「分」「秒」は「0～59」の範囲で、ぐるぐる値を回すためのプログラムです。

こちらは、条件を付けてうまくプログラミングする必要があります。

①②は、問題ないですよね。

残りの③～⑥のプログラムを作ってみましょう！

・

・

・

・

・

・

・

・

・

・

③～⑥のプログラミングはできましたか？

まずは、スプライトをクリックするときの処理ですが、クリックするときのプログラムの基本の形覚えていますか？

（画像をクリックすると大きくなります。）

クリックの状態から「連続処理」と「単発処理」がありましたよね。

今回は、長押ししても数値が動くように「連続処理」でいきます。

（画像をクリックすると大きくなります。）

こちらが、スプライト「∧∨」のコスチューム「ボタン∧」「ボタン∨」をクリックしたときのプログラムです。

①②は、「もし◇なら」ブロックの中なら、どの部分に定義「動き」ブロックと「〇の音符を〇拍鳴らす」ブロックを入れてもOKです。

③④の変数「時」「分」「秒」の値を1増やしたり、1減らしたりするのは、「〇+〇(足し算)」「〇-〇(引き算)」ブロックを使っています。

こちらは、変数「時」の⑤⑥プログラムを抜粋したものです。

変数「時」が「99」「0」のときに、変数「時」を「0」「99」にしています。（変数「分」「秒」も同様のプログラム）

これで、変数「時」「分」「秒」の設定は完了です。

スプライト「数字」のプログラムを考える

次に変数「時」「分」「秒」と同じ値のコスチュームになるように、スプライト「数字」のプログラムに追加していきます。

変数「時」「分」「秒」と同じ値のコスチュームにするには、色々な方法があります。

すでに「スクラッチでデジタル時計を作ってみよう①」でもいくつかの方法を紹介しましたよね。

こちらは、条件を付けてうまくプログラミングする必要があります。

変数「時」「分」「秒」と同じ値のコスチュームにするプログラミングに挑戦してみましょう！

どうやればいいか分からない子は、もう一度下のデジタル時計のプログラミング方法を確認してください。

・

・

・

・

・

・

・

・

・

・

変数「時」「分」「秒」と同じ値のコスチュームにするプログラミングはできましたか？

（画像をクリックすると大きくなります。）

こちらが、変数「時」「分」「秒」と同じ値のコスチュームにするプログラムです。

例えば、23時を「2（十の位）」「3（一の位）」に分けたい場合、以下の計算式で分けられます。

こちらは、１つの方法ですので、結果が同じであればどのようにプログラミングしてもOKです。

（画像をクリックすると大きくなります。）

こちらは、スプライト「数字」の全体のプログラムです。

これで、スプライト「数字」のプログラムは完成となります。

スプライト「ボタン」のプログラムを考える

（画像をクリックすると大きくなります。）

次に「START」「STOP」「RESET」の３つのボタンのプログラムを追加します。

それぞれの役割は、以下の通りです。

こちらもプログラミングの方法は色々ありますので、その中の１つとして紹介していきます。

まずは、以下の３つのグローバル変数を作りましょう。

変数を作ったら、初期設定に設定しましょう。

（画像をクリックすると大きくなります。）

次に、スプライトをクリックするときの処理ですが、「START」「STOP」「RESET」ボタンは、１回だけ処理されるように「単発処理」でいきます。

「RESET」ボタン

「RESET」ボタンは、タイマーの設定時間をすべてリセットするので、それぞれの変数を「0」に設定します。

また、変数「状態」には、現在の状態を明確にするために「RESET」を設定します。

「STOP」ボタン

「STOP」ボタンの変数「状態」には、現在の状態を明確にするために「STOP」を設定します。

また、今回タイマー稼働時の変数「時」「分」「秒」「残秒」の設定は、「START」ボタンのプログラムで行います。

よって、「STOP」ボタンでは、動作中のタイマーをストップしたときに、ストップした残りの秒数を変数「設定時間」に再設定します。

これで、「START」ボタンがクリックされたとき、再設定された「設定時間」でタイマーが再稼働します。

「START」ボタン

（画像をクリックすると大きくなります。）

「START」ボタンの変数「状態」には、現在の状態を明確にするために「START」を設定します。

変数「設定時間」には、変数「時」「分」「秒」を「秒」に変換した合計秒数を設定しています。

「秒」に変換した合計秒数はタイマーの残秒になるので、変数「残秒」に変数「設定時間」の値を設定しています。

タイマーの計り方

タイマーを計るときは、設定した時間から経過時間を差し引いて図りますよね。

　

経過時間を知るには、「タイマー」ブロックと「タイマーをリセット」ブロックを使います。

「タイマー」ブロックは、Scratchが内部で管理しているタイマー値を返します。

「タイマーをリセット」ブロックは、そのタイマーの値を「0.0」に戻してリセットするブロックです。

つまり、「タイマーをリセット」ブロックを実行すると、タイマーが「0.0」になり、「タイマー」ブロックで経過時間を知ることができます。

（画像をクリックすると大きくなります。）

タイマーの計り方が分かったところで、まず、「タイマーをリセット」ブロックでタイマーの値「0.0」にしてリセットします。

次に、「◇まで繰り返す」ブロックで、変数「状態」が「STOP」になるまで繰り返します。

変数「状態」が「STOP」になるのは、「STOP」ボタンが押された時です。

「STOP」ボタンが押されると、「START」ボタンの残秒チェックをストップさせます。

そして、「もし◇なら▢でなければ」ブロックで、残秒が0になるまでの処理と、0になったときの処理を分けています。

（画像をクリックすると大きくなります。）

残秒が0になるまでの処理は、設定した時間の残秒をチェックして、変数「時」「分」「秒」に残り時間を再設定しています。

（画像をクリックすると大きくなります。）

0になったときの処理は、「もし◇なら」ブロックを使って、もう一つ条件を加えています。

それは、変数「設定時間」が0より大きいとき、つまり設定時間が設定されていた場合に、残秒が0なら、時間経過の音を鳴らしています。

音は、「〇の音符を〇拍鳴らす」ブロックで、「84」を設定していますが、自由に音符を設定してください。

これは、設定時間が0の状態で「STOP」ボタンをクリックしたときに、音を鳴らさないための処理です。

（画像をクリックすると大きくなります。）

そして、変数「状態」を「STOP」に設定することで、「◇まで繰り返す」ブロックの◇の条件が「真（true）」になり、繰り返し処理が終わります。

マウスオーバー

タイマー機能としてのプログラミングは、ここまでで完成ですが、ボタンの上にマウスポインターを移動させると、コスチュームが変わりますよね。

ホームページでもボタンの上にマウスポインターを移動させるとボタンの色が変わったりすることがありますが、マウスポインタ ーを何かの上に乗せることを「マウスオーバー」といいます。

今回のプログラムには、「マウスオーバー」したときにコスチュームを変えるプログラムも追加しています。

こちらが、「マウスオーバー」したときのプログラムです。

「クローンされたとき」ブロックをもう一つ使って、並列処理させています。

（画像をクリックすると大きくなります。）

こちらは、スプライト「ボタン」の全体のプログラムです。

これで、スプライト「ボタン」のプログラムは完成となります。

スプライト「∧∨」の追加プログラム

スプライト「∧∨」のプログラムには、もう一つだけ追加するプログラムがあります。

それは、「START」ボタンを押したときに、スプライトを消すプログラムです。

スプライトを消すにはいくつか方法がありますが、今回は、「▢の効果を〇にする（見た目）」ブロックの幽霊効果を使っています。

こちらを使って、変数「状態」が「START」の場合は、幽霊効果を「100」にしてスプライトを消し、それ以外の場合は、幽霊効果を「0」にしてスプライトを表示させます。

（画像をクリックすると大きくなります。）

こちらは、スプライト「∧∨」の全体のプログラムです。

これで、スプライト「∧∨」のプログラムは完成となります。

まとめ

「スクラッチでタイマーを作ってみよう」では、アナログ時計とデジタル時計でプログラミングした内容からタイマーのプログラムを作っていきました。

完成したプログラムの中身を見たい人は、こちらから確認してください。

プログラムを確認する 　＞

これで、スクラッチでアナログ時計・デジタル時計・タイマーを作るプログラミング学習は終わりです。

また、「Step5　スクラッチでプログラミング！」から好きなゲームなどを自由に選択して、プログラミングに挑戦してみよう！

もちろん自分で作品を作ってもOK！

もしも、やりたいことがあって、どうプログラミングすればいいか分からない時は、「プログラミングテクニック」の中で、ほしい情報がないか確認してみましょう！

---

【Step6】スクラッチでプログラミング！

• スクラッチでアナログ時計を作ってみよう①（ステップ秒針）
• スクラッチでアナログ時計を作ってみよう②（連続秒針）
• スクラッチでデジタル時計を作ってみよう①
• スクラッチでデジタル時計を作ってみよう②（クローン編）
• スクラッチでデジタル時計を作ってみよう③（文字の色を変える編）
• スクラッチでタイマーを作ってみよう　←今ココ

【Step5】「キー」「マウスクリック」のプログラムに挑戦！

• ピアノの鍵盤で楽器の音を出してみよう①
• ピアノの鍵盤で楽器の音を出してみよう②
• ピアノの鍵盤で楽器の音を出してみよう③

【Step4】歩くプログラムに挑戦！

• スクラッチでプログラミング009｜歩くプログラムを考える①
• スクラッチでプログラミング010｜歩くプログラムを考える②
• スクラッチでプログラミング011｜歩くプログラムを考える③
• スクラッチでプログラミング012｜歩くプログラムを考える④
• スクラッチでプログラミング013｜歩くプログラムを考える⑤
• スクラッチでプログラミング014｜歩くプログラムを考える⑥

【Step3】スクラッチとプログラミングの基本知識

• スクラッチでプログラミング001｜スクラッチの画面について
• スクラッチでプログラミング002｜ブロックの使い方①
• スクラッチでプログラミング003｜ブロックの使い方②
• スクラッチでプログラミング004｜コスチュームの使い方
• スクラッチでプログラミング005｜スプライトの座標
• スクラッチでプログラミング006｜スプライトの向き
• スクラッチでプログラミング007｜爆速で上達するプログラミングのコツ
• スクラッチでプログラミング008｜ブロックの結合・複製・削除方法

【Step1・Step2】スクラッチアカウント作成とログイン方法

• スクラッチアカウントの作成とログインする方法

 

タイマーのプログラム

タイマーのプログラムは、こちらの通りです。

詳しい説明が必要な方は、最初に戻って読み進めてください。

スプライト「数字」のプログラム

（画像をクリックすると大きくなります。）

スプライト「記号」のプログラム

スプライト「∧∨」のプログラム

（画像をクリックすると大きくなります。）

スプライト「ボタン」のプログラム

（画像をクリックすると大きくなります。）