コドモニ
MENU

#2 micro:bit LEDに文字を表示する・親子で楽しむビジュアルプログラミング

カテゴリ:micro:bit, 自宅で学ぶ

#2 micro:bit LEDに文字を表示する・親子で楽しむビジュアルプログラミング

前回(#1 micro:bit開封から基本機能まで・親子で楽しむビジュアルプログラミング)、micro:bitの基本的な機能、動作に必要な環境をご紹介をしました。
2回目の今回は実際にmicro:bitを動かしてプログラミングを進めていきます。

実際の操作は小学校4年生の男の子がChromeBookで行っています。
最後に操作の動画もありますので、ご参考にしてみてください。

下準備

micro:bitとPC(パソコン)を接続

PCのUSBポートと、micro:bitの本体を接続します。
micro:bitはMicro USBと呼ばれる小さな端子で接続します。Micro USBはandroidスマートフォンで多く用いられている(最近はTypeCが主流になりつつあります)規格です。

パソコン側USBポート写真
パソコン側USBポート
micro:bit側USBポート
micro:bit側USBポート(黄色いカバーがついていますがmicro:bitです)

ハードウェアの準備は以上です。

プログラミング環境のMakeCodeへアクセスする

ブラウザを起動し、アドレスバーにhttps://makecode.microbit.org/と入力するか、以下のリンクをクリックしてアクセスしてください。
micro:bitは特定のソフトウェア(通常のダウンロードしてインストールする)でプログラムを作成するのではなくMicrosoftが提供するMakeCodeというWebサイトを通してブラウザ上でプログラミングを行います。
このため、多くの環境(パソコン)で動作し、学習することができます。

https://makecode.microbit.org/

MakeCodeにはmicro:bitだけではなく、「Circuit Playground Express」「Minecraft」「LEGOR MINDSTORMSR Education EV3」「Cue」「Arcade」「Chibi Chip」などの製品をプログラミングできる環境が提供されています。

MakeCode
https://www.microsoft.com/ja-jp/makecode

文字をLEDに表示してみよう

新しいプロジェクトを作成

新しいプロジェクトを作成

画面左にある「新しいプロジェクト」ボタンを押して、新しいプロジェクトを作成しましょう。
プロジェクトの名前の入力がありますが、分かりやすい名前をつけましょう。今回はLEDに「Ready GO!」と表示しますのでプロジェクト名は「Ready Go!」とします。

プロジェクト名は、プロジェクト作成後も修正できます。

画面の説明

新しいプロジェクトの画面が開きました。

新しいプロジェクトの画面

画面の左上側がmicro:bitのエミュレーター(実際の動作を画面上で再現したもの)です。
画面の中心の縦に並んだ色分けされたブロックが、様々なプロジェクトのベースとなるパーツ(機能)です。
画面の右側が実際にプログラミングを行う場所です。

まず、とっつきにくいのが真ん中の機能のブロックの箇所です。
とにかく漢字が多い…。
「基本」はまだしも、「入力?」「論理?」「変数?」という難解ですがプログラミングで用いられる言葉も使われています。

上記ブロックをひとつひとつクリックすると、使える機能が一覧が出てきますが、基本的な漢字を読むことができないと、機能は理解できません。

この点に小学校高学年が対象という理由があります。
ただし、最初にお父さんお母さんが横で説明していただければ、お子さんも理解できると思いますので頑張って伴走しましょう!

実際は「論理って何?」「変数って何?」となると思いますが、機能の一覧を開いてみて、なんとなく理解すればOKです。難しく考えると難しくなりますので(人生と同じですね)まずは全体をおおまかに進めていくことを優先しましょう。

ここで、分からない、めんどくさい、とならないように是非サポートしてあげてください。

今回利用させていただいた「micro:bitアドバンスセット」は、教本に各機能がこのプログラミング画面と連動した色(カラー)で色分けされて説明しているので、直感的に分かります。この点が、非常にこのセットの良い点です。
漢字が分からなくても色で直感的に理解し、なんとなく進めていくことができます。

プログラミングの流れを考えてみる

micro:bitには5×5、合計25個のLEDが表示できます。
このLEDに「READY GO!」という文字列を表示してみます。

右側に利用できる機能

中心の機能のブロックはクリックすると右側に利用できる機能が開きます。
上図の場合は「基本」をクリックした状態です。

目的の動作を実現するために、この機能のブロックを右側のプログラミングするエリアに配置しながらプログラミングを行います。

プロジェクトを開くと右のエリアに「最初だけ」「ずっと」というブロックがすでに配置されています。

「最初だけ」はプログラムの起動時に1度だけ実行します。
「ずっと」はプログラムをバックグランドで繰り返し実行します。

文字を表示するには、「最初だけ」でも「ずっと」でもどちらでも動作しますが、1度だけ表示されるより、繰り返し表示した方が変化が分かりやすいと思いますので、「ずっと」をベースにプログラミングします。

「最初だけ」は今回使用しませんので、削除します。
削除は中心の機能ブロックのエリアにドラッグすると削除できます。

プログラムは基本的に上から下に向かって順に実行されます。

このようにブロックを組み合わせてプログラミング行う方法をビジュアルプログラミングの中でもブロックタイプと呼ばれ、実際のテキスト言語のプログラミングに近い方法です。
Scratchも同様にブロックタイプのプログラミング手法です。

これから実際にプログラミングを行いますが、まず、おおまかな流れだけ日本語で書き出してみます。
Ready GO!と続けて表示するだけではつまらないので、ReadyとGO!の間に少し間を開けてみます。

以下の1~3プログラムを繰り返し実行する(ずっとブロック)
1.「Ready」とLEDに表示する
2.200ミリ秒停止する
3.「GO!」とLEDに表示する
です。

1ミリ秒は1000分の1秒で、200ミリ秒は0.2秒です。

それでは実際にプログラミングしてみましょう!

プログラムを組んでみよう

以下の1~3プログラムを繰り返し実行する(ずっとブロック)
1.「Ready」とLEDに表示する
2.200ミリ秒停止する
3.「GO!」とLEDに表示する

を、ブロックで組んでいきます。
今回は「基本」のブロックのみで作成が可能です。

プログラムを組んでみよう

・マウスでのドラッグ&ドロップ
・半角英数字の入力
ができれば組んでいけると思います。

micro:bitのLEDには半角しか表示できません。
半角カタカナも利用できますが、拡張機能を利用する必要がありますので、最初は半角英数字で練習されるのが良いと思います。

現在入力している文字が、半角なのか全角なのかはしっかり理解して入力していきましょう。

プログラムをmicro:bitに転送

PC上(MakeCode)でつくったプログラムをmicro:bitで動かすには、PCでプログラムをダウンロードしてできた「.hex」というファイルをmicro:bitにUSBケーブルを通して転送します。
※無線でも可能ですが、少し手順が複雑ですので最初は有線で転送しましょう。

ダウンロード

左下のダウンロードボタンを押して、保存されたファイルをmicro:bitに転送(コピー)します。
micro:bitはUSBメモリと同様に、外部記憶装置として認識されますので、.hexファイルをmicro:bitにドラッグしてコピーしてください。
コピーが完了すれば、準備完了です。

動作確認

動画で紹介

実際に10歳の男の子が操作し、動作確認まで動画にしています。
キーボードの操作がおぼつかないので、時間がかかっていますが、全体の流れと実際のLEDの表示がご覧いただけます。