マイクロビットで腕時計を作ろう

マイクロビットのサンプルプログラムのコードがあります。古いTシャツとジーンズを使った腕時計の作り方がありますが、あいにく古着が無い場合もありますよね!
そこで、100均の腕時計ベルトを使って代用して作ってみました。

腕時計のコードは?

マイクロビット JavaScript ブロック エディタを使ってプログラムを作ります。サンプルコードがあるのでmicrobit初心者でも簡単に出来ますよ!

時間変数を作る

サンプルコードを見ればmicrobitでコードを作成したことがある人なら問題なく作成できるかもしれませんが、初心者には使用するブロックの場所が分かりづらいと感じたので、手がかりなどをご紹介します!(私は数分悩みました;)

①変数「ampm(午前午後)」を作成します。「変数」にある「変数を追加する」をクリックしましょう。

②作成する変数の名前に、キーボードで「ampm」と入力します。

③「最初だけ」ブロックの中に「変数ampm▼を0にする」をドラッグします。

④「論理」の「偽」ブロックを「0」の上にドラッグします。


⑤これで、「最初だけ変数ampmを偽にする」というコードが出来ました!
⑥変数「time(時間)」を作成します。「変数」にある「変数を追加する」をクリックしましょう。

⑦作成する変数の名前に、キーボードで「time」と入力します。

⑧「変数time▼を0にする」を下図のようにドラッグします。

⑨検索窓に「文字」と入力して、「” “」を「0」の上にドラッグします。

⑩これで、「最初だけ変数timeを” “にする」というコードが完成しました!

⑪同じように、変数「adjust(調整する)」「minutes(分)」「hours(時間)」を作成して、3つのブロックを下図のようにドラッグしましょう。

ディスプレイに時間を表示する

①「入力」の「ゆさぶられたとき」のブロックの中に、「変数」の「変数timeを0にする」ブロックを、「基本」の「文字列を表示」ブロックをそれぞれドラッグします。(※変数の名前はプルダウンメニューで変更できます)

②検索窓に「文字」と入力して、「文字列をつなげる”Hello””World”」を「変数time▼を0にする」ブロックの「0」の上にドラッグします。

③「文字列をつなげる”Hello””World”」ブロックの右側のプラスのアイコンをクリックします。

これで、3つの文字列をつなげられるようになりました!

④「変数」の「hours」「minutes」「time」ブロッグをそれぞれ文字列の上にはめ込みます。

⑤”Word”を消して、キーボードの半角英数字で「:(コロン)」と入力します。


これで、ディスプレイに時間を表示するコードが完成しました!

ボタンで時間を設定する

Aボタンを押したときに「時間」を、Bボタンを押したときに「分」を設定できるようにします。

時間を設定する

①「入力」の「ボタンAが押されたとき」の中に、「論理」の「もし真▼なら~でなければ・・」のブロッグをドラッグします。


②「論理」の「0<0」のブロックを「真」の上にドラッグします。


「③変数」の「hours」「hoursを1だけ増やす」「hoursを0にする」のブロックを下図のようにドラッグします。

④数値を「23」と入力します。


hours<23
とすることで、時間カウントを23時間に制限できるようになります。

分を設定する

①分を設定するコードは時間を設定するコードとほぼ同じなので、時間を設定するコードを右クリックで複製して編集します。

同じコードが複製されました。複製したブロックはフェードしています。

②プルダウンメニュー▼を表示して、「A」を「B」に、「hours」を「minutes」に、「23」を「59」にそれぞれ変更します。


minutes<59
とすることで、分カウントを59分間に制限出来るようになりました。

表示形式を設定する

AボタンとBボタンを同時に押すと表示形式設定できるようにします。

  • 「am/pm」が表示される12時間
    「am/pm」が表示されない24時間

のどちらかの表示形式が選べるようになります。

①「入力」の「ボタンAが押されたとき」のブロックの中に、「変数」の「ampmを0にする」のブロックをドラッグします。

②プルダウンメニュー▼を表示して、「A」を「A+B」に変更します。

③「倫理」の「~ではない」ブロックを下図のようにドラッグします。

④「変数」の「ampm」ブロックを下図のように組み込みます。


これで、AボタンとBボタンを同時に押すと表示形式が選べるようになりました。

分と時間をカウントアップするコードを作ろう

表示と設定のコードが完成したので、最後に時計が動くようにカウントアップするコードを作成します。

①「基本」の「ずっと」ブロックの中に、「一時停止(ミリ秒)」ブロックと「論理」の「もし真▼なら~でなければ・・」ブロッグとをドラッグします。

②「変数」の「minutes」ブロックと「minutesを1だけ増やす」と「minutesを0にする」ブロックをそれぞれ下図のようにドラッグします。

③「一時停止(ミリ秒)100▼」ブロックの「100」を「60000」に、「minutes▼<▼0」ブロックの「0」を「59」に変更します。


これで、60000ミリ秒(1分)ごとにカウントされるようになります。
minutes<59
とすることで、分カウントを59分間に制限できるようになりました。

④次に、分カウントが60になったときに1時間ずつ増えていくコードを追加します。
※分は0になり、再びカウントアップを始めます
「論理」の「もし真なら~でなければ・・」と「0<0」のブロックを下図のようにドラッグします。


