シンプルなキッチンタイマーをmicro:bitで作成します!
それっぽいデモ機ではなく、実用的に使えるキッチンタイマーを作ることでプログラミング技術の上達を目指します。

さらに、メロディーを変えたり、LED表示を変えたり、センサーを使ったり、自分だけが分かる仕様にしたりと、様々なアイデアを加えれば、世界に1つしかないオリジナルのキッチンタイマーに仕上げることが可能です!
micro:bitにはWeb上で無料で出来るシミュレーターも用意されていますので、まずはシミュレーターで試してみて気に入ったら購入することもできますし、今回のキッチンタイマーであれば最後までシミュレーターのみで進めることも可能です!

学べること

必要なスキル

部品購入

必要な部品

PCと接続せずにキッチンタイマーとして使うには、micro:bit本体の他に電池ボックスなど給電する機器が必要になります。

micro:bitは2020年11月に新バージョンであるV2が発売されています。見た目はかなり似ているので、購入する際はV1かV2か確かめてください。V2の大きな変更点として「マイク」「スピーカー」が追加になっています。値段は同じなのでV2を購入しましょう。

購入先の例

様々なショップで販売されておりますので、購入しやすいところでお求めください。また、電池やUSBケーブルなど既にお持ちであれば購入不要です。ここでは「秋月電子通商」で購入する場合の例を挙げます。

補足

micro:bitはBLE(Bleutooth Low Energy)通信が可能で、コイン電池でも動作可能なマイコンボードです。
とても使いやすいUIが最も特徴的です!

開発手順

「MakeCode」という開発環境があり、インストールやサインアップなど不要でブラウザ上でプログラミングとシミュレーションを行えることが特徴です。
micro:bitへの書き込みはUSB経由でファイルをドラッグ&ドロップするだけ。すぐにmicro:bit単体での動作が可能となります。

センサ及びアクチュエータ

micro:bitは安価で小さいですが、様々なセンサーやアクチュエータが搭載されており、高機能なガジェットづくりが可能となっています。センサーは入力するもの、アクチュエータは出力するものとして捉えて下さい。キッチンタイマーで使うのは入力として「タクトスイッチ」、出力として「赤色チップLED」と「圧電スピーカー」の3つです。この3つを使うことにより、スイッチで操作し、LEDで時間がわかり、音で確認することできます。

プログラミング

micro:bitは様々なプログラミング言語で開発することが可能です。今回は直感的に組むことが出来るブロックを使ってプログラミングを行います。いわゆる普通のコードとは見た目は異なりますが、論理的な思考は全く同じです。

動作手段

micro:bitは様々な動作の組合せがありますが、キッチンタイマーでは「シミュレーターのみで動作」もしくは「micro:bit単体」で使います。電池ボックスなどを繋げば完全にスタンドアローン、つまりPCやネット等に繋がず単独で動作可能です。ただし、プログラムをmicro:bitに書き込むときはPCとUSBで繋ぐ必要があります。

MakeCode editorを使って行います。
インストールやサインアップ等は不要で、ブラウザ上でいきなり開発できます!

MakeCode editorを開いて「新しいプロジェクト」ボタンを押します。

「プロジェクトに名前をつけてください」と表示されるので、適当な名前を入力して「作成」ボタンを押します。下の画像の例では「テスト」と入力しています。

しばらくするとこのような画面が表示されます。この画面でmicro:bitの開発を行います。

以下のように「基本」をクリックし、その中の「アイコンを表示」ブロックを「最初だけ」というブロックの中にドラッグ&ドロップしてみて下さい。ブロックが重なっていても動作に問題ありませんが、見づらいので「ずっと」ブロックを最後に少し右に避けています。

左側に表示されているmicro:bitにハートの形でLEDが点灯されていれば成功です。なお、micro:bitのカラーは赤・黄・緑・青などがありますが、ランダムに変更するため気にしなくて良いです。

さらにブロックを追加してみましょう。
「入力」から「ボタンAが押されたとき」ブロックを空いているスペースへドラッグ&ドロップします。

