micro:bitプログラミングの過程をお見せします！･･･市松模様にLEDが点滅するプログラムを作る

今回は、micro:bitで市松模様にLEDが点滅するプログラムを作り、実行するまでの過程を説明します。
micro:bitをお持ちでない方も、コンピューターやタブレットなどがあれば、無料の環境を使ってプログラミングをしてみることと、画面上の仮の環境（シミュレーター）でそのプログラムを実行することができるので、是非、ご覧ください。

１．今回のプログラムの紹介

今回は、日本語で言えば、市松模様、英語で言えば、チェッカーフラグ模様が点滅するようなプログラムを、micro:bitのJavaScriptブロックと言われるもので作ってみます。
具体的には、micro:bitの5×5個のLEDを互い違いに点滅させます。

こちらのURL https://makecode.microbit.org/_WiuK08hfg1ey  で今回説明するプログラムを公開していますので、ご興味のある方は、リンクをクリックしてご覧ください。

今回使っている環境は、Windows 10 Homeエディションのコンピューターで、ホームページ閲覧アプリ（ブラウザとも呼ばれます）はGoogle Chromeを使い、そこからMicrosoftが無償で提供するMakecodeという名のmicro:bitのエディター（編集用のアプリのこと）https://makecode.microbit.org/ を使って、JavaScriptブロックと呼ばれるプログラミング言語でプログラミングしています。

１．１．実行するとどうなるか

MakecodeのJavaScriptブロックのエディターの２つの画面（下の２つの図）の左側は、micro:bitのプログラムの実行を画面上で仮に見せてくれる部分で、シミュレーターと呼ばれる部分です。

今回のプログラムは、オンオフが逆の2種類の市松模様を一定間隔で切り替えることで、市松模様のLEDの点滅を永遠に繰り返すもので、実行中は、以下の2つのシミュレーターの図のどちらかの点灯状態になります。

１．２．完成したプログラムの内容

完成したプログラムは、上図の右側の部分です。
［ずっと］ブロックの中に［LED画面に表示］ブロックが２つ入っているだけのプログラムです。

２．プログラミングから実行までの手順

２．１．プログラムを作る

２．１．１．JavaScriptブロックのプログラミングのコンセプト

まず、 https://makecode.microbit.org/ から、Makecodeを開きます。

［新しいプロジェクト］をクリックすると、新しいプログラムを作るために、JavaScriptブロックのエディターが開きます。

micro:bitでは、プログラムのことをプロジェクトと言いますが、この記事では一般的な用語であるプログラムの方を、主に使用することにします。

JavaScriptブロックは、micro:bitのためのイベント駆動型のプログラミング言語です。
イベント駆動型とは、イベントと呼ばれる、実行時にユーザーから与えられる何かのきっかけ、例えば、ボタンが押されるとか、縦に持つとか、落とすといったことで、そのイベントの発生ごとに動く･･･駆動する内容をプログラミングしていくプログラミング言語です。

今回は1つも使っていませんが、上記のようなイベントに対応した動きを制御するブロックをイベント・ブロックと言います。

２．１．２．JavaScriptブロックのコントロール・ブロック

コントロール・ブロックとは、JavaScriptブロックの中で、実行されるタイミングが決まっているブロックです。
コントロール・ブロックとイベント・ブロックは、それ以外のブロックと形に違いがあります。
その役割からもわかる通り、コントロール・ブロックとイベント・ブロックは、上部と下部が平らで凹凸がなく、それより上にブロックを付けられず、また、それより下にもブロックを付けられず、Cの形をしていて、Cの形の内側に、そのタイミングやイベントが発生したときに実行したいブロックの並びをはめて使います。

２．１．３．［最初だけ］ブロック

プログラムを作るエリアには、いつでも、最初から２つのコントロール・ブロックが用意されます。

その１つは［最初だけ］ブロックです。
［最初だけ］ブロックは、micro:bitにプログラムが書き込まれたタイミングで動くブロックです。
これは最初の1回だけ実行を行いたいブロックの並びを入れて置くためのコントロール・ブロックです。

なお、micro:bit本体にプログラムを書き込んで一度実行された後、このプログラムをもう一度実行し直したいときは、micro:bitの裏にあるリセットボタンを押します。

特に今回のようにこのブロックを使わない場合、そのままこのエリアに置いておいても構わないし、このブロックをこのエリアから削除しても構いません。

２．１．４．ブロックの削除方法

ブロックの削除は、2つ方法があります。
１つは、そのブロックの上で右クリックして表示されたリストの中の［ブロックを削除する］をクリックします。

