スクラッチでデジタル時計を作ってみよう③（文字の色を変える編）

今回、プログラミングに挑戦する、文字の色を変えるデジタル時計は、こちらです。

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

そして、時計をタップ（クリック）すると、文字の色が変わります。

変わる色は、全部で8色です。

プロジェクトをコピー

まずは、前回「スクラッチでデジタル時計を作ってみよう！②」で作ったプログラムをコピーしましょう。

メニューバーの「ファイル」＞「コピーを保存」をクリックすると、プロジェクトがコピーされます。

プロジェクト名が「〇〇 copy」となっていれば、コピーされたプロジェクトになります。

素材の確認

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

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

今回は、すべての文字や記号の色を変えるので、色を変えるスプライトは、下の３個です。

スプライトの色を変えるには？

スプライトの色を変えるには、「▢の効果を〇にする（見た目）」ブロックや「▢の効果を〇ずつ変える（見た目）」ブロックを使いましたよね。

「▢の効果を〇にする（見た目）」ブロックの▼をクリックすると、ドロップダウンリストが現れ、下の7つの効果を選択できます。

今回は、色を変えるので、「色」を選択します。

色の効果

色を選択すると、スプライトの色が変化します。

色の効果は、「0」がオリジナルの色で、「0～199」の200通りのパターンがあります。

「▢の効果を〇ずつ変える（見た目）」ブロックの〇に入れた数値に、200で割った余りの数値が、効果の数値になります。

こちらは、0から色の効果を25ずつ「8回」変えた結果です。

8回目で設定される数値は「0」になり、オリジナルの色に戻っているのが分かりますよね。

今回の文字の色の変化は、「0」「25」「50」「75」「100」「125」「150」「175」の8段階にします。（色の効果を25ずつ変える）

つまり、時計を8回タップ（クリック）すると、元の色に戻るということです。

色の効果をなくす

色の効果をなくすには、「画像効果をなくす」ブロックを使います。

「画像効果をなくす」ブロックは、スプライトに適用されている、すべての画像効果を消すブロックです。

他にもステージの赤丸（●）をクリックして、プログラムを止めると、画像効果も消えて、元に戻ります。

そのため、「画像効果をなくす」ブロックは、初期設定で設定する必要はありません。

　

もしも、プログラム中に効果を変化させて初期化したいときは、「画像効果をなくす」ブロックを使いましょう。

複数の効果を設定していて、一部の効果をなくしたいときは、使えませんので、注意してください。

一部の効果をなくした時は、「▢の効果を〇にする（見た目）」ブロックの〇に「0」を設定すると、どの効果も元に戻ります。

時計をタップ（クリック）したら、文字の色を変えるプログラムを考える

時計をタップ（クリック）したら、文字の色を変えるプログラムのプログラミング方法はいくつもあります。

今回は、変数を使って、文字の色の数値を変えるプログラムにしていきます。

こちらが、今回のプログラムの内容です。

今回のプログラムの内容通りのプログラムを作ってください。

まだ教えていない部分は、「マウスでクリック」のところだけです。

マウスをクリックしたかどうかについては、「調べる」ブロック群から探してみましょう。

それでは、時計をタップ（クリック）したら、文字の色を変えるプログラミングに挑戦しましょう！

・

・

・

・

・

・

・

・

・

・

時計をタップ（クリック）したら、文字の色を変えるプログラミングはできましたか？

グローバル変数「カラー」を作る

まずは、グローバル変数「カラー」を作るところから。

グローバル変数とは、すべてのスプライトで共通して使える変数のことでしたよね。

スプライト「記号」「時1」「曜日」でも使用するので、「すべてのスプライト用」を選択して、グローバル変数を作ります。

スプライト「時計」をマウスでクリックしたなら、グローバル変数「カラー」を25ずつ変える

次は、『スプライト「時計」をマウスでクリックしたなら、グローバル変数「カラー」を25ずつ変える』プログラムです。

まず、変数を作ったら最初にやることありましたよね？

覚えていますか？

・

・

・

・

・

・

・

・

・

・

正解は、変数の初期設定です。

プログラミングの世界では変数の値の設定は、プログラムの最初に設定して、途中で変数の値を変更したいときは、変更したい場所で変更するんでしたよね。

忘れた子は、「スクラッチでプログラミング013｜歩くプログラムを考える⑤」を、もう一度確認しましょう。

初期設定は、トリガーのすぐ下でしたよね。

まずは、「変数を〇にする」ブロックで、色の効果がオリジナルの色の「0」を設定しましょう。

こちらのプログラムの文章で、何か気づきましたか？

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

今回は、マウスでクリックしたなら、グローバル変数「カラー」を25ずつ変えるので、「もし◇なら」ブロックを使います。

そして、「〇+〇(足し算)」ブロックを使って、グローバル変数「カラー」が25ずつ増える（変える）プログラムを入れると、このようになります。