続けて「基本」から「アイコンの表示」ブロックを先程置いたブロックの中に入れます。

「アイコンの表示」ブロックの横に下向きの三角形マーク ▼ がありますので、 ▼ をクリックして右上の「うれしい顔」を選択して下さい。

最終的にこのように配置されていればOKです。各ブロックの座標位置は自由です。自分で見やすいように配置してください。

左側のmicro:bitのボタンをクリックします。
クリック前はLEDが「ハート」ですが、Aボタンクリックで「うれしい顔」の表示になります。さらに下方の「シミュレーターを再起動する」ボタンクリックで、プログラムが再起動します。

ブロックによるプログラミングはこのような感じで進めてゆきます。非常に直感的で分かりやすいかと思います。
次のチャプターでは、画面全体やメニューなどの詳細について説明します。

説明を見るだけでなく、実際に同じように動かしてみることをお勧めします。

コードの保存について

MakeCodeは自動的に特別な場所(ブラウザのローカルストレージ)に保存されます。
使用するPCとブラウザが同じであれば、シャットダウンや再起動に関わらず、前回からの続きが可能です。ただし、ブラウザをシークレットモード等で閲覧している場合は再起動すると消えてしまうのでご注意ください。またブラウザの設定からデータを消すと消えますのでご注意ください。
一方で自分のPCに通常のファイルとして保存することも可能ですので、後ほど説明します。

各メニューの説明

MakeCode画面の各アイコンを四角で囲みました。順に説明してゆきます。

Microsoft・micro:bit

「Microsoftロゴ」はクリックしても何も起きません。
「micro:bitロゴ」は最初のホーム画面に戻ります。

プログラミング言語切替

今回のキッチンタイマーでは「ブロック」固定のままで使用します。
プログラミングコードとして「ブロック」と「JavaScript」及び「Python」の切替えが出来ます。

ホーム・共有・ヘルプ・その他

「家アイコン」は「micro:bitロゴ」と同じで、最初のホーム画面に戻ります。
「左から2番目のアイコン」は「共有」で、自分が作ったコードを他の人に共有したい場合に使用しますが、今回のキッチンタイマーでは使いません。
「?アイコン」はヘルプメニュー、「歯車アイコン」はその他です。

この4つのアイコンで、唯一使うのが「歯車アイコン」です。例えば「歯車アイコン」から「プロジェクトを削除する...」を選択するとプロジェクトを削除できます。ホーム画面に戻って「新しいプロジェクト」ボタンを押して新たにプロジェクトを適当に作成してから、削除を試してみましょう。

シミュレーター操作

「シミュレーターの開始」や「シミュレーターの再起動」で使用します。
左から順番に説明すると以下の通りです。

基本的には、左の2つ「四角」と「矢印」だけ使います。

各種ブロック

最も使うメニューですが、キッチンタイマーでは「無線」と「高度なブロック」は基本的に使用しません。
検索ボックスから検索も可能ですが、検索しなければ見つからないほどメニューは多くないので特に使用しなくても大丈夫です。
左側に付いている < の矢印アイコンをクリックするとシミュレーター画面が消えてコードの場所を広く取ることが可能です。新たに出てくる >の矢印アイコンをクリックすれば元に戻ります。

ダウンロード

「ダウンロード」ボタンを押すとPCに microbit-テスト.hex というファイルが保存されます。 画面に以下のような表示が出ますので「完了」ボタンを押して閉じます。

なお、hexファイルをMakeCodeにドラッグ&ドロップするとプロジェクトを開くことができます。
実施すると新たにプロジェクトが作られます。ホーム画面に戻るとプロジェクトが新たに作られていることが分かります。
重複して不要な場合は先程の「プロジェクトの削除」を実施してください。

プロジェクト保存

中央の「フロッピーディスク」アイコンでプロジェクト名の変更とダウンロードが同時に出来ます。
なお、プロジェクト名を変更した場合、PCアプリによくある「別名で保存」とは動作が異なりますのでご注意ください。元の名前でのプロジェクトは残らず別名に変更されたプレジェクトだけが保存される形になります。保存後にホーム画面に戻ってみると分かります。

