「ものづくり:make」を楽しみながら学ぶ人へ向けた独習サポートサイト。

micro:bit Lab.【マイクロビット】

micro:bit Lab.では、micro:bit【マイクロビット】に関する情報を紹介しています。

ブロックを選ぶ・つなぐ
2-1

はじめてのプログラミング

2017-10-242017-10-24

micro:bit(マイクロビット)での、プログラミングをわかりやすく紹介します。

2-1-1.micro:bitをパソコンにつなぐ

最初に、micro:bitをUSBケーブルでパソコンにつなぎます。必要なUSBケーブルは、micro:bit側がマイクロBコネクターのものです。マイクロBコネクターには、向きがあるので注意して差し込みましょう。

図2-1-1-1.micro:bitをパソコンにつなぐ
図2-1-1-1.micro:bitをパソコンにつなぐ

パソコンの電源が入っていれば、micro:bitはすぐに動き出します。あらかじめ、楽しいアプリケーションが入っているので試してみましょう。

2-1-2.接続を確認する

正しく接続されると、micro:bitは「MICROBIT」という名前のドライブとして、パソコンに表示されます。MacならFinder、Windows PCならエクスプローラーで確認することができます。図2-1-1-2はMac、図2-1-1-3はWindows PCでの表示例です。Windows PCのドライブ名(E:)は、お使いのパソコンによって異なります。

図2-1-2-1.Macでの表示例(micro:bitの接続)
図2-1-2-1.Macでの表示例(micro:bitの接続)
図2-1-2-2.Windows PCでの表示例(micro:bitの接続)
図2-1-2-2.Windows PCでの表示例(micro:bitの接続)

2-1-3.プログラミングの準備

micro:bitのプログラミングは、micro:bit教育財団のウェブサイトにある「JavaScriptブロックエディター」を使います。micro:bit教育財団へアクセスして、「プログラムしましょう」をクリックします。

図2-1-3-1.micro:bit教育財団「プログラムしましょう」
図2-1-3-1.micro:bit教育財団「プログラムしましょう」

「JavaScriptブロックエディター」が表示されました。micro:bitでは、ここにさまざまな役割を持ったブロックを並べて、プログラミングを行います。

図2-1-3-2.JavaScriptブロックエディター」
図2-1-3-2.JavaScriptブロックエディター」

JavaScriptブロックエディターの説明

早速、プログラミングといきたいところですが、その前に「JavaScriptブロックエディター」を少しだけ説明します。右側の大きなエリアが、プログラミングを行うところです。ここに役割を持ったブロックを並べて、プログラムを作ります。すでに「最初だけ」と「ずっと」というブロックが並んでいます。

図2-1-3-3.プログラミングするところ
図2-1-3-3.プログラミングするところ

プログラミングに使うブロックを選ぶところが、中央のエリアです。「音楽」や「LED」といった楽しそうな言葉のほかに、「論理」や「変数」などの難しそうな言葉が並んでいますね。

図2-1-3-4.使うブロックを選ぶところ
図2-1-3-4.使うブロックを選ぶところ

そして、左側にあるエリアが、プログラムの動きを確認するところです。micro:bitのLEDが点灯したり、パソコンのマウスカーソルでAボタン・Bボタンをクリックすることができます。また、音楽は、パソコンのスピーカーから聞こえます。

図2-1-3-5.プログラムの動作を確認するところ
図2-1-3-5.プログラムの動作を確認するところ

2-1-4.プログラミング

いよいよ、プログラミングです。micro:bitのLEDスクリーンに「Hello,world!」という文章を表示するプログラムを作ってみましょう。まず、完成したプログラムが動いたときのようすを見てみます。「Hello,world!」が、右から左へ移動しながら表示されています。

図2-1-4-1.完成したプログラム
図2-1-4-1.完成したプログラム

プログラミング

まず、ブロックの選択です。「基本」と書かれた部分をクリックします。続いて、表示されたブロックの一覧から「文字列を表示」と書かれたものをクリックします。

図2-1-4-2.ブロックを選ぶ
図2-1-4-2.ブロックを選ぶ