もう１つは、そのブロックをドラッグして、エディター真ん中の文字のリストがあるエリアまで持ってきて、ゴミ箱マークが見えたらドロップします。

２．１．５．［ずっと］ブロック

もう１つの最初から用意されているコントロール・ブロックは、［ずっと］ブロックです。
［ずっと］ブロックは、プログラムを書き込んだ後、その内側のブロックの並びをずっと繰り返し実行します。
これを止めるには、micro:bitへの電源の供給を止めるしかありません。

今回は、この［ずっと］ブロックを使って、LEDの点滅をずっと行うようにプログラミングします。

２．１．６．ブロックのカテゴリーとブロックの選択

［LED画面に表示］ブロックは、エディター真ん中にある、リストの一番上［基本］の中に入っています。

エディター真ん中のリストは、ブロックをカテゴリーごとにまとめてあるもので、それぞれをクリックすると、関連するブロックが表示されるので、使いたいブロックをクリックして、プログラミングエリアにドロップします。

２．１．７．実行される予定のブロックと実行されることのないブロックの色の違い

ドロップした直後のブロックは、鮮やかではない色になっています。
鮮やかではない色のとき、micro:bitでは、実行されることがないブロックであることを意味します。

実行される予定があるブロックとは、コントロール・ブロックとその間にあるブロックか、イベント・ブロックとその間にあるブロックのことです。
ドロップしたブロックは、はめ込みたい位置にドラッグアンドドロップして自由に動かすことができます。

今回は、コントロール・ブロックである［ずっと］ブロックの内側にドロップしてはめます。
すると、［ずっと］ブロックの内側のブロックになったので、実行される対象のブロックになり、ブロックの色が鮮やかに変わります。

２．１．８．［LED画面に表示］ブロック

［LED画面に表示］ブロックは、micro:bitの5×5のLEDの並びと対応した5×5のマス目を持った作りで、オンにしたいLEDの位置と対応するマス目の上でクリックして白く表示を変えて設定します。

一度オンにしたマス目をオフに変えたい場合は、再度その上でクリックします。

今回は、2種類の市松模様を２つの［LED画面に表示］ブロックを使って用意し、［ずっと］ブロックの中に並べます。

プログラムはこれで完成です。

他のプログラミング言語をご存知の方は、LED画面の切り替えのタイミング（何秒たったら次の画面にするとか）の記述が必要ないところに戸惑いがあると思いますが、micro:bitではこの辺はおまかせでよく、これでプログラムは完成です。

２．２．シミュレーターで実行して確認する

次に、シミュレーターでの仮の実行を見て、プログラムを確認します。
シミュレーターの実行は、実は、初めからオンになっています。
そのため、気が付いていた方も多いと思いますが、プログラミングの最中に、随時動いていました。

２．２．１．シミュレーターの実行の停止

シミュレーターの実行を停止するには、シミュレーターのmicro:bitの図の下の一番左の四角［■］のマークをクリックします。
プログラムが停止し、micro:bitの図が白黒に変わり、四角［■］のマークが右向き三角［▶］のマークに変わります。

２．２．２．シミュレーターの実行

再び、シミュレーターを実行するには、シミュレーターのmicro:bitの図の下の一番左の右向き三角［▶］のマークをクリックします。
プログラムの実行が再度開始され、micro:bitの図が鮮やかな色に変わり、右向き三角［▶］のマークが四角［■］のマークに変わります。

もし、シミュレーターで実行を確認して、プログラムにおかしなところがあれば、修正します。

２．２．３．プログラムファイルの作成

この後micro:bit本体を接続して、プログラムを書き込むために、プログラムのファイルをコンピューター内に次の➀➁の手順で作成しておきます。

➀カテゴリーのリストの下にある保存（フロッピーディスクの図）のマークの左横の四角（最初は”題名未設定”となっているところ）の中身の文字を、付けたいファイル名に入力し直します。

➁保存のマークをクリックします。

すると、現在お使いのブラウザの、ダウンロードファイルの保存先として設定されているフォルダに、今指定した文字が入ったファイル名で保存されます。

お使いのブラウザのダウンロードファイルの保存先の設定が、その都度フォルダを選択して保存することになっている場合は、［名前を付けて保存］ウィンドウが表示されるので、適当なフォルダを選択して保存します。

ちなみに、今回私が例をお見せするために使用しているGoogle Chromeの設定は、デフォルト（最初にインストールした状態）のままで使用しており、［ダウンロード］フォルダの下に自動で保存される設定になっています。