一番右のアイコンはGitHubとの連携です。今回は無視してください。

編集・表示

左から順番に説明します

これはよくあるPCアプリと同じ内容です。Ctrl + Zなどのショートカットキーも使えますので、ご存知の方はご活用ください。ご存知でない方はショートカットキーを無理に使う必要はないです。

初めてのUSB接続

USBケーブルとmicro:bitとPCに接続します。順番は関係なく、どちらが先でも構いません。
ケーブルは長くても問題ありません。

画像引用元:microbit.org

新品のmicro:bitには電源を供給すると始まるデモコードが入っています。音やLEDドットによるアニメーション、文字が流れますので、それに従って直感的に遊ぶことが可能です。

一通りデモを堪能したら、プログラムの書き込みに進みましょう。

書き込み

最初の1回目だけmicro:bitとPCとの接続設定が必要で、2回目以降の書き込みはボタン1つで簡単になります。

「歯車アイコン」からConnect deviceを選択します。

既にmicro:bitとPCが接続されている状態だと思いますので、次へをクリックします。

次へをクリックします。

BBC micro:bit CMSIS-DAPを選択して接続をクリックします。

接続に成功するとこの画面になるので完了をクリックします。

左下のダウンロードをクリックするとmicro:bitへの書き込みが始まります。micro:bitのUSBコネクタ付近のLEDがチカチカと光ります。

アイコンがこのような表示になります。「MICROBIT」という名称のフォルダ表示(Windowsの場合はエクスプローラー、Macの場合はFinder)が出ている場合は閉じてもらって問題ありません。しばらく待ってみても、表示が変わらない場合はもう一度ダウンロードをクリックしてみて下さい。

シミュレーションのときと同様に、ハートが表示され、Aボタンを押すと「うれしい顔」に切り替われば成功です。

リセットボタン

micro:bitの実物にはシミュレーターにはないボタンが裏面に存在します。それを押すとリセット、つまり「シミュレーターの再起動」と同じ動作を行います。なお、USBケーブルを外して再び接続してもリセットと同じ動作を行います。

スタンドアローンでの動作

一旦プログラムを書き込めば、PC無しでも単独で動くことができます。電池ボックス(PHコネクタ付き)をお持ちの方は、電池を入れてmicro:bitのコネクタに接続すると確かめられます。また、下の写真のようにモバイルバッテリーでUSB給電するだけでも単独動作可能です。

micro:bitはチュートリアルで触った通り、直感的に使えるため説明がほぼ不要ですが、気づきにくい点もいくつかありますので補足します。

その他で見つかるブロック

例えば「入力」をクリックすると「その他」というメニューが現れ、選択することができます。意外と見落としがちです。なお、全てのブロックに「その他」が存在するわけではないというのも分かりにくい点でもあります。

スクロールで見つかるブロック

表示しきれずに下の方にブロックがある場合がありますので、マウススクロールで見落とさないようにしましょう。

ブロック1つだけを選択

このように、1つだけブロックを移動したいのに複数が一緒にくっついてきてしまう場合があります。

その場合、WindowsであればCtrlキーを押しながら、対象のブロックを移動することで実現できます。
(Macの場合はcommandキー)

ブロックの複製

様々な方法がありますが、対象のブロックの上で右クリックから「複製する」を選ぶと簡単にコピーできます。

ブロックを消す

様々な方法がありますが、対象ブロックを左にドラッグ&ドロップ方法が楽です。

コメント追加

後で見た時に何を行っている処理なのか分かりやすいように、注釈(コメントやメモ)を残しておきたいときがあります。
右クリックで「コメントを追加する」を選択すると付箋のようなものが出てきますので、ここにコメントを書けます。
コメントはプログラムの動作には全く影響しません。

以下のようにブロックに紐づけてのコメントも可能です。