「文字列を表示」というブロックが配置されたことを確認します。

図2-1-4-3.配置されたブロック
図2-1-4-3.配置されたブロック

配置されたブロックの上へマウスカーソルを合わせると、手のマークになります。そのままドラッグして、「ずっと」ブロックの中へ「文字列を表示」ブロックを移動します。移動すると、カチッという音とともに「文字列を表示」ブロックが「ずっと」ブロックの中にくっつきます。「文字列を表示」ブロックが、はっきりとした青色になっていない場合は、正しくくっついていないのでやり直してください。

図2-1-4-4.ブロックの移動
図2-1-4-4.ブロックの移動

「文字列を表示」ブロックの「Hello!」の部分クリックします。「Hello!」の背景がグレーに変わったことを確認します。

図2-1-4-5.文字列の選択
図2-1-4-5.文字列の選択

キーボードから「Hello,world!」と入力します。入力が終わったら、一度Enterキーを押すか、ブロックがないところをマウスカーソルでクリックします。これで、入力した文字が確定します。

図2-1-4-6.文字列の入力
図2-1-4-6.文字列の入力

これでプログラムは完成です。プログラムの動きを確認してみましょう。

図2-1-4-7.完成したプログラムを確認する
図2-1-4-7.完成したプログラムを確認する

2-1-5.プログラムをダウンロードする

micro:bit本体へプログラムを転送するために、いま作ったプログラムをダウンロードします。まず、プログラムに名前をつけます。ここでは「helloworld」という名前にしました。

図2-1-5-1.名前をつける
図2-1-5-1.名前をつける

「ダウンロード」と書かれたところをクリックします。ブラウザのメッセージに従って、ダウンロードします。

図2-1-5-2.ダウンロード
図2-1-5-2.ダウンロード

ダウンロードされたプログラムは、通常「ダウンロード」というフォルダに保存されます。保存されたファイルを見てみると、「microbit-helloworld.hex」という名前になっています。これが、micro:bit本体へ転送するプログラムです。

図2-1-5-3.Macにダウンロードされたhexファイル
図2-1-5-3.Macにダウンロードされたhexファイル
図2-1-5-4.Windows PCにダウンロードされたhexファイル
図2-1-5-4.Windows PCにダウンロードされたhexファイル

なお、同じ名前でダウンロードを繰り返した場合、Macでは上書きされて常にファイルは一つですが、Windows PCではファイル名に番号が付いて増えていきます。

2-1-6.プログラムをmicro:bitへ送る

ダウンロードしたプログラムを、micro:bit本体へ転送します。転送するには、プログラムファイルを「ダウンロード」フォルダから「MICROBIT」ドライブへドラッグします。

図2-1-6-1.Macからmicro:bitへの転送
図2-1-6-1.Macからmicro:bitへの転送
図2-1-6-2.Windows PCからmicro:bitへの転送
図2-1-6-2.Windows PCからmicro:bitへの転送

プログラムの転送中は、micro:bitの背面にあるステータスLEDがオレンジ色に点滅します。プログラムの転送は、数秒で終わります。プログラムの転送が終わると、すぐにプログラムが動きます。

2-1-7.見て・聞いて・触って楽しむ

いかがだったでしょうか。ブロックを選んでつなげるだけの簡単な操作でプログラミングが行えました。たったこれだけの操作で、micro:bitのLEDスクリーンに「Hello,world!」を表示することができました。

さらに、micro:bitでは、文字だけでなく、ハートなどの図形を表示することができます。また、二つのボタン・東西南北がわかるコンパス・揺さぶられたことを検知するセンサーなどもあり、すべてブロックで制御することができます。残念ながら、スピーカーは付いていませんが、簡単に接続することができます。

見て・聞いて・触って楽しめるmicro:bit。ぜひ、micro:bitの世界を楽しんでみてください。

micro:bitの詳しい情報は、第1章の1-1.micro:bitとは1-2.micro:bitを構成する部品(前面)1-3.micro:bitを構成する部品(背面)で紹介しています。

スポンサーリンク
TOPへ移動
目次へ移動