アクティビティ: 楽しい顔と悲しい顔

micro:bit 本体はハードウェアと呼ばれます。 それは物理的なテクノロジーのひとつです。 In order to make use of hardware, we need to write software (otherwise known as “code” or computer programs). The software “tells” the hardware what to do—and in what order to do it using algorithms. Algorithms are sets of computer instructions.

In this activity, we will discover how to use the micro:bit buttons as input devices and write code that will make something happen on the screen as output. さらに、擬似コード、MakeCode ツール、イベント・ハンドラー、およびコードのコメントの書き方ついても学びます。

擬似コード

あなたのプログラムに何をしてもらいたいですか？ コンピュータ・プログラムを書くにあったって最初に行うステップは、あなたのプログラムに何をさせたいか計画を立てることです。 ステップごとに分けた詳細な計画を書き出しましょう。 Your plan should include what type of information your program will receive, how this input will be processed, what output your program will create, and how the output will be recorded or presented. Your writing does not need to be written in complete sentences nor include actual code. This kind of detailed writing is known as pseudocode. 擬似コードは、プログラムの詳細なアウトラインまたは素案のようなものです。 擬似コードは、自然言語とコードを合わせたものです。

これから書くプログラムの擬似コードは以下の例のようになるでしょう。

  • 画面に何も表示していない状態から開始する。
  • Aボタンを押すと、幸せそうな顔を表示する。
  • Bボタンを押すと、悲しい顔を表示する。

マイクロソフト MakeCode

Now that you have a plan for your program in the form of pseudocode, let’s start creating the real program in Microsoft MakeCode. Remember, the MakeCode tool is called an IDE (Integrated Development Environment) and is a software application that contains everything a programmer needs to create, compile, run, test, and even debug a program.

  1. In Microsoft MakeCode, start a new project.

マイクロソフト MakeCode のツアー

  • シミュレータ - 画面左側。プログラムがmicro:bit本体で実行される時、どのような動作をするかを確認することが出来る仮想micro:bitです。 これはプログラムのデバッグや、プログラムが実行時にどのように振舞うかをすばやく理解するためのフィードバックとして便利です。
  • ツールボックス - 画面中央。いくつかのカテゴリに分かれており、カテゴリ内のブロックは右側のプログラミング・ワークスペースにドラッグすることができます。
  • ワークスペース - 画面右側。プログラムを作成するプログラミングワークスペースです。 プログラムは、この領域でブロックをスナップして組み合わせることによって構築されます。

IDE tour

The features highlighted here are:

  1. Go to the Home Screen to start a new project or open an existing project
  2. Simulator shows what your program will look like when running on a micro:bit
  3. Hide or Show the simulator pane
  4. Program in either Blocks or JavaScript
  5. Programming Workspace where you will build your program
  6. Blocks Toolbox
  7. Download your program to the micro:bit
  8. Name your project and Save it on your computer

イベント ハンドラー

When you start a new project, there will be two blue blocks, ‘on start’ and ‘forever’ already in the coding workspace. These two blocks are event handlers.

プログラミングにおけるイベントとは、キーを押す、マウス ボタンをクリックする、などを含む、ユーザーによって実行されるアクションのことを指します。 イベント ハンドラーは、イベントに応答する、あらかじめ決められた仕事のことです。 プログラマは、イベントが発生した時にコンピューターが何をするかを指示するコードを書くことができます。

追加情報：

  • Tooltips - Hover over any block until a hand icon appears and a small text box will pop up telling you what that block does. You can try this now with the ‘on start’ and ‘forever’ blocks.

Blocks tooltips

JavaScript コードの上にマウス ポインターを置くと、同じ効果が得られます。

Code tooltips

  • ヘルプ - 任意のブロックを右クリックして、ヘルプを選択することで参考ドキュメントを開くことができます。

Help menu

  • ブロックを削除する - 「ずっと（forever）」 ブロックをクリックし、左側のツールボックスエリアにドラッグします。 ゴミ箱アイコンが表示されるのが確認できるでしょう。 そこでブロックを手放すと、ブロックが画面から消えます。 任意のブロックをコーディング・ワークスペースからツールボックスの領域にドラッグすることで、そのブロックを削除することもできます。 また、コード ウィンドウからブロックを選択し、キーボードの「Delete」キー (mac の場合はコマンド X) を押すことで、ブロックを削除することも出来ます。