無効なブロック

正しく連結しておらず実行動作できないブロックはこのように灰色のブロックになります。
逆にこれを利用して、1部のブロックを削除せずに一時的に無効化しておくという使い方もできます。

作業内容を元に戻す

これは念のための復習です。「元に戻す」アイコンをクリックすることで作業内容を1つ前に戻すことができます。

ただし、ホーム画面に戻ったり、ブラウザやPCを再起動した場合は、それ以前の状態には戻せないので注意です。

ここから、本格的にプログラミングの内容に入ってゆきます。

ハンズオン

では早速、以下のコードを作成して下さい。チュートリアルで行った内容の応用で出来ます。
ずっとの最後にある「アイコンを表示」は「かなしい顔」です。

追加ブロックは以下の通りです

基本 > アイコンを表示

基本 > アイコンを表示 > ▼ うれしい顔

基本 > アイコンを表示 > ▼ かなしい顔

このように、再起動ボタン押し直後だけ「ハート」で、その後は「うれしい顔」と「かなしい顔」がずっと繰り返し表示されていれば成功です!

解説

「最初だけ」と「ずっと」は初めから置いてあるブロックで、プログラムの重要な役割を担っています。
このブロックの中に、ブロックを追加することにより基本的なプログラムを作成します。ブロックは複数あっても良いし、無くても良いです。 「最初だけ」は電源ONもしくはリセット時の1回だけ処理される部分で、その後は「ずっと」が無限ループで実行されます。 基本的にはそれぞれ1個ずつで使用します。

なお「基本」の中に「最初だけ」と「ずっと」ブロックが用意されており、追加で置くことが可能ですが、「最初だけ」を追加で置くと無効になります。一方で「ずっと」に関しては複数置いても有効のままですが、処理が分かりにくくなるので、今回のキッチンタイマーではそれぞれ1個ずつのみで使用します。

ちなみにArduinoなど組込み系プログラミングではsetupとloopという構成が使われており、名称は異なるものの、全く同じ考え方です。

やってみよう

「基本」ブロックには他にも様々な種類がありますので、追加したり並べ替えたりして試してみて下さい。

ハンズオン

以下のコードを作成して下さい。チュートリアルで行った内容の応用で出来ます。

追加ブロックは以下の通りです。

基本 > アイコンを表示

基本 > アイコンを表示 > ▼ うれしい顔

基本 > アイコンを表示 > ▼ かなしい顔

入力 > ボタンAが押されたとき

入力 > ボタンAが押されたとき > ▼ B

このように、Aボタン押しで「うれしい顔」、Bボタン押しで「かなしい顔」が表示されれば成功です!

解説

「ずっと」ブロックを使っていたときは無限に処理をループしていました。今回はボタンを押すと処理が1回実行され終了します。このような処理はプログラミング用語で「イベント駆動型」とか「イベントドリブン」と呼ばれています。

micro:bitでは2つのタクトスイッチが搭載されているため、以下3つの入力を指定することが可能です。

▼ で A+Bを選択すれば同時押しの判断が可能になります。シミュレーター上ではAボタンとBボタンをマウスで同時クリックすることはできないため、A+Bを選択すると、仮想的な A+B ボタンが Bボタンの下に現れます。

やってみよう

「ずっと」にも別のブロックを配置してみて、一緒に動かしたらどうなるのか色々実験してみよう。

ハンズオン

以下のようにコードを作成して下さい。テキストボックスにはキーボードで数値を打ち込みます。
「値」には50、「最大値」には100を打ち込んでいます。数値は半角です。

追加ブロックは以下の通りです。

LED > 棒グラフを表示する > 値:50 > 最大値:100

このように、LEDが15個点灯表示されたかと思います。

やってみよう

「値」と「最大値」それぞれの数値を色々入力して、どのように変化するか確かめてみて下さい。

解説

「棒グラフ」は名称とはちょっと違うイメージに感じた方もいるかと思います。
どちらかというと、砂時計の砂が上から降ってきて溜まってゆくイメージの方が近いです。
以下は「最大値」を100に固定したままで、「値」を0~110まで10刻みで増加させた結果です。