⑤「変数」の「hours」「hoursを1だけ増やす」「hoursを0にする」のブロックを下図のようにドラッグします。

⑥「hours▼<▼0」ブロックの数値「0」を「23」に変更します。

hours<23
とすることで、時間カウントを23時間に制限できるようになりました。24時間になると時間カウントが0になり、再び0からカウントアップされるようになります。

リアルタイムで時計を表示させる

先ほど「ディズプレイに時間を表示する」で作成したコードを修正して、リアルタイムの時間をディスプレイに表示するコードを作成します。

①「ゆさぶられたとき」「変数time▼を0にする」以外のブロックは外してバラバラにしておきます。

②「倫理」の「もし真▼なら~」のブロックを2つ、「もし真▼なら~でなければ・・・」のブロックを1つ、「0<0」のブロックと「0=0」のブロックを1つずつドラッグして下図のように組み合わせます。


③「変数」の「adjustを0にする」のブロックを2つドラッグして、下図のようにはめ込みます。

④プルダウンメニューをクリックして、変数「time」を「adjust」に変更しましょう。

⑤「計算」の「0-▼0」ブロックをドラッグして、下図のようにはめ込みます。


⑥「変数」の「hours」ブロックを4つ、「ampm」ブロックを1つ下図のようにはめ込みます。

⑦プルダウンメニュー▼を表示して、不等号「<」を「>」に、3カ所にある数値「0」を全て「12」に変更します。


⑧「変数」の「ampm」ブロックと「変数time▼を0にする」を下図のようにドラッグします。


⑨①でバラしておいた文字列をつなげるプロックのマイナスのアイコンをクリックします。

⑩すると、3つの文字列が2つになります。中の文字は消しておきましょう。

⑪「変数time▼を0にする」の「0」の上にはめ込みましょう。


⑫赤線で囲ったブロックを右クリックして複製(コピー)します。


⑬この操作を3回行い、複製したブロックを下図のように組み合わせます。


⑭「変数」の「adjust」ブロックを1つ、「time」ブロックを3つドラッグして下図のようにはめ込みます。

⑮「計算」の「0÷0」のブロックを1つドラッグして下図のようにはめ込みます。


⑯「計算」の「0を1で割ったあまり」を下図のようにはめ込みましょう。

⑰「変数」の「minutes」のブロックを2つドラッグして、下図のようにはめ込みます。数値「0」を「10」に変更して、文字列に「:(コロン)」と入力しましょう。


⑱「論理」の「もし真▼なら~」ブロック、「もし真▼なら~でなければ・・・」ブロック、「0<0」ブロックを下図のようにドラッグします。

⑲黄色枠で囲まれているブロックを右クリックで2つ複製します。

⑳複製したブロックを下図のようにはめ込みます。


㉑①でバラバラにしておいた「文字列を表示」ブロックを組み込みます。

㉒「変数」の「ampm」「hours」「time」ブロックを1つずつドラッグして下図のようにはめ込みます。


㉓不等号「<」をプルダウンメニュー▼を表示して「>」に、数値「0」を「11」に変更します。文字列にそれぞれ「PM」「AM」とキーボードで入力しましょう。


これで全てのコードが完成しました!!

シミュレーターで確認してみよう

シミュレーターの「SHAKE」をクリックすると、「0:00」と時刻が表示されます。

・Aボタンを押す回数で時間
・Bボタンを押す回数で分
が調整できます。試しに、Bボタンを5回押してから「SHAKE」をクリックすると「0:05」と表示されます。※実際にはマイクロビットを振る動作を行います

「A+B」をクリックするとAM/PMが表示される12時間時計になります。
・実際にはAボタンとBボタンを同時に押す動作を行います。

シミュレーターでの操作が上手くいったらプログラムをダウンロードします。シミュレーターが動作しない場合は、コードが合っているか見比べてみて下さいね!

プログラムをマイクロビットに転送しよう

タイトルを付けてから、プログラムをパソコンにダウンロードします。

ダウンロードが完了したら、プログラムをマイクロビットに送信します。

100均グッツとマイクロビットで腕時計を作ろう

せっかくなので、100均グッツを使って簡単なDIYをしてみましょう!腕を振ると現在時刻が表示される腕時計なんて、スマートですよね。

・100均の腕時計ベルト
・100均の養生テープ(マステなどでも)
・マイクロビット
・マイクロビット用電池ボックス
で腕時計をDIYしてみましょう!

100均の腕時計ベルトとマイクロビット用電池ボックスを養生テープで固定します。

マイクロビット本体をLEDが見えるように固定しましょう!

裏側はコードが隠れるようにしておきます。

養生テープをマステで飾るとオシャレに見えますよ!

腕に巻くと、カッチリした腕時計のように見えます。マイクロビットのサイズ感はピッタリですね!

まとめ

今回、腕時計のコードをサンプルコードを見ながら作成してみました。時間もコード化できるんだ!凄い!コードを最初に書いた人は天才だなぁ・・と思いました。DIYは得意なので、マイクロビットを使った工作はどんどん思いつきますがコードを自分で書く力が足りません。

自分でコードを書いて皆が「あ!」という工作を作れたら楽しいですね。プログラミングを工作というカタチで小学校の授業などで取り入れられたら、子どもたちにコードを書く楽しさ、モノ作りの楽しさがより伝わるのではないかなと思っています。