micro:bit（マイクロビット）に、スピーカーを付けて、ドレミファソを鳴らすプログラムを作り、実行するまでの過程を説明します。

micro:bitをお持ちでない方でも、コンピューターやタブレットなどがあれば、無料の環境を使ってプログラミングをしてみることと、画面上の仮の環境（シミュレーター）でそのプログラムを実行することができます。

はじめての方でも無理なくプログラミングを経験できますので、是非、ご覧ください。

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

今回は、電源を入れるとドレミファソと音を鳴らすプログラムを、micro:bitのJavaScriptブロックと言われるもので作ってみます。

具体的には、スピーカーを付けたmicro:bitを電源に挿して、プログラムを起動し、起動直後に、3オクターブある内の真ん中のドレミファソの音を順に1拍ずつ鳴らします。電源につないだまま、プログラムを再度実行したいときは、micro:bitの裏にある、リセットボタンを押して再起動します。再起動すると、スピーカーから、ドレミファソを音がなります。

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

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

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

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

今回のプログラムを実行すると、［音楽］カテゴリーのブロックを使っているので、自動で仮想のスピーカーが付いたmicro:bitの図がシミュレーターに表示され、「ドレミファソ」の音がなります。 

なお、再度実行したい場合は、シミュレーターのmicro:bitの図の下にある5つのボタンの中の一番左のボタンをクリックします。

今回のように、［音楽］カテゴリーのブロックを使ったmicro:bitのプログラムをmicro:bit本体で実行する際は、音を出すために、micro:bitに取り付け可能なスピーカーやイヤホンなどが必要です。

micro:bitに取り付け可能なスピーカーには、micro:bit専用のスピーカー（2020年8月現在、1000円前後から売っています）以外に、100円ショップのスピーカーやイヤホン（ワニ口クリップ等でmicro:bitにつないで実行）なども利用できます。

今回は、100円ショップのスピーカーを装着して実行する例を、ご紹介します。

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

完成したプログラムは、上図の右側の部分です。

［最初だけ］ブロックの中に［音を鳴らす 高さ（Hz）〇長さ●］ブロックが５つ入っているだけのプログラムです。

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

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

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

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

［新しいプロジェクト］をクリックします。

［プロジェクトを作成する］ウィンドウが表示されるので、これから作るプロジェクト、すなわち、プログラムに付ける名前 を入力します。

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

今回は、「ドレミファソ」と名付けるため「ドレミファソ」と入力し、 ［作成］ボタンをクリックします。

JavaScriptブロックのエディターが開きます。

JavaScriptブロックは、micro:bitのためのイベント駆動型のプログラミング言語です。

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

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

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

コントロール・ブロックとは、JavaScriptブロックの中で、実行されるタイミングが決まっているブロックです。

コントロール・ブロックとイベント・ブロックは、それ以外のブロックと形に違いがあります。

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

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

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

その１つは［ずっと］ブロックです。

［ずっと］ブロックは、プログラムを書き込んだ後、その内側のブロックの並びをずっと繰り返し実行します。

これを止めるには、micro:bitへの電源の供給を止めるしかありません。

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

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

ブロックの削除には、2つの方法があります。

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

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

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

もう１つの最初から用意されているコントロール・ブロックは、［最初だけ］ブロックです。

［最初だけ］ブロックは、micro:bitにプログラムが書き込まれたタイミングで動くブロックです。

これは最初の1回だけ実行を行いたいブロックの並びを入れて置くためのコントロール・ブロックです。

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

今回は、この［最初だけ］ブロックを使って、電源につないですぐに1度実行する（または、リセットボタンを押した後、1度実行する）ドレミファソを鳴らすプログラムを作っていきます。

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

［音を鳴らす 高さ（Hz）〇長さ●］ブロックは、エディター真ん中にある、（カテゴリーの）リストの上から3番目の［音楽］カテゴリーの中に入っています。

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

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

ドロップした直後のブロックは、鮮やかではない色になっています。

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

実行される予定があるブロックとは、コントロール・ブロックとその間にあるブロックか、イベント・ブロックとその間にあるブロックのことです。

ドロップしたブロックは、はめ込みたい位置にドラッグアンドドロップして自由に動かすことができます。

今回は、コントロール・ブロックである［最初だけ］ブロックの内側にドロップしてはめます。

すると、［最初だけ］ブロックの内側のブロックになったので、実行される対象のブロックになり、ブロックの色が鮮やかに変わります。

２．１．８．［音を鳴らす 高さ（Hz）〇長さ●］ブロック

［音を鳴らす 高さ（Hz）〇長さ●］ブロックは、〇をクリックして表示された3オクターブの音階からなるキーボードから鳴らしたい音をキーをクリックして選び、●をクリックして〇の音を出す拍数を選択します。

まず、現在すでに真ん中のドとなっている〇をクリックし、一応、3オクターブのキーの並び（音階）が表示されることを確認します。

では、今回は、最初に鳴らす1音として、真ん中のドのキーをクリックして選択します。

次に、現在すでに1拍となっている●をクリックし、一応、どのようになっているか確認します。

拍は、1、1/2、1/4、1/8、1/16、2、4から選択できます。

では、今回は、最初に鳴らす1音の長さとして、1拍の1をクリックして選択します。