細かく見てゆくと0%である値が0のときでもLEDが1つ点灯していたり、50%である50の時点でLED点灯数が大きく過半数を超えていて、90%である90の時点でLEDが全点灯、100%を超えても全点灯のままなので、単純な比例関係ではなさそうです。 ただし、大まかに見て「最大数」に対する「値」の割合でLED点灯数が変化するモノとして捉えておけば良さそうです。

ハンズオンstep1

以下の手順で変数「棒グラフの値」を作成してください。

追加ブロックは以下の通りです。

変数 > 変数を追加する > 作成する変数の名前:"棒グラフの値" > OK

ハンズオンstep2

作成した変数「棒グラフの値」を使ったブロックを配置します。

追加ブロックは以下の通りです。

変数 > 棒グラフの値

ハンズオンstep3

最初だけブロックに「変数 棒グラフの値 を 0 にする」というブロックを入れ、値を 0 から 50 に変更します。

追加ブロックは以下の通りです。

変数 > 変数 棒グラフの値 を 0 にする > 50

解説

変数は自分で作成するブロックです。変数には名前が必要で、任意の名前を付けることができます。一般的なプログラミング言語では、日本語が使えない場合が多いですが、MakeCodeでは日本語が可能です。

変数の役割はプログラムの処理で値を変化させることが可能になることです。計算結果を保存したり、後のチャプターで学ぶ「条件判断」にも活用されます。

先程のハンズオンの内容だと、ブロックの内容は変わりましたが、結果は前回と全く同じでした。これだとほとんど意味がありません。
次の演習を行うことで、プログラムの処理で値を変化させるという意味と効果が分かるかと思います。

演習

Aボタンを押したとき棒グラフの値が30、Bボタンを押したとき棒グラフの値が70、A+B同時押しの場合は棒グラフの値が50になるようにコードを書いて下さい。グラフの最大値は100固定とします。

解答はこの下。解答を見る前にやってみよう。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

解答

追加ブロックは以下の通りです。

入力 > ボタンAが押されたとき
変数 > 変数 棒グラフの値 を 0 にする > 30

入力 > ボタンAが押されたとき > ▼ B
変数 > 変数 棒グラフの値 を 0 にする > 70

入力 > ボタンAが押されたとき > ▼ A+B
変数 > 変数 棒グラフの値 を 0 にする > 50

ハンズオンstep1

以下のようにブロックを作成してください。
変数名は「得点」で 95を入力します。

追加ブロックは以下の通りです。

基本 > アイコンを表示 > ▼ かなしい顔

変数 > 変数を追加する > 作成する変数の名前:"得点" > OK

変数 > 変数 得点 を 0 にする > 95

ハンズオンstep2

以下の手順でブロックを作成してください。

追加ブロックは以下の通りです。

論理 > 条件判断:もし 真 なら

ハンズオンstep3

以下の手順でブロックを作成してください。

追加ブロックは以下の通りです。

論理 > くらべる:0 = 0 > ▼ ≥

ハンズオンstep4

最終的に以下のようにブロックを作成してください。
その際、「もし 0 ≥ 0 なら」の 右側の 0 を 80 に変更して下さい。

追加ブロックは以下の通りです。

変数 > 得点

基本 > アイコンを表示 > ▼ うれしい顔

解説

「もし~なら」ブロックは条件を判断するブロックです。ほとんどのプログラミング言語で if文 と呼ばれています。
「~」の部分に条件を入れますが、その条件が成立しているときのみ内側に置いたブロックを実行します。

今回のケースだと「~」の部分に「くらべる」から選んだブロックを挿入しました。変数追加と、数値、三角形マーク ▼ の変更を行うことにより最終的に「得点 ≥ 80」という条件にしています。内側には「うれしい顔」ブロックを配置していますので、得点が80以上のときにうれしい顔LEDが点灯するという結果になります。

やってみよう

