スクラッチでデジタル時計を作ってみよう①

今回、プログラミングに挑戦するデジタル時計は、こちらです。

緑の旗をクリックすると、デジタル時計が現在の時刻や日付、曜日を示します。

デジタル時計のプログラミング方法は、いくつもあります。

今回紹介する方法は、その中の１つに過ぎません。

正しい時刻や日付が表示されれば、どの方法でもOKなので、自分なりに考えていきましょう。

素材をリミックス

まずは、デジタル時計の素材をコピーします。

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

アナログ時計の素材ページを見る　＞＞

素材の確認

リミックスしたら、素材を確認しましょう。

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

コスチューム

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

スプライト「曜日」のコスチュームを確認すると、「Sun.～Sat.」までの7個の曜日のコスチュームがあります。

プログラム（初期設定）

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

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

「x座標を〇、y座標を〇にする」ブロックで初期位置を、「▢へ移動する」ブロックで常に最背面に移動するようプログラミングされています。

ステージ上のスプライトをドラッグ＆ドロップすると、そのスプライトが一番上に表示されます。

たくさんスプライトがあると他のスプライトが隠れてドラッグ＆ドロップできないことがよくあるので、邪魔になるスプライトを常に最背面に移動させておくと、プログラミングしやすくなります。

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

「x座標を〇、y座標を〇にする」ブロックで初期位置を、「大きさを〇%にする」ブロックでスプライトの大きさを設定しています。

スプライトの基本の大きさは「100％」で、「大きさを〇%にする」ブロックの〇に数値を入れると、その数値の大きさになります。

他のスプライトも同様の設定をしていますので、確認しましょう。

また、すべてのスプライトには、トリガーとして「緑の旗が押されたとき」ブロックを使っています。

秒数を表示するプログラムを考える

デジタル時計の「秒数」は、右下の少し小さな数字二桁であらわします。

十の位がスプライト「秒1」で、一の位がスプライト「秒2」です。

２つのスプライトを使って、「秒数」を下のように二桁で表示させます。

現在の時刻を知るには、「調べる」ブロック群の「現在の▢（ローカルタイム）」ブロックを使います。

「現在の▢（ローカルタイム）」ブロックは、現在（ローカルタイム）の指定した「年」「月」「日」「曜日」「分」「秒」の値を返すブロックです。

▼をクリックすると、ドロップダウンリストが現れますので「秒」を選択すると、現在の秒の数値を返します。

「秒」を選択したらクリックしてみましょう。

すると、現在の「秒」が表示されます。

コスチュームの切り替えるブロックは、「コスチュームを〇にする」ブロックと「次のコスチュームにする」ブロックがあったよね。

どちらを使えばいいかな？

それと、秒数の十の位と一の位の数値をそれぞれ取得するには、「演算」ブロック群の「〇の〇番目の文字」ブロックを使いましょう。

「〇の〇番目の文字」ブロックは、指定した文字列（数値）から指定した番目の文字を返すブロックです。

それでは、プログラミングに挑戦してみましょう！

・

・

・

・

・

・

・

・

・

・

秒数を表示するプログラミングはできましたか？

まずは、秒数一の位のスプライト「秒2」のプログラムを考えてみましょう。

「〇の〇番目の文字」ブロックで「1」番目の文字を設定すると、秒数が一桁（3,5,8など）のときは一の位の数値を取得できますが、秒数が二桁（15,24,58など）のときは、十の位の数値を取得してしまいます。

そのため、秒数が二桁のときは、「〇の〇番目の文字」ブロックで「２」番目の文字を設定しなければいけません。

プログラムの内容をシンプルな文章にすると、このようになります。

「なら」という言葉は、あのブロックでしたよね。

気づいた子は、もう一度プログラミングに挑戦してみましょう！

・

・

・

・

・

・

・

・

・

・

秒数を表示するプログラミングはできましたか？

「もし◇なら」のように「もし」「なら」の言葉がでてきたら、「分岐処理」でしたよね。

今回は、「もし◇なら▢でなければ」ブロックを使って、秒数が一桁なら1番目の文字を、一桁でなければ2番目の文字を取得するプログラムを作ります。

分岐処理の条件は、「秒数が一桁かどうか」ということですが、こちらも色々な方法があります。

秒数が一桁の数字って、どんな数値ですか？

10よりも小さい数値ですよね？

数値を比較するときは、「〇＜〇(小なり)」ブロックや「〇＞〇(大なり)」ブロックを使います。

「〇＜〇(小なり)」ブロックは、左の値が右の値より小さいときに「真（true）」を、そうでないときに「偽（false）」を返すブロックです。

「〇＞〇(大なり)」ブロックは、左の値が右の値より大きいときに「真（true）」を、そうでないときに「偽（false）」を返すブロックです。

「もし◇なら▢でなければ」ブロックと「〇＜〇(小なり)」ブロックを使うとこのようになります。

