今まで3回に渡って、micro:bitのLEDを使って文字を表示したり、アイコンを表示してきました。今回は、micro:bitのボタンを使ってLEDに表示するアイコンを切り替えてみたいと思います。
表示アイコンをボタンで切り替えよう【micro:bitでオモチャをつくろう】
まずは準備
マイクロビットの表
micro:bitの表面には左右2つボタンがあります。それぞれ「A」「B」と書いてあります。押すとカチカチと音がしますね。ボタンを押したら、AボタンとBボタンで異なるアイコンを表示させてみたいと思います。
さっそくプログラムを作成しましょう。プログラムを作成する方法を覚えていますか?忘れてしまった場合はここをクリックしてください。そして「新しいプロジェクト」と書かれた箇所をクリックしましょう。下図のように表示されれば準備OKです。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/afe809f232a1d89068b1d6143c9c398938f0e2ae_xlarge.jpg)
今回は、「最初だけ」のブロックも「ずっと」のブロックもつかいません。どちらも画面から消しましょう。消したいときは、消したいブロックを選んで、キーボードの「BackSpace」「Delete」をクリックでしたね。
Aボタンの操作
プログラムメニューエリアの【入力】をクリックして、「ボタン(A)が押されたとき」と書かれたブロックをクリック。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/a8c5816e5a1cb9dba994299d920c1bbc852841a8_xlarge.jpg)
次に、ボタンを押したときにLED部分にアイコンを表示させたいので、プログラムメニューエリアの【基本】をクリックして「アイコンを表示」と書かれたブロックをクリック。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/e0234b6b0bbe27791d5398f12d30a008bf483e7e_xlarge.jpg)
「アイコンを表示」ブロックを下図のように「ボタン(A)が押されたとき」ブロックとくっつけてみましょう。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/697b50b85c5bfc3fbd8ac47632b7dd925444b566.png)
これで、Aボタンを押したときにアイコンが表示されるプログラムが完成しました。左側の「プレビュー」エリアで動作を確認しましょう。プレビューエリアのmicro:bitは、とくにに変わったところはないと思います。下図のようにプレビューエリアのAボタンをクリックして、アイコンが表示されるか確認してみてください。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/a629164ce5a338dccd45719942516ee5ed1a576a_xlarge.jpg)
Bボタンの操作
では、次にBボタンも押したらアイコンを表示させたい場合、どうすればいいのでしょうか。そうです、「ボタン(A)が押されたとき」をもうひとつ用意して「ボタン(B)が押されたとき」にすればいいのです。
もう一度プログラムメニューエリアの【入力】をクリックして「ボタン(A)が押されたとき」と書かれたブロックをクリック。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/5db333c988fcf5650d0914bb16f6a90b49ee7c23_xlarge.jpg)
エディターエリアに「ボタン(A)が押されたとき」ブロックが表示されたら、(A)の部分をクリックしてください。下図のように「A」以外にも「B」「A+B」が表示されたでしょうか。今は「B」を選んでみましょう。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/97210edb75ca4a57a055a748f2dc0467d4184ef9.png)
プログラムメニューエリアの【基本】をクリックして「アイコンを表示」と書かれたブロックをクリックします。先ほどを同じように、「アイコンを表示」ブロックを下図のように「ボタン(B)が押されたとき」のブロックとくっつけてみましょう。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/8e55637b6213966bcec1623b477dc4f86d315840.png)
AボタンとBボタンで違う操作
上記のプログラムでは、Aボタンを押してもBボタンを押しても同じハートマークのアイコンが表示されるので、今回はBボタンだけ異なるアイコンを表示させてみましょう。
ハートマークが表示されている箇所をクリックします。ハート以外のアイコンが表示されますね。「×」アイコンをクリックしてみましょう。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/3afedc8115fcf3efa33ca23e5c3f39665d58950d.png)
下図のようにプログラムができれば完成。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/952ce9d780905a8dbd6aaa412707ecd580c3c93a.png)
最後に、micro:bitにプログラムを書き込んでみましょう。前回も説明した通り、画面下にある「名称未設定」と書かれた場所をクリックして、下図のように「ボタン」とカタカナで入力します。その後、文字を入力した横の青いボタンをクリックして、プログラムのファイルをパソコンにダウンロード。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/e94af4b9cb4eff65e53eb77cc126958d9bc4be09_xlarge.jpg)
micro:bitに書き込み
micro:bitとパソコンを接続して、ダウンロードした「microbit-ボタン.hex」をmicro:bitに保存しましす。もしやり方を忘れてしまった場合は、こちらの記事を参考にしてくださいね。保存(書き込み)が完了すると、一度パソコンとの接続がきれて、プログラムが動き出します。
Micro:bitのAボタンを押すと♡が表示され、Bボタンを押すと×が表示されたでしょうか。
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/5b59f4ada1ada4daac21f423d4645d3ea794d845_xlarge.jpg)
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/931aad7192b36662a61a5b3ca9ad8d389ac045f6_xlarge.jpg)
では次回は、今日覚えた「ボタン」を使って簡単なゲームをつくります。次回も一緒にプログラミングを楽しくつくりましょう。
「micro:bit」x NECレノボ・ジャパングループ キッズ・プログラミングコンテスト開催
![](https://valedpress.chu.jp/prd-site/wp-content/themes/sango-theme/library/images/articles/5432fa83860e966345b415846a6b5d6d4fcaa620.jpeg)
「micro:bit」を使った小学生中学生向けのコンテストが開催されます。「micro:bit」を使ってプログラミングした作品であればよく、課題解決部門では世の中の困っていることを解決するような作品を、自由部門では自分がほしいものやつくりたいものを自由につくった作品を募集しています。
締め切りは1月28日(月)。こちらから応募できます。