プログラミング入門

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

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

 

1. デジタル時計を作ろう

時間といえば時計。どのパソコンにも、スマホにも、タブレットにも時計機能は必ずついています。時計を自作しちゃいましょう。

 

1-1. 超かんたん!変数デジタル時計

まずは、すごく簡単な方法です。「現在日付」「現在時刻」という変数をつくり、ずっと現在の時間と時刻を代入し続けます。

プログラムはこのように作ります。

緑の旗を押してプログラムを実行すると、時計が表示されます。

ネコはただおいてあるだけで何もしません。

 

1-2. もう少し頑張ってみる

これは簡単にできましたがどうも時計が小さすぎです。時計アプリというからには時計をメインにしてみたい!というわけでスプライトを使って時計を作りましょう。
 
新しくスプライトを作ります。コスチュームには1, 2, 3, 4, 5, 6, 7, 8, 9, 0の数値を入れておきます。

この時重要なのがコスチュームの番号です。コスチューム番号は、コスチュームの絵の左上に書いてある番号のことです。コスチュームの絵の数字(緑色の数字)と、コスチューム番号が一致するようにコスチュームを設定してください。

この数字のコスチュームが入ったスプライトには下のようなプログラムを作ります。

コスチュームは番号でも指定できます。今回コスチューム番号と絵の数字(緑色の数字)を一致させているので、このプログラムを実行すると、「2018」という文字列の1番目の文字=コスチューム番号2の絵がスプライトに設定されます。

ここまでできたら、このスプライトを右クリックして「複製」します。

複製したら、今度はプログラムの「●番目の(▲)の文字」のところを「2」番目に書き換えます。すると複製したスプライトには「0」のコスチュームが設定されました。

複製を繰り返して、年、月、日をスプライトで表示していきましょう。

月と日は2桁になる時があるので、スプライトは2つづつ用意します。

以下は月の10の位のプログラムです。月が2桁のとき(10月、11月、12月のとき)は月の10の位を表示し、月が1桁のとき(1月〜9月)の時は月の10の位のが見えないようにします。

また、以下は月の1の位のプログラムです。月が2桁のとき(10月、11月、12月のとき)も、月が1桁のとき(1月〜9月)の時も1の位を表示できるようにしています。

日付もこのようにして作ります。そして、出来上がったのがこちら。とりあえず年月日の表示まで完成。

続いて、時分秒を同様に作っていきます。時間のスプライトは絵を変えてみました。完成したものがこちら。

時計っぽくなってきました!

最後の仕上げです。背景に点を入れて、デジタル時計っぽく見えるようにしました。また数字のスプライトの場所も微調整してデジタル時計の完成です!

 

2. アナログ時計をつくろう

今度はアナログ時計作りに挑戦です!

 

2-1. 文字盤の準備

まずは、アナログ時計のための文字盤の準備です。今回、文字盤はペンで描くことにしました。といっても、ペンで描くプログラムを作るのは大変なので、他の方のプログラムをお借りすることにしました。

▼こちらのプロジェクトからプログラムをお借りします
https://scratch.mit.edu/projects/124762860/

必要なプログラムをバックパックに入れます。

自分のプロジェクトでバックパックからプログラムを取り出します。

お借りしたプログラムを使って、ペンで文字盤を描きました。

 

2-2. 時計の針の準備

時計の短針、長針、秒針をそれぞれスプライトとして作ります。
この時、ポイントは「スプライトの向きが0度のときに12時方向を向く」ように描くということです。
スプライトの「i」を押すと、角度を調整できるので向きを「0度」にして描くと分かりやすいです。

同様にして、長針と秒針も作りました。

 

2-3. 時計の針プログラム

まずは秒針のプログラムを考えてみましょう。秒針は1分間=60秒で360度回転します。なので、1秒あたりの回転角度は「360度/60秒」です。これに「現在の秒」をかければ、秒針の角度が決まります。

はい。意外と簡単でした。

長針も同じ考え方ができます。1時間=60分で360度回転するので、1分あたりの回転角度は「360度/60分」この数値に「現在の分」をかければ、長針の角度がきまるので、プログラムはこちら。

次は短針です。短針は12時間で360度回転するので、1時間あたりの回転角度は「360度/12時間」となります。先ほどと同様に「現在の時」をかければいいので、プログラムはこちらのようになります。

実はこれでも一応アナログ時計っぽくなるのですが、短針がなめらかに動きません。0分のタイミングでカクっと30度一気に動いてしまうのです。2時0分〜2時59分の間、短針は2を指していますが、3時0分になった瞬間、短針はカクっと動いて3を指す、という動きになるのです。

 

2-4. 短針をなめらかに動かしたい

実際のアナログ時計は短針は1時間かけて30度動くので、そのように作ってみたいと思います。

まず、短針は1時間に何度動くかというと、360度/12時間=30度動きます。30度を1時間かけて動くということなので、1分あたり何度動くかというと、30度/60分=0.5度です。
つまり、1分あたり0.5度の動きを、0分の時の角度に足せばいいのです。

▼修正した短針のプログラムはこちら

このプログラムを実行すると・・短針がなめらかに動いているように見えます。

 

3. まとめ

今回は、Scratchの時間のブロックを使って時計を2種類作りました。

また、文字盤は他の方のプログラムを再利用させてもらいました。Scratchでは、他の方のプログラムを再利用することはOKですので、便利なプログラムはバックパックに入れてどんどん使わせてもらいましょう。

ただし、作った方へ敬意を表すのは忘れずに。プロジェクトの説明文に、出典元を記載しておくといいですよ。
みなさんも自分のオリジナルデザインで時計づくりにチャレンジしてみてくださいね。

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