「最初だけ」に配置してある変数入力の 95 を 70 や 80 にしたときにLED表示がどうなるかシミュレータ画面で確かめてみて下さい。また、条件も色々試してみて下さい。

ハンズオンstep1

以下のようにブロックを作成してください。
変数名は「アニメーション動作」としました。

追加ブロックは以下の通りです。

変数 > 変数を追加する > 作成する変数の名前:"アニメーション動作" > OK

変数 > 変数 アニメーション動作 を 0 にする

ハンズオンstep2

以下の手順でブロックを作成してください。

追加ブロックは以下の通りです。

論理 > 真偽値:偽

ハンズオンstep3

以下のようにブロックを作成してください。

追加ブロックは以下の通りです。

論理 > 条件判断:もし 真 なら

論理 > くらべる:0 = 0 

変数 > アニメーション動作

論理 > 真偽値:真

基本 > アイコンを表示 > ▼ うれしい顔

基本 > アイコンを表示 > ▼ かなしい顔

やってみよう

「最初だけ」ブロックにある「偽」の ▼ を押して「真」に変えたり「偽」に変えたりすると、シミュレーター画面でどのようになるか観察してみてください。

ハンズオンstep4

最終的に以下のようにブロックを作成してください。

追加ブロックは以下の通りです。

入力 > ボタンAが押されたとき

変数 > 変数 アニメーション動作 を 0 にする

論理 > 真偽値:真

入力 > ボタンAが押されたとき > ▼ B

変数 > 変数 アニメーション動作 を 0 にする

論理 > 真偽値:偽

このように、Aボタン押しでアニメーション、Bボタン押しで静止すれば成功です!

解説

今回の状態を図に表すと以下のようになります。

「静止」と「アニメーション」の2つの状態があり、変数が「真」か「偽」かで状態が変わるということです。
このように、ある状態から別の状態へ切り替わることを状態遷移と言い、それを表した図のことを状態遷移図と言います。

また、今回条件判断に使ったのは真偽値というもので、「真」か「偽」の2つしか持たない変数に使われます。多くのプログラミングでは「ブール値」と呼ばれ "True" と "False" で表現します。数値を使っての条件判断でも状態遷移のプログラムは可能ですが、真偽値を使った方がプログラムが見やすくなります。

例えば、 「アニメーション動作 = 10」「アニメーション動作 = 20」 などと書かれているより、
「アニメーション動作 = 真」「アニメーション動作 = 偽」 と書かれている方が文章としても理解しやすいのが分かるかと思います。

演習

今回、Bボタンを押すと静止状態になりますが、必ず「かなしい顔」の表示で止まります。では「うれしい顔」で止まるようにするにはどうすれば良いでしょうか?
また、押したときの顔で止まるようにするにはどうすれば良いでしょうか?。

解答はこの下。解答を見る前にやってみよう。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

解答

「うれしい顔」で止まるようにするためには、「うれしい顔」と「かなしい顔」を入れ替える。

※「ずっと」の部分以外は変化なし

押したときの顔で止まるようにするには「もし~なら」ブロックをもう一つ使う。

※「ずっと」の部分以外は変化なし

ハンズオンstep1

まず「棒グラフ」ブロック配置と最大値を3000に変更します。

LED > 棒グラフを表示する > 最大値:3000

次に「稼働時間」ブロックを配置します。
「稼働時間(ミリ秒)」と「稼働時間(マイクロ秒)」の2つありますが、前者の方です。

追加ブロックは以下の通りです。

入力 > その他 > 稼働時間(ミリ秒)

このように表示されたと思います。
最大値の3000に対して、稼働時間が時間と共に増加しているということです。

ハンズオンstep2

以下のようにブロックを追加してください。

追加ブロックは以下の通りです。

入力 > ボタンAが押されたとき

変数 > 変数を追加する > 作成する変数の名前:"開始時間(ミリ秒)" > OK

変数 > 変数 開始時間(ミリ秒) を 0 にする

