【microbit:basic第1回】光るデジタル名札を作ろう:micro:bitでプログラミングの基本を学ぶ

0
41

いよいよ今日から、親が発注者(クライアント)、子どもが開発者(エンジニア)となって進める10日間のプログラミング自由研究がスタートします!

記念すべき第1回目の朝、出勤前にお子様に与えるミッションはこちらです。 「micro:bitの画面に、自分の名前と好きなマークが順番に、そして永遠に表示され続ける『デジタル名札』を作ってほしい!」

この課題では、プログラムの基本中の基本である「上から下へ順番に命令を実行する(順次処理)」と、「同じ処理を繰り返す(反復処理)」を学びます。それでは、具体的な作り方の手順を見ていきましょう。

ステップ1:開発環境「MakeCode」を開こう

まずはパソコンのブラウザから、micro:bitの公式クラウド開発環境「MakeCode(メイクコード)」にアクセスします。

>> MakeCodeのページはこちらから!

新しいプロジェクトを作成すると、画面の左側には本物のmicro:bitと同じ見た目の「シミュレーター」が、右側にはプログラムを作るための「ブロック」が並んでいます。

ブロックを組み合わせるだけでプログラムが作れるため、タイピングができなくても直感的に操作が可能です

ステップ2:「ずっと」ブロックを用意しよう

画面の右側の作業スペースには、最初から「最初だけ」と「ずっと」という2つのブロックが置かれています。 今回のミッションは「永遠に表示され続ける」ことなので、「ずっと」ブロックを使います。これを使うことで、囲まれた中にある命令が繰り返し実行される「反復処理」の仕組みを作ることができます。

ステップ3:自分の名前を表示させよう

次に、メニューの「基本」カテゴリをクリックし、「文字列を表示 “Hello!”」というブロックを取り出します。 これをドラッグして、「ずっと」ブロックの中にカチッとはめ込みます。

“Hello!”の部分をクリックして、自分の名前(例:”TARO” や “HANAKO” などアルファベット)に書き換えましょう。

すると、画面左側のシミュレーターのLED部分(5×5の赤い光)に、入力した文字が右から左へスクロールして表示されるようになります

ステップ4:好きなマークを表示させよう

名前の後にマークを表示させます。同じく「基本」カテゴリから「アイコンを表示」ブロック(初期状態ではハートマーク)を取り出し、「文字列を表示」ブロックのすぐ下にはめ込みます

ここがポイントです!プログラムは「上から下へ順番に」実行されるというルール(順次処理)があります。そのため、この順番でブロックを並べることで、「名前が流れる」→「マークが出る」という順番で動作します。 アイコンはハートマークの他にも、スマイルマークなど様々な種類から選ぶことができます

ステップ5:自分だけのオリジナルマークを作ってみよう(応用)

用意されたアイコンだけでなく、自分で好きな形をデザインすることもできます。「基本」カテゴリにある「LEDに表示」ブロックを使ってみましょう。 このブロックは、5×5のマス目をポチポチとクリックして、光らせたい場所を自由に描くことができます。先ほどの「アイコンを表示」の下に繋げて、オリジナルのマークを追加してみましょう。

親からのアドバイスのヒント 「文字が流れたあと、マークが一瞬で消えちゃうな…」と感じたら、「基本」カテゴリにある「一時停止(ミリ秒)」ブロックをマークの下に追加して、表示されている時間を調整する試行錯誤を促してみてください。

ステップ6:シミュレーターで確認して、本体に書き込もう!

左側のシミュレーターで「名前→マーク」が永遠に繰り返されることが確認できたら、いよいよ本物のmicro:bitにプログラムを書き込みます。

  1. micro:bitとパソコンをUSBケーブルで繋ぎます。
  2. 画面左下の「ダウンロード」ボタンを押し、作成したプログラムのファイルをパソコンに保存します。
  3. ダウンロードしたファイルを、パソコンに認識されている「MICROBIT」というドライブへドラッグ&ドロップして転送します。
  4. 転送中は、micro:bitの裏面にある確認用LEDが黄色く点滅します。

点滅が終われば書き込み完了です!本物のLEDが赤く光り、自分の名前とマークが流れ始めます。

夜のデモンストレーション(納品)に向けて

親が帰宅したら、完成したデジタル名札を胸に当ててデモンストレーションをしてもらいましょう。 「どうやってずっと光らせているの?」「このマークはどうやって作ったの?」と質問し、子ども自身に「ずっとブロックで繰り返している」「上から順番に命令が動くんだよ」と説明させることが、プログラミング的思考を定着させる最大のコツです。

次回は第2回、「触ると喜ぶデジタルペット」の作り方を解説します。micro:bit V2の新しい機能をフル活用しますので、お楽しみに!