続けて、同様に、今ある［音を鳴らす 高さ（Hz）〇長さ●］ブロックの下に、同じ［音を鳴らす 高さ（Hz）〇長さ●］ブロックを4つつなげ、
2番目の［音を鳴らす 高さ（Hz）〇長さ●］ブロックの〇に真ん中のレ、●に1泊
3番目の［音を鳴らす 高さ（Hz）〇長さ●］ブロックの〇に真ん中のミ、●に1泊
4番目の［音を鳴らす 高さ（Hz）〇長さ●］ブロックの〇に真ん中のファ、●に1泊
5番目の［音を鳴らす 高さ（Hz）〇長さ●］ブロックの〇に真ん中のソ、●に1泊
を選択します。

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

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

次に、シミュレーターでの仮の実行を見て、プログラムを確認します。

シミュレーターの実行は、実は、初めからオンになっています。

そのため、気が付いていた方も多いと思いますが、プログラミングの最中に、実はシミュレーターは随時動いていました。

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

シミュレーターの実行を停止するには、シミュレーターのmicro:bitの図の下の一番左の四角［■］のマークをクリックします。

プログラムが停止し、micro:bitの図が白黒に変わり、四角［■］のマークが右向き三角［▶］のマークに変わります。

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

再び、シミュレーターを実行するには、シミュレーターのmicro:bitの図の下の一番左の右向き三角［▶］のマークをクリックします。

プログラムの実行が再度開始され、micro:bitの図が鮮やかな色に変わり、右向き三角［▶］のマークが四角［■］のマークに変わります。

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

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

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

➀カテゴリーのリストの下にある保存（フロッピーディスクの図）のマークの左横の四角（”ハート”となっているところ）の中身の文字列を確認し、それで良ければそのまま、別の名前にしたければ、付け直したいファイル名に入力し直します。

➁［ダウンロード］をクリックします。

ウィンドウに「ダウンロード完了」と表示されます。

ウィンドウの右上の×印をクリックして、ウィンドウを非表示にします。

左下に、ダウンロードされたファイル名が表示されます。

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

Google Chromeを使っている場合は、ダウンロードファイルの名前の横をクリックし、［フォルダを開く］をクリックすると、このダウンロードファイルがあるフォルダを、エクスプローラーで開いてくれます。

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

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

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

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

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

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

まず、micro:bit本体に音を確認できるスピーカーかイヤホンをつなぎます。

以下の写真は、100円ショップのスピーカーを、micro:bitにワニ口クリップでつないだ例です。

もともとの100円ショップのスピーカーはこのようなものです。

このスピーカーの先端（プラグ）部分は、以下のようになっています。

プラグは、線で仕切りで3つに分けられたものと4つに分けられたものがあります。上の写真は、3つに分かれたものの例です。

3つに分けられたプラグは、先端のLの部分が左耳用の音、真ん中のRの部分が右耳用の音、根元に近いGNDの部分がグランドに対応します。

例えば、micro:bitの音を、左耳用の音だけスピーカーに送ってつなげるときは、ワニ口クリップなどを使用して、プラグのLの部分をmicro:bitの0の端子に、プラグのGNDの部分をmicro:bitのGNDの端子につなげます。

例えば、micro:bitの音を、左耳用と右耳用の両方の音を送ってスピーカーにつなげるときは、ワニ口クリップなどを使用して、プラグのLとRを同時に挟んでmicro:bitの0の端子に、プラグのGNDの部分をmicro:bitのGNDの端子につなげます。

下の写真は、マイク付きイヤホンです。このイヤホンのプラグは、4つの部分に分かれています。

このイヤホンの先端（プラグ）部分は、以下のようになっています。

上の写真は、プラグが仕切られて、4つに分かれているものの例です。

4つに分けられたプラグは、先端のLの部分が左耳用の音、その右隣のRの部分が右耳用の音、その右隣のL-GNDの部分がL用のグランド、根元に一番近いR-GNDの部分がR用のグランドに対応します。

例えば、micro:bitの音を、左耳用と右耳用の両方に送ってイヤホンにつなげるときは、ワニ口クリップなどを使用して、プラグのLとRを同時に挟んでmicro:bitの0の端子に、プラグのL-GNDとR-GNDを同時に挟んでmicro:bitのGNDの端子につなげます。

今回は、先に説明した、3つにプラグが仕切られたスピーカーをつなげて、実行をしてみます。

次に、プログラムを作ったコンピューターと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裏面（表面はLEDがある面）のMicroUSBの差し込み口すぐ横の半径5㎜位の黒丸のボタン＝リセットボタンを押します。すると、再び、ドレミファソの音が鳴ります。

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

micro:bitは、作ったプログラムをインターネット上で公開することができます。

これをmicro:bitの世界では、「共有する」と言います。

また、この記事の始めに説明した通り、micro:bitの世界では、プログラムを「プロジェクト」と言います。

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

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

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

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

［シミュレーター］をクリックするとシミュレーターにアクセスできます。

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

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

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

エディターやシミュレーターも同様に埋め込みが可能です。

以下は、エディターを埋め込んだものです。

以下は、シミュレーターを埋め込んだものです。

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

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

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

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

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

３．まとめ

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

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