あとは、「マウスをクリックしたかどうか」の条件のブロックだけですが、「調べる」ブロック群から見つかりましたか？

「調べる」ブロック群を見ると、「マウスが押された」ブロックがありますよね。

「マウスが押された」ブロックは、ステージ上でマウスがクリックされたときに「真（true）」を、そうでないときに「偽（false）」を返すブロックです。

「マウスが押された」ブロックを◇に入れると、『もしマウスが押されたなら、グローバル変数「カラー」を25ずつ変える』プログラムが出来上がりました。

あとは、これを本体のプログラムにつなげれば完成です。

こちらのプログラムを実行して、スプライト時計をクリックすると、グローバル変数「カラー」が25ずつ変わるか確認してみましょう。

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

グローバル変数「カラー」のステージモニターを見ると、クリックするたびに数値が増えてます。

しかし、25ずつではなく、50増えたり100増えたりとバラバラです。

どうして、25ずつ増えずに、バラバラに増えるか原因分かりますか？

・

・

・

・

・

・

・

・

・

・

原因は、「処理の速さ」です！

プログラムの特徴は、「プログラムの処理のスピードは、めちゃくちゃ速い！」でしたよね。

「マウスが押された」ときに、グローバル変数「カラー」が25ずつ増えますが、マウスが押されている間は、常に25ずつ増えていきます。

試しに、ステージ上でマウスを押したままにしてみましょう。

すごい勢いでグローバル変数「カラー」の数値が増えていきますよね。

これではだめです。

どのように対策すれば、問題を解決できるでしょうか？

考えてみましょう。

・

・

・

・

・

・

・

・

・

・

何か思いつきましたか？

プログラムの処理のスピードが速いのであれば、クリックが終わるまで、処理を少し待つようにしたらどうでしょうか？

処理を少し待つブロックありましたよね。

処理を止めるのは、「〇秒待つ」ブロックでした。

「〇秒待つ」ブロックの〇に「0.2」秒設定して、プログラムを実行してみてください。

今度は、クリックするたびに、グローバル変数「カラー」が25ずつ増えていきます。

ただ、これも不完全なプログラムです。

問題は2点あるのですが、1点目は、こちらのプログラムもマウスを押したままにすると25ずつ増えていきます。

今回のプログラムは、あくまで『マウスでクリックしたなら、グローバル変数「カラー」を25ずつ変える』プログラムを作ることなので、マウスを押したまま増えるのは、NGです。

ただし、長押しで切り替わる機能として利用するのであれば、このプログラムでもOKです。

要は、どういった仕様のプログラムにするかですので、長押しで切り替わる機能を仕様の１つにするのなら、問題ありません。

さて、少し話がそれましたが、今回の仕様通りのプログラムにする場合は、こちらのようにプログラミングします。

新しいブロックを使っていますが、これがどういうプログラムか分かりますか？

ブロックに書かれている文字だけでも、どういうプログラムなのか読み解けますので、少し考えてみましょう。

・

・

・

・

・

・

・

・

・

・

どういうプログラムなのか分かりましたか？

分からない時は、プログラムの流れをイメージすることです。

まず、「◇まで待つ」ブロックのプログラムの流れを見ていきます。

「◇まで待つ」ブロックは、指定した条件を満たすまで、条件のチェックを繰り返すブロックです。

つまり、◇の条件が「真（true）」になるまで、次の処理に進みません。

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

それを踏まえて、『マウスでクリックしたなら、グローバル変数「カラー」を25ずつ変える』プログラムの流れをまとめるとこのようなイメージになります。

まずは、条件①のマウスが押されたら、「真（true）」を返すので、「条件①を満たしたときの処理」へ進みます。

「条件①を満たしたときの処理」では、最初にグローバル変数「カラー」を25ずつ変えます。

そして、条件②が「真（true）」になるまで、次の処理に進みません。

条件②は、「マウスが押されたではない」つまり、「マウスが押されていない状態」になったら「真（true）」を返すという意味です。

逆の言い方をすると、マウスを押した状態では、ずっと「偽（false）」を返して、次の処理に進まないため、マウスを長押ししても、グローバル変数「カラー」が増え続けることが無くなります。

ちなみに、「◇ではない」ブロックは、◇の条件が「真（true）」のときは「偽（false）」を、◇の条件が「偽（false）」のときは「真（true）」を返すブロックです。

反対の条件にしたいときは、「◇ではない」ブロックをよく使うので、覚えておきましょう。

最後に、もう１点だけ問題があります。

問題が２点あるといいましたよね。

その最後の問題が、ステージのどこをクリックしてもグローバル変数「カラー」の数値が変わってしまうことです。

そもそも「マウスが押された」ブロックは、ステージ上でマウスがクリックされたときに「真（true）」を返すブロックなので、スプライト「時計」は関係ありません。

スプライト「時計」にマウスのポインターに触れたときだけ処理されるように、条件に加える必要があります。

