micro:bitプログラミング(15) ストップウォッチを作ろう

ストップウォッチを作ろう

ストップウォッチを作ろう

今日は前回の続きです！

前回はmicro:bit(マイクロビット)を使って自分で決めた時間を計測するキッチンタイマーを作りましたが、今回はストップウォッチを作ってみましょうヾ(＠＾▽＾＠)ﾉ

もちろん今回も全てシミュレーターで実行できますので、無料でお試しできます🌟
実機を買うのは、遊び方や使い方を覚えてからでも遅くありません🎊

まずはいつものURLにアクセスしてください😆

Microsoft MakeCode for micro:bit

A Blocks / JavaScript code editor for the micro:bit powered by Microsoft MakeCode.

ストップウォッチの仕様を作ろう

最初に仕様（しよう）を決めます。

「仕様」とは、プログラムがどう動くのかを簡潔にまとめたものになります。ここでは、ストップウォッチの動きをまとめたものという理解で大丈夫です。

ストップウォッチはボタンが押されたら時間を計測し、次に押されるまで何分何秒かかったのかを表示するものですね✨

なので、仕様は次の通りにしましょう。

Aボタンが押されたら時間を計測し始める
Bボタンが押されたら時間を計測を止め、Aボタンが押されてから何秒たったのかをLEDに表示する

さあ❗️これで仕様ができました‼️
あとはこの仕様をプログラミングしていきましょう。

ストップウォッチをプログラミングしよう

流れとしては次のように分けてプログラミングしていきましょう。

変数timeを作る
Aボタンが押されたら変数timeに稼働時間(ミリ秒)を入れる
Bボタンが押されたら稼働時間(ミリ秒)-変数timeをLEDに表示する

イメージとしては次のようになります。

ストップウォッチの経過時間イメージ

簡単ですね👍

では、順番にやっていきましょう‼️

変数timeを作る

変数timeを作ります。

「変数」から「変数を追加する…」を選択します。

「変数を追加する…」をクリックします
表示されたダイアログにtimeと入力して「OK」を押します。

timeを入力して「OK」をクリックします
これで変数timeができました❗️

変数timeの完成！

Aボタンが押されたら変数timeに稼働時間(ミリ秒)を入れる

Aボタンが押された時の命令を作っていきましょう。

仕様では、Aボタンが押された場合に変数timeに稼働時間(ミリ秒)を入れることになっていましたね。

「入力」から「ボタン[A▼]が押されたとき」をクリックします。
「変数」から「変数[time▼]を(0)にする」をクリックします。
「入力」→「その他」から「稼働時間(ミリ秒)」をクリックします。
「稼働時間(ミリ秒)」を「変数[time▼]を(0)にする」の(0)の中に入れます。
「変数[time▼]を(稼働時間(ミリ秒))にする」を「ボタン[A▼]が押されたとき」の中に入れます。

Aボタンが押された時の命令

このようになっていればOKです🌟

Bボタンが押されたら稼働時間(ミリ秒)-変数timeをLEDに表示する

次はBボタンが押された時の命令を作っていきましょう。

仕様では、Bボタンが押された場合に稼働時間(ミリ秒)から変数timeを引いた数をLEDに表示することになっていましたね。

「入力」から「ボタン[A▼]が押されたとき」をクリックします。
「基本」から「数を表示(0)」をクリックします。
「変数」から「time」をクリックします。
「入力」→「その他」から「稼働時間(ミリ秒)」をクリックします。
「計算」から「(0) [-▼] (0)」をクリックします。
「(0) [-▼] (0)」の左側の(0)に「稼働時間(ミリ秒)」を入れます。
「(0) [-▼] (0)」の左側の(0)に「time」を入れます。
「稼働時間(ミリ秒) [-▼] time」を「数を表示(0)」の(0)に入れます。
「数を表示(稼働時間(ミリ秒) [-▼] time)」を「ボタン[A▼]が押されたとき」の中に入れます。
「ボタン[A▼]が押されたとき」の[A▼]をクリックして、ボタンBに変えます。

ボタンBが押された時の命令

このようになればOKですよ💕

動作確認してみよう

おめでとうございます🎉🎊🎉

これでストップウォッチが完成しました‼️

では、早速動作確認をしていきましょう。

Aボタンを押して、しばらく待ってからBボタンを押してみます。

LEDに数が表示されましたか？

表示されたらOKです。念のため完成図を載せておきますので、もし正しく動かない場合はご自分のプログラムと見比べてください。

ストップウォッチ完成図

改良しよう

さて、これで一応ストップウォッチは完成しました‼️

完成しましたが…

ですが…

見づらいですよね👀

なぜ見づらいかというと答えは簡単で、ミリ秒で表示しているからです?

いちいち表示された数を1000で割らないと何秒経ったのかすぐ分からないし。。。

というわけで改良します！

ミリ秒をそのまま表示するのではなく、秒で表示するようにしてみましょう！

変換するには

ミリ秒を秒に変えるのは簡単です。

1秒=1000ミリ秒なのですから、1000で割れば秒が求められますね。

ミリ秒	秒
1	0.001
10	0.01
100	0.1
1000	1
10000	10
100000	100

プログラミングしよう

ではこの「1000で割る」というのをプログラミングしてみましょう。