今回は、「〇＜〇(小なり)」ブロックで、現在の「秒」が10より小さいときに、1番目の文字を取得、そうでなければ2番目の文字を取得するプログラムにしています。

そして、コスチュームを切り替えるブロックには、「コスチュームを〇にする」ブロックを使っています。

「コスチュームを〇にする」ブロックは、これまで▼からコスチューム名を選択していましたが、値ブロックを入れることができます。

〇に入れる値ブロックは、「〇の〇番目の文字」ブロックですが、こちらのブロックが返す値は、数値ではなく文字です。

ちなみに、プログラミングの世界では、文字が集まったものを「文字列」といいます。

「〇の〇番目の文字」ブロックが返す値は文字列なので、「5」の値が返ってきたとしても、それは数値ではなく、文字の「5」になります。

つまり、こちらの例では、「コスチュームを〇にする」ブロックの〇にはコスチューム名「5」が入り、コスチューム名「5」が表示されるというわけです。

「コスチュームを〇にする」ブロックの特徴

ちなみに、「コスチュームを〇にする」ブロックの〇に数値を入れると、〇の値は「コスチューム番号」とみなされます。

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

例えばこちらは、コスチューム番号からコスチュームを切り替えるプログラムの１例です。

「〇を〇で割った余り」ブロックで、10で割った余りから一の位の数値を求めています。

さらに、「〇+〇(足し算)」ブロックを使って、求めた数値に「1」を足しています。

これは、コスチューム番号とコスチュームの数字が「1」ずれているためです。

今回の例で求めた「4」は数値になりますので、「コスチュームを〇にする」ブロックの〇に値は、コスチューム番号とみなされて、コスチューム番号「4」に切り替わるというわけです。

こちらのプログラムは、「もし◇なら▢でなければ」ブロックを使わずに、とてもシンプルなプログラムですよね。

「コスチュームを〇にする」ブロックは、〇が数値なら「コスチューム番号」、文字列なら「コスチューム名」とみなすことを覚えておきましょう。

「分岐処理」の色々な条件

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

また、「分岐処理」の色々な条件も紹介しておきます。

今回は、①の現在の秒数が10より小さいなら1番目の文字を取得しましたが、②は現在の秒数が9より大きいなら2番目の文字の取得しています。

9より大きいということは10以上ということなので二桁の場合に、2番目の文字を取得しているわけです。

そして、③では、「〇の長さ（文字列長さ）」ブロックを使って、現在の秒数が1文字なら1番目の文字を取得しています。

「〇の長さ（文字列長さ）」ブロックは、〇に指定した値の文字数を返すブロックです。

つまり、現在の秒数が「0～9」なら「1」を、「10～59」なら「2」の値を返します。

このように「分岐処理」の条件はいくつもあります。

①②③は、どれも同じ動きをするプログラムです。

どの方法でもOKですので、「分岐処理」の条件は、いくつも方法があることを覚えておきましょう。

秒数を表示するプログラムの続き

さて、話を戻して、スプライト「秒2」の現在の「秒」のコスチュームに切り替えるプログラムはできましたが、このままではだめですよね？

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

こちらのプログラムは「分岐処理」ですが、分岐処理が終わると、そこでプログラムが終了してしまいます。

デジタル時計の秒数はずっと動いていますよね？

ずっと動かすには、どのブロックが必要だったでしょうか？

・

・

・

・

・

・

・

・

・

・

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

「ずっと」ブロックでしたよね。

「ずっと」ブロックの中にくっつけたら、初期設定のプログラムにもくっつけましょう。

これで、スプライト「秒2」のプログラムが完成しました。

緑の旗をクリックして、スプライト「秒2」の秒数がずっと動くか確認しましょう。

スプライト「秒2」の動きか確認できたら、スプライト「秒1」のプログラミングにも挑戦しましょう！

・

・

・

・

・

・

・

・

・

・

スプライト「秒1」のプログラミングはできましたか？

こちらが、スプライト「秒1」のプログラムです。

スプライト「秒1」は、秒数の十の位を表すスプライトでしたよね。

よって、現在の秒数が10より小さいときは、コスチュームをコスチューム名「0」に、そうでなければ、現在の秒数の1番目の文字、つまり秒数の十の位の値と同じコスチューム名にしています。

これで、秒数を表示するプログラムが完成しました。

コスチューム番号から切り替えるプログラム

ちなみに、こちらも、コスチューム番号から切り替えるプログラムを作ることができます。

「〇/〇(割り算)」ブロックで、10で割ります。

そして、10で割った値を「〇の▢（数学関数）」ブロックの切り下げで、少数を切り捨てます。

「〇の▢（数学関数）」ブロックの「切り下げ」は、小数点以下の部分を切り捨てるブロックです。

これで十の位の数値だけを取得できました。

最後に、コスチューム番号に合わせるために、足し算で1を足して完成です。

こちらも「もし◇なら▢でなければ」ブロックを使わない、シンプルなプログラムです。