Trash

擬似コードを見ると、プログラムは画面に何も表示されていない状態からスタートさせたいということが分かります。

  • We can do this by going to the Basic toolbox category and under …more, choose a ||basic:clear screen|| block.

Clear screen block

  • 「表示を消す（clear screen）」ブロックをコーディングのワークスペースにドラッグします。

ブロックの色が灰色表示になっていることに着目してください。 この灰色表示になっているブロックの上にマウスポインターを置くと、このブロックがどのイベント ハンドラにも接続されていないので、そのために実行することができない、そのように教えてくれるポップアップ テキスト ボックスが表示されます。 Clear screen disabled

  • では「表示を消す（clear screen）」ブロックを「最初だけ（on start）」のブロックに ドラッグしましょう。するとブロックは灰色表示ではなくなりました。これはプログラムの実行スタートというイベントが発生したときにブロックが実行されるようになったということを示します。
basic.clearScreen()

保存は早めに、頻繁に!

これで、micro:bitシミュレータで現在実行しているプログラムを作成することが出来ました。 あなたがプログラムを書いている間、MakeCode は自動的にコードをプログラムにコンパイルして、シミュレータで実行してくれます。 この時点ではプログラムはあまり多くのことをしませんが、より面白くする前にプログラムに名前を付けて保存しましょう。

アプリケーション ウィンドウの左下、ダウンロード ボタンのすぐ右側に、プログラムに名前をつけるためのテキスト ボックスがあります。 プログラムに名前を付けたら、保存ボタンを押して保存します。 Save button 重要: コードは、何か重要な部分を記述したとき、または数分おきに保存するようにしましょう。 コードにわかりやすい名前を付けると、後でプログラムのリストからすばやく選んだり、他の人がそのプログラムの目的を理解するのが楽になります。

イベントハンドラーを追加

それでは私たちのプログラムをもう少し面白くするために、さらに2 つのイベント ハンドラーを追加してみましょう。

  • 入力メニューから「Aボタンが押されたとき（on button A pressed）」ブロックを 2 つ、コード ウィンドウにドラッグします。

２つめのブロックは灰色表示になっていることに注意してください。これは、今のところ２つとも全く同じブロックであり、Aボタンが押される、という同じイベントに「耳を澄ましている」状態だからです。 Two on buttons

  • 最初のブロックはそのままで、２つ目のブロックのドロップ ダウン メニューを使用して、ボタンを「A」から「B」に変更しましょう。 すると 「Bボタンが押されたとき」という別のイベントの発生を待っている状態になったので、そのブロックも灰色表示ではなくなりました。

Make on button B

input.onButtonPressed(Button.A, () => {
})
input.onButtonPressed(Button.B, () => {
})

LEDに表示

準備が整ったので、押されたボタンに応じて異なるイメージがLED画面に表示されるようにしましょう。

  • 「基本（Basic）」メニューから「LEDに表示I（show leds）」ブロックを 2 つ、コーディング ワークスペースにドラッグします。
  • 1つ目の「LEDに表示（show leds）」ブロックを 「Bボタンが押されたとき（on button A pressed）」イベント ハンドラーに組み入れて、2 つ目の「LEDに表示（show leds）」ブロックは「Bボタンが押されたとき（on button B pressed）」イベントにハンドラーに組み入れましょう。