とは言ってもすでにできている命令ブロックに追加するだけなので簡単ですよ🔆

完成しているプログラムの「数を表示(稼働時間(ミリ秒) [-▼] time)」から(稼働時間(ミリ秒) [-▼] time)を外しておきましょう。

計算を外しておきます
「計算」から「(0) [÷▼] (0)」をクリックします。

割り算の計算をクリック
「(0) [÷▼] (0)」の右側を1000に変えます。

1000で割るようにします
「(0) [÷▼] (0)」の左側に(稼働時間(ミリ秒) [-▼] time)を入れます。

「稼働時間〜」を左側に入れます

　
できた命令を「数を表示(0)」の中に戻します。

数を表示のところに戻します

これで完成です✨

動作確認して、2.19や1.66などのように秒が正しく表示されたらOK🎉

念のため完成図を載せておきますので、ご自分のものと見比べてくださいね👀

完成図

さらに改良しよう

上までの説明でAボタンが押されたら計測を開始し、Bボタンが押されたら2.78のように秒が表示されるストップウォッチが完成しました‼️

ストップウォッチとしてはこれでも十分なんですが、60秒を超えた時に1分と表示されてほしい…😨

なので、次のステップとして「分」を表示するように改良しましょう！

プログラミングの考え方

いくつかの方法がありますが、一番簡単な方法でやってみましょう。

まず、変数を三つ作ります。名前と役割はそれぞれ次の通りです。

変数「temp」＝（稼働時間(ミリ秒)-time）の結果を一時的に覚えておく変数です。分と秒を求める時に毎回（稼働時間(ミリ秒)-time）の命令を作っていると面倒臭いので、変数を使ってラクをします💦
変数「min」＝分を表す変数です。
変数「sec」＝秒を表す変数です。

それぞれの求め方は次のようにします。

変数「temp」

これはもうやっていますね。（(稼働時間(ミリ秒)-time) / 1000）の計算結果をそのまま使用します。

変数tempの命令ブロック

変数「min」

変数tempに60が入っているとします。

この時、表示する時間は1分(=60秒)ですね。

では、tempに120が入っていた時はどうでしょう？

2分(=120秒)ですね。

どうやって計算したかわかりますよね？

そう。

それぞれ60÷60, 120÷60です。

では、tempに130が入っていた場合はどうなるでしょう？　221だったら？？

単純に130÷60,221÷60とした場合、

130÷60 = 2.166666666666667
221÷60 = 3.683333333333333

となってしまいます。この小数点以下は「分」を表示する時には不要なので、切り捨ててしまいましょう。

「計算」の中に「小数点以下四捨五入▼ (0)」という命令ブロックがあるので、これを使用します。

「計算」から「小数点以下四捨五入▼ (0)」をクリックします。
「小数点以下四捨五入▼」をクリックして「小数点以下切り捨て(truncate)」を選択します。
「計算」から「(0) [÷▼] (0)」をクリックします。
「変数」からtempをクリックします。
「(0) [÷▼] (0)」の左側の(0)にtempを入れます。
「(temp) [÷▼] (0)」の右側の(0)を60にすます。
できた計算命令を「小数点以下四捨五入▼ (0)」の(0)の中に入れます。
「変数」から「変数[min▼]を(0)にする」をクリックします。
「変数[min▼]を(0)にする」の(0)に、上で作った命令を入れます。

「分」の計算式

こうなればOKです‼️

変数「sec」

変数「sec」については、minと逆に求めます。

仮にtempが130,151の場合、

130÷60 = 2.166666666666667
221÷60 = 3.683333333333333

となりますが、「分」の値は必要ありません。小数点以下があればOKですね。

ということで、「計算」にある「(0) を (1) で割ったあまり」を使いましょう。

「計算」から「(0) を (1) で割ったあまり」をクリックする。
「変数」からtempをクリックする。
「(0) を (1) で割ったあまり」の左側の(0)にtempを入れる。
「(temp) を (1) で割ったあまり」の右側の(1)を60にする。
「変数」から「変数[sec▼]を(0)にする」をクリックします。
「変数[sec▼]を(0)にする」の(0)に、上で作った命令を入れます。

できましたか？こう↓なればOKですよ💖

secの計算式

文字を表示しよう

さぁ、これで変数min(分)とsec(秒)ができました！

あとはこれらを表示するだけですが、例えば1分50秒をそのまま表示しようとすると

150

のようになってしまいます。本当なら1:50と表示して欲しいですよね？

これを実現するために、今回は文字列を使いましょう。

命令ブロックの一番下にある「高度なブロック」から「文字列」→「文字列をつなげる(“Hello”)(“World”) (-)(+)」をクリックします。

文字列を使おう
「変数」から「min」をクリックし、「文字列をつなげる(“Hello”)(“World”) (-)(+)」の”Hello”と置き換えます。
「文字列をつなげる(min)(“World”) (-)(+)」の”World”を”:”に変更します。
「文字列をつなげる(min)(“:”) (-)(+)」の(+)をクリックします。
「変数」から「sec」をクリックし、「文字列をつなげる(min)(“:”)(“”) (-)(+)」の一番右と置き換えます。
「入力」から「文字列を表示(“Hello!”)」をクリックし、上でできた命令を”Hello!”と置き換えます。