マウスのポインターに触れたかどうか調べるには、「〇に触れた」ブロックを使います。

「〇に触れた」ブロックは、▼で指定した対象物に触れたら「真（true）」を、そうでないときに「偽（false）」を返すブロックです。

今回は、マウスのポインターに触れたときを条件にするため、▼で「マウスのポインター」を選択します。

　

マウスのポインターに触れたときの条件を追加すると、「もし◇なら」ブロックの条件が２つになります。

条件を増やす場合は、「◇かつ◇」ブロックを使います。

「◇かつ◇」ブロックは、◇で指定した2つの条件が、両方とも満たすときに「真（true）」を、そうでないときに「偽（false）」を返すブロックです。

これらのブロックを使って、完成させたプログラムがこちらです。

こちらで、プログラムを実行して、スプライト「時計」をクリックしたときだけ、グローバル変数「カラー」が増えるか確認しましょう。

スプライト「記号」「時1」「曜日」では、ずっと色の効果をグローバル変数「カラー」の数値にする

最後に、『スプライト「記号」「時1」「曜日」では、ずっと色の効果をグローバル変数「カラー」の数値にする』プログラムを作ります。

これは変数の使い方を理解していれば、簡単な問題です。

プログラミングがまだ終わっていない子は、少し考えてみましょう。

・

・

・

・

・

・

・

・

・

・

スプライト「記号」「時1」「曜日」で、ずっと色の効果をグローバル変数「カラー」の数値にするプログラミングはできましたか？

色の効果を指定した数値にするには、「▢の効果を〇にする（見た目）」ブロックを使います。

「ずっと」とあるので、本体のプログラムの「ずっと」ブロックの中に入れればいいだけですよね。

ただし、〇の数値を変えなければいけません。

スプライト「時計」をクリックするごとに、数値を変えていたものが、グローバル変数「カラー」でしたよね。

よって、〇には、グローバル変数「カラー」の値ブロックを入れればよいというわけです。

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

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

ブロックを追加したら、プログラムを実行して、スプライト「時1」の色が変わるか確認しましょう。

このようにクリックするたびに、グローバル変数「カラー」が25ずつ増えていき、色が変わればOKです。

残りのスプライト「記号」「曜日」も同じようにプログラミングしてみましょう。

・

・

・

・

・

・

・

・

・

・

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

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

これで、時計をタップ（クリック）したら、文字の色を変えるプログラムの完成です。

「このスプライトが押されたとき」ブロック

　

今回、「マウスが押された」「〇に触れた」ブロックを使って、スプライトが押されたときのプログラムを作りましたが、1つのブロックで、同じように動作するブロックがあります。

それは、「イベント」ブロック群の「このスプライトが押されたとき」ブロックです。

「このスプライトが押されたとき」ブロックは、対象のスプライトがクリックされたときに、下にくっつけたプログラムを実行するブロックです。

実は、このブロックを使えば、マウスを押したままでも変数は増え続けません。

今回のプログラムで一番簡単な方法は、このブロックを使う方法でした。

しかし、マウスを押したまま処理するようなプログラムを作りたい場合は、このブロックだけでは作れません。

「イベント」ブロック以外にも便利なブロックはたくさんありますが、それらのブロックばかり使っていると、プログラミングで問題が起こった時に、応用ができません。

好きなものを自分の力で作りたい子は、便利な機能ばかり使わずに、プログラムの基本の「順次処理」「分岐処理」「反復処理」の３つの処理を組み合わせながら、自分でプログラムを作りましょう。

今回の話で言えば、スプライトがクリックされたときの処理の流れのパターンをしっかり覚えておけば、必ず何かの役に立ちます。

これからもプログラミングのパターンを紹介していきますので、そのパターンを覚えて、色々なプログラムを作っていきましょう！

ちなみに、「このスプライトが押されたとき」ブロックを使って、マウスを押したまま処理するようなプログラムを作る時は、このようにプログラミングします。

まとめ

「スクラッチでデジタル時計を作ってみよう③」では、時計をタップ（クリック）したら、文字の色を変えるプログラムを作っていきました。

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

プログラムを確認する 　＞

次回は、アナログ時計とデジタル時計でプログラミングした内容からタイマーのプログラムを作ります。

タイマーのプログラムを作りたい子は、次の「スクラッチでタイマーを作ってみよう」へ進みましょう！

---

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

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

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

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

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

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

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

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

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

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

時計をタップ（クリック）したら、文字の色を変えるプログラム

今回追加したプログラムの内容は、こちらです。

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

スプライト「時計」のプログラム

こちらでは、スプライト「時計」をマウスでクリックしたなら、グローバル変数「カラー」を25ずつ変えるプログラムを追加しています。

スプライト「記号」「時1」「曜日」のプログラム

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

こちらでは、ずっと色の効果をグローバル変数「カラー」の数値にするプログラムを追加しています。