input.onButtonPressed(Button.A, () => {
    basic.showLeds(`. . . . .
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    `)
})
input.onButtonPressed(Button.B, () => {
    basic.showLeds(`
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    . . . . .
    `)
})
  • 「Aボタンが押されたとき（on button A pressed）」イベント ハンドラーに組み入れてある「LEDを表示（show leds）」ブロック内の、小さなチェックボックスをひとつずつクリックすることでハッピーな顔のイメージを作ってみましょう。
  • 今度は「Bボタンが押されたとき（on button B pressed）」イベント ハンドラーに組み入れてある「LEDを表示（show leds）」ブロックのチェックボックスをひとつずつクリックすることで悲しい顔のイメージを作ります。
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       `)
})
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})

Did you ever wonder how those LEDs turn on and make light? Well, watch this video and find out!

プログラムをテストしよう！

あなたが書いたプログラムは、MakeCode によって自動的にコンパイルおよび実行されるので、自分のコードがどのようなアウトプットを生成するかを確認するには、Aボタンを押して次にBボタンを押すという動作だけで十分です。

  • 気に入ったイメージが表示されるまで、「LEDを表示（show leds）」ブロックのLEDをオンにしたりオフにしたりしていろいろ実験してみましょう。
  • コードを保存することを忘れないようにしましょう。 
basic.forever(() => {
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        # . . . #
        . # # # .
        `)
    basic.pause(800)
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        . # # # .
        # . . . #
        `)
    basic.pause(800)
})

コードにコメントを書く

コードにコメントを追加することは良い習慣です。 コメントは、以下のような点で役に立ちます。 コメントは、特定のコードブロックが何をするか、またはなぜあなたがそのようにプログラムを書くことにしたのかを思い出すのに便利です。 またコメントがあると、他の人があなたのコードを読む時にも、同じようにコードが理解しやすくなります。

コード ブロックにコメントを加える：

  • Right-click the code block.
  • メニューがポップアップします。「コメントを追加（Add Comment）」を選択します。

Add comment menu

  • This will cause a comment icon to appear to the left of the previous icon.
  • Click on the comment icon and a small yellow box will appear into which you can write your comment.

Write comment

  • Click on the comment icon again to close the comment box when you are done.
  • Click on the comment icon whenever you want to see your comment again or to edit it.

追加情報

  • When you right-click on the icon that appears before the words on a block, notice that there are other options available to you that allow you to duplicate, collapse, and delete blocks, as well as get help. コードを書くときに、それらのオプションを試してみましょう。
  • JavaScript では、2 つのスラッシュ（//）の後にコメントを書き込むことができます。2 つのスラッシュは、その後に続く文字はコメントですよと、 JavaScript 伝えているのです。
// Aボタンが押されたらハッピーな顔を表示します

クリーンアップ！

Clean up your coding workspace before you do a final save! What does this mean?

  • これはプログラムが実際に使用しているコードとブロックだけがワークスペースにある状態を意味します。
  • プログラムの作成中に、実験としてワークスペースにドラッグしたブロックを全て削除します。

保存とダウンロード

あなたのコードはシミュレータでうまく動作し、コメントされ、ワークペースもきれいになったので、プログラムを保存してmicro:bitにダウンロードして実際に動かしてみましょう！

完全なプログラムはこのようになっているはずです。

// Aボタンが押されたらハッピーな顔を表示します
input.onButtonPressed(Button.A, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       # . . . #
       . # # # .
       ')})
//B ボタンが押されたときに悲しい顔を表示します。
input.onButtonPressed(Button.B, () => {
   basic.showLeds(`
       . . . . .
       . # . # .
       . . . . .
       . # # # .
       # . . . #
       `)
})
basic.clearScreen()

Knowledge Check

Questions:

  1. What is the difference between RAM and hard drive memory?

    • a. RAM is the computer’s short-term memory and the hard drive is where the computer stores its long-term memory.
    • b. The hard drive is where the computer stores its short-term memory and RAM is the computer’s long-term memory.
    • c. RAM is used for programming and the hard drive memory is for storage.
    • d. Hard drive memory is for storing files and RAM is used for processing inputs.

  2. What’s an algorithm?

    • a. The word used to describe all computer codes
    • b. Sets of instructions to a computer
    • c. A type of hardware used with micro:bit
    • d. The area of a MakeCode project that shows how a program looks when run on the micro:bit

  3. What is an event in programming?

  4. What is an event handler?

Answers:

  1. The answer is a: RAM is the computer’s short-term memory and the hard drive is where the computer stores its long-term memory.
  2. The answer is b: Sets of instructions to a computer
  3. An action done by the user, such as pressing a key or clicking a mouse button
  4. A routine that responds to an event

Edit this page on GitHub
Edit template of this page on GitHub