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

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

腕時計のコードは?

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

時間変数を作る

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

「基本」と「変数」のカテゴリの中から上の2つのブロックをドラッグして組み合わせます。ここで、変数ブロックの名前を「ampm」に変更します。

プルダウンメニュー▼をクリックして、「変数の名前を変更」を選択します。キーボードで変数名を「ampm(午前・午後)」に変更しましょう。

「論理」カテゴリをクリックして「偽」ブロックを「0」の上にドラッグします。

これで、「最初だけ変数ampmを偽にする」というコードが出来ました!

再び変数カテゴリから同じブロックをドラッグして組み合わせます。

変数の名前を「time(時間)」に変更しましょう。

①カテゴリ上部の検索窓に「文字」と入力
②「” “」を「0」の上にドラッグします。

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

変数カテゴリから同じブロックを3つドラッグして、変数の名前をそれぞれ
・adjust(調整する)
・minutes(分)
・hours(時間)
に変更します。この作業のコツは、一度に変数ブロッグを複数ドラッグするのではなく、変数の名前を変更してから次のブロッグをドラッグ‥といったように1つずつ行います。※一度に同じ変数ブロッグを複数ドラッグして名前を変更すると、他の変数ブロッグの名前も同様に変更されてしまうようです;

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

「入力」カテゴリから「ゆさぶられたとき」のブロックを、「変数」カテゴリから「変数を0にする」ブロックを、「基本」ブロックから「文字列を表示」ブロックをドラッグします。

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


①カテゴリ上部の検索窓に「文字」と入力
②「文字列をつなげる」を2つドラッグします。

下図のように組み合わせて、「0」の上にドラッグします。

「変数」カテゴリから
・hours
・minutes
・time
のブロッグをドラッグしてそれぞれはめ込みます。

キーボードの半角英数字で「:(コロン)」と入力します。

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

ボタンで時間を設定する

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

時間を設定する

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

「論理」カテゴリから「0<0」のブロックを「真」の上にドラッグします。

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

プルダウンメニューをクリックして、「変数」を「hours」に変更して数値を「23」と入力します。

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

分を設定する

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

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

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

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

表示形式を設定する

AボタンとBボタンを同時に押すと表示形式設定できるようにします。
①「am/pm」が表示される12時間
②「am/pm」が表示されない24時間
のどちらかの表示形式が選べるようになります。「入力」カテゴリから「ボタンAが押されたとき」のブロックを、「変数」カテゴリから「変数を0にする」のブロックをドラッグします。

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

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

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

表示と設定のコードが完成したので、最後に時計が動くようにカウントアップするコードを作成します。「基本」カテゴリから「ずっと」と「一時停止(ミリ秒)」のブロックを、論理カテゴリから「もし真なら~でなければ・・」のブロッグを、「変数」カテゴリから「変数を1だけ増やす」と「変数を0にする」ブロックをドラッグします。

「倫理」カテゴリから「0<0」のブロックを、変数カテゴリから「minutes」ブロックをドラッグします。プルダウンメニュー▼を表示して、「変数」を「minutes」にそれぞれ変更しましょう。

それぞれ数値を下図のように変更します。

これで、60000ミリ秒(1分)ごとにカウントされるようになります。
minutes<59
とすることで、分カウントを59分間に制限出来るようになりました。次に、分カウントが60になったときに1時間ずつ増えていくコードを付けたします。
※分は0になり、再びカウントアップを始めます
「論理」カテゴリから、「もし真なら~でなければ・・」と「0<0」のブロックを下図のようにドラッグします。

「変数」カテゴリから、「hours」「変数を1だけ増やす」「変数を0にする」のブロックを下図のようにドラッグします。

数値「0」を「23」に、「変数」を「hours」にそれぞれ変更します。

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

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

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

「ゆさぶられたとき」以外のブロックをカテゴリ側にドラッグするとゴミ箱が出てくるので、削除します。

「ゆさぶられたとき」のブロックだけが残りました!

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

「変数」を「adjust」に変更して、「計算」カテゴリから「0-0」のブロックをドラッグして下図のようにはめ込みます。

「変数」カテゴリから「hours」ブロックを4つ、「ampm」ブロックを1つかずのようにはめ込みます。プルダウンメニュー▼を表示して、不等号「<」を「>」に変更、数値を「0」から「12」に3カ所変更します。

「変数」カテゴリから「変数を0にする」を下図のようにドラッグします。

カテゴリ上部の検索窓に「文字」と入力して、「文字列をつなげる」のブロックを「0」の上にドラッグします。

赤線で囲ったブロックを4つ複製(コピー)します。

ブロックの上で右クリックを押して「複製する」を選択する操作を3回行います。

複製したブロックを下図のように組み合わせます。

「変数」カテゴリから「adjust」のブロックを1つ、「time」のブロックを3つ、「計算」カテゴリから「0÷0」のブロックを1つドラッグして下図のようにはめ込みます。

①カテゴリ上部の検索窓に「あまり」と入力
②「0÷1のあまり」のブロックをドラッグします。

下図のようにはめ込みましょう。

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

「論理」カテゴリから「もし真なら~」のブロックを、「もし真なら~でなければ・・・」のブロックを、「0<0」のブロックを、「変数」カテゴリから「変数を0にする」のブロックを、「基本」カテゴリから「文字列を表示”Hello!”」のブロックを下図のようにドラッグします。

①カテゴリ上部の検索窓に「文字」と入力
②「文字列をつなげる」のブロックをドラッグします。

「0」の上に「文字列をつなげる」のブロックをはめ込みます。

「変数」を「time」に変更して、「変数」カテゴリから「adjust」ブロックを1つ、「hours」ブロックを1つ、「time」ブロックを2つドラッグして下図のようにはめ込みます。

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

ブロックの上で右クリックをして「複製」を選択します。

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

不等号「<」をプルダウンメニュー▼を表示して「>」に、数値「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は得意なので、マイクロビットを使った工作はどんどん思いつきますがコードを自分で書く力が足りません。

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