ブラウザからファイルをダウンロードしたときの保存先の変更方法は、Google Chromeについては、こちらのIT企画研究所のYouTube動画を、Microsoft Edgeについては、こちらのYouTube動画を、ご参照ください。

画面下の保存したファイルの情報は、右下の×印をクリックすると、非表示になります。

２．３．micro:bitをセッティング

２．３．１．コンピューターとmicro:bit本体の接続

次に、プログラムを作ったコンピューターとmicro:bit本体を接続します。

ちなみに、micro:bitの入手方法については、こちらのブログ記事「micro:bit(マイクロビット)の入手 」をご参照ください。

コンピューターとmicro:bitの接続には、Micro USBケーブルを使います。
この接続により、micro:bitにはコンピューターから電源供給され、かつ、micro:bitとコンピューター間でデータのやり取りができるようになります。

２．３．２．コンピューターからmicro:bit本体へのプログラムの書き込み

Windowsのコンピューターにmicro:bitをつないだ場合は、USBを挿したときと同様、micro:bitは［MICROBIT］という名の１つのドライブとして認識されます。

コンピューターからmicro:bit本体へのプログラムの書き込みは、Windowsのエクスプローラーを開き、２．２．で保存したmicro:bitのプログラムのファイルをドラッグし、この［MICROBIT］という名のドライブにドロップして行います。

コンピューターがプログラムのファイルを書き込んでいる間、micro:bitの上の方のランプが点滅します。
点滅している最中は、決してMicro USBケーブルを抜かないでください。

２．４．実行

書き込みが終わると、自動的に実行が始まります。

［ずっと］ブロックを使ったプログラムなので、micro:bitに電源が供給されている間中、ずっと実行が繰り返されます。

プログラムファイルの書き込みを行っていないときなら、いつでも、micro:bitをコンピューターから外して構いません。

なお、再びコンピューターにつないだり、電池ボックスにつないだりしてmicro:bitに電源が供給されると、最後にmicro:bitに書き込んだプログラムの実行が自動で開始されます。

２．５．プログラムのインターネット上での公開（共有）

micro:bitは、作ったプログラムをインターネット上で公開することができます。
これをmicro:bitの世界では、「共有する」と言います。
また、この記事の始めに説明した通り、micro:bitの世界では、プログラムを「プロジェクト」と言います。

micro:bitのプログラムをインターネット上で公開するには、エディター左上の［共有する］をクリックし、［プロジェクトを共有］ウィンドウで、共有するときの名称を必要なら付け直してから、その右下の［プロジェクトを共有する］ボタンをクリックします。

これで、公開はされましたが、通常は、この先の作業を行って、自分でそのプログラムが置かれている共有先のURLをどこかにコピーしておいて、必要なら、友達などにそのURLをメールなどで教えたりします。

右下の［コピー］をクリックすると、クリップボードにコピーされるので、何かのファイルを開いて貼り付け、共有のURLを保存しておきます。

上記は、https://makecode.microbit.org/_WiuK08hfg1ey で、リンクを表示してみると次のように見えます。

上部の真ん中あたりの［シミュレーター］をクリックすると、以下のように見えます。

右上端の［編集］をクリックすると、このプログラムが出来上がった状態でエディターが開くので、このプログラムを利用して、続きのプログラミングすることができます。

なお、［プロジェクトを共有］ウィンドウで、［埋め込み］をクリックしてコピーすると、ブログなどに、このプログラムを埋め込むことができます。

以下にコードをコピーして、埋め込んでみました。

２．６．自分のmicro:bitプログラムの管理

もちろん、自分のmicro:bitのプログラムは自分のコンピューターに２．２．で説明したように明示的に保存して管理するのが一番安全ですが、Makecodeは、個人個人のMakecodeの環境の中に、作成したプログラムを全部自動保存してくれています。

エディターの左上の［ホーム］をクリックすると、Makecodeの自分のホームのページが表示され、今まで作ったmicro:bitのプログラムが作った順に並んでいるので、クリックしエディターに再び表示して編集することができます。

Makecode（https://makecode.microbit.org/#editor）は一度オンラインで開くと、その後は、オフラインでも開いて利用することができます。

もちろん、共有はオンラインにしてから行う作業になりますが、プログラミングはオフラインでも可能です。

３．まとめ

お気づきのように、micro:bitをお持ちでない方も、エディターを無料で使うことができ、プログラムを作ることも、そのプログラムをシミュレーターで動かしてみることもできます。

micro:bitにご興味のある方は、エディターをしばらく使ってみて、ご興味があれば、micro:bit本体を購入してみると良いのではないでしょうか。