入力 > その他 > 稼働時間(ミリ秒)

ちなみに、この時点でAボタンを押してもシミュレーターは何も反応しません。

ハンズオンstep3

最初に一旦「稼働時間(ミリ秒)」ブロックを無効なエリアに置きます。
空いた箇所に「引き算」ブロックを配置します。

計算 > 0 - 0

「引き算」ブロックの値に「稼働時間(ミリ秒)」ブロックと「開始時間(ミリ秒)」ブロックを配置します。

変数 > 開始時間(ミリ秒)

これでAボタンを押すたびに3秒タイマーが起動するようになりました。

「稼働時間」というのはmicro:bit動作開始からずっと変化している値で、micro:bitの時刻のようなものです。
一方の「開始時間」はAボタンが押されたときの時刻が記録される値です。
この差分を取ることで、Aボタンが押されてからの経過時間を得ています。

ハンズオンstep4

変数で「経過時間(ミリ秒)」を追加し、「経過時間(ミリ秒) を 0 にする」ブロックを配置します。

変数 > 変数を追加する > 作成する変数の名前:"経過時間(ミリ秒)" > OK

変数 > 変数 経過時間(ミリ秒) を 0 にする

「棒グラフ」ブロックから「引き算」ブロックを上に移動させ、空いたところに変数「経過時間(ミリ秒)」を配置します。

変数 > 経過時間(ミリ秒)

最終的なブロック(静止画)はこちら。

実行結果は先程と全く同じです。

解説

「稼働時間(ミリ秒)」はmicro:bitのリセットからどれだけ時間が経過したかを数値として表すブロックです。
単位はミリ秒なので、1秒であれば1000、2秒であれば2000、10秒であれば10000という数値になります。
今回は棒グラフを使って最大値に「3000」を置いているので、0~3000になるまでの様子がLEDで表示されているということです。

step2, step3では「開始時間(ミリ秒)」という名前の変数を作成しました。
Aボタンが押されたときの「稼働時間(ミリ秒)の値」を「開始時間(ミリ秒)」に代入しています。つまり、過去の稼働時間です。「稼働時間(ミリ秒)」から「開始時間(ミリ秒)」を引くことにより、Aボタンが押されてからの経過時間となり、その値を棒グラフに表示しています。

step4はさらに「経過時間(ミリ秒)」という変数を増やしました。step3と動きは全く変わりませんが、後でコードを見た時により分かりやすいため、「経過時間(ミリ秒)」という変数を経て棒グラフに表示しています。 今回程度のコードだとあまり必要性を感じないかもしれませが、後にもう少し複雑化してきたときに役に立ちます。

「何かイマイチ良く分からん!」という方は、以下のクイズを考えてみて下さい。
Q. この世界に「ストップウォッチ」は存在せず、「時計」と「筆記用具」だけがあるとして、ストップウォッチの機能を実現するためにはどうすれば良いでしょうか?

解答はこの下
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

A. スタート時に時計を見て時刻を紙に記録し「過去の時刻」とします。ストップ時に時計を見て「現在の時刻」を取得し、その引き算を行うことで機能を実現します。

つまり「経過時間」はストップウォッチ、「稼働時間」は時計(現在時刻)、「開始時間」はメモ(過去時刻)と考えると分かりやすいという喩えでした!

決め打ちキッチンタイマー(5秒タイマー)

これまで学んだ内容を組合せて、動画のような5秒タイマーを完成させてください。

概要

詳細仕様

解答

解答を見る前に自分で作って悩むことがプログラミング向上に繋がります。

完全版

完全版

完全版

完全版

完全版

完全版

簡易キッチンタイマー

これまで学んだ内容を組合せて、動画のようなキッチンタイマーを完成させてください。

完全版

完全版

完全版

完全版

完全版

完全版

完全版

完全版

キッチンタイマー

これまで学んだ内容を組合せて、動画のようなキッチンタイマーを完成させてください。

完全版

完全版

「ものものテックQA掲示板」と「コンテンツの変更履歴」です。

完全版