時数と分数を表示するプログラムを考える

今度は、デジタル時計の「時」「分」のプログラムを考えます。

スプライトは下の通りです。

・

・

・

・

・

・

・

・

・

・

時数と分数を表示するプログラミングはできましたか？

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

こちらは、時数を表示するプログラムです。

「現在の▢（ローカルタイム）」ブロックを「時」に変更しただけで、秒数を表示するプログラムと同じですよね。

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

こちらは、分数を表示するプログラムです。

こちらも「現在の▢（ローカルタイム）」ブロックを「分」に変更しただけで、秒数を表示するプログラムと同じです。

月日を表示するプログラムを考える

今度は、年月日の「月」「日」のプログラムを考えます。

スプライトは下の通りです。

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

こちらは、月日を表示するプログラムです。

こちらも「現在の▢（ローカルタイム）」ブロックを「月」「日」に変更しただけで、秒数を表示するプログラムと同じです。

ちなみに、月の十の位は「0」「1」の２つしかありませんので、コスチュームを▼から直接選択したプログラムでもOKです。

年を表示するプログラムを考える

今度は、年月日の「年」のプログラムを考えます。

スプライトは下の通りです。

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

こちらは、年を表示するプログラムです。

「現在の▢（ローカルタイム）」ブロックで「年」を選択すると、必ず4桁の数値を返します。

よって、取得する数値の桁は変わりませんので、千の位は1番目、百の位は2番目、十の位は3番目、一の位は4番目の文字を取得すれば、OKです。

曜日を表示するプログラムを考える

最後は、「曜日」のプログラムを考えます。

スプライト「曜日」には、「Sun.～Sat.」までの7個の曜日のコスチュームがありましたよね。

現在の曜日も「現在の▢（ローカルタイム）」ブロックを使いますが、「曜日」を選択すると、文字ではなく、「1～7」の数値を返します。

それぞれの曜日と返す数値を見て、何か考えつきませんか？

こちらは、曜日を表示するプログラムです。

「コスチュームを〇にする」ブロックに、「現在の▢（ローカルタイム）」ブロックを入れて、「曜日」を選択するだけです。

「曜日」を選択すると、文字ではなく、「1～7」の数値を返しましたよね。

「コスチュームを〇にする」ブロックは、〇の値をコスチューム番号とみなしています。

よって、現在の曜日のコスチューム番号に切り替わるということです。

デジタル時計のプログラムの流れ

すべてのプログラミングが終わったら、改めてデジタル時計のプログラムの流れを確認します。

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

デジタル時計にはたくさんのスプライトがありますが、大きく分けると、この２通りのプログラムの流れをしています。

そして、これらすべてのスプライトのトリガーは、すべて「緑の旗が押されたとき」です。

そして、「ずっと」ブロックで、ぐるぐると反復処理をしています。

たくさんのスプライトが同時に動いている処理を何というか覚えていますか？

並列処理でしたよね。

プログラミングの世界では、処理を同時に並列して行うことを「並列処理」といいます。

今回のプログラムで言えば、すべてのスプライトのプログラムが同時に動いているということです。

ただし、同時といっても、スクラッチでは、一緒に処理をしているわけではなかったですよね。

スクラッチの処理について、忘れた子は、もう一度確認しましょう。

まとめ

「スクラッチでデジタル時計を作ってみよう！①」では、たくさんのスプライトのコスチュームを変えてプログラムを作っていきました。

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

プログラムを確認する 　＞

今回、たくさんのスプライトを使いましたが、同じスプライトばかりでしたよね。

同じスプライトを使う時は、クローンを使うと１つのスプライトだけでプログラミングできます。

クローンを使ったプログラムを作りたい子は、次の「スクラッチでデジタル時計を作ってみよう！②」へ進みましょう！

---

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

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

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

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

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

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

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

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

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

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

デジタル時計のプログラム

デジタル時計のプログラムは、こちらの通りです。

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

秒数を表示するプログラム

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

秒数は、3,5,8といった一桁の場合と、15,24,58といった二桁の場合がある。

今回は、「もし◇なら▢でなければ」ブロックを使って、秒数が一桁（10より小さい）なら1番目の文字を、一桁でなければ2番目の文字を取得するプログラムとしている。

　

「〇の〇番目の文字」ブロックが返す値は、数値ではなく文字のため、「コスチュームを〇にする」ブロックの〇の値はコスチューム名とみなされ、そのコスチューム名に切り替わる。

分数を表示するプログラム

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

分数を表示するプログラムは、「秒数を表示するプログラム」と同じプログラムで、違う点は、「現在の▢（ローカルタイム）」ブロックを「分」に変更したところだけ。

時数を表示するプログラム

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

時数を表示するプログラムも、「秒数を表示するプログラム」と同じプログラムで、違う点は、「現在の▢（ローカルタイム）」ブロックを「時」に変更したところだけ。