micro:bitプログラミング入門講座テキスト

このテキストは小学生向けプログラミング教室の教材として作ったものを一部改変したものです。

追記）
2020.11.25にmicri:bit（v2.0）が日本でも発売されました。このページの記述はv1.5に基づいていますので、v2.0とは一部相違があります。


# micro:bit（マイクロビット）プログラミング講座

## A. micro:bit（マイクロビット）とは？

<img width="600" alt="microbit_img.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d38e14ee-e7b5-9729-e4c3-83524c0169cd.jpeg">

- イギリスのBBCが開発した学習用小型コンピュータ
- STEM（STEAM）教育に最適なものとして開発
- 持ち運べる（乾電池で動く），電子工作にも
- 2016年にイギリスの7年生（日本の中1）全員に100万台配布
- 現在日本でも2000円ほどで購入可能


### 特徴

- 加速度センサー
- 温度センサー
- 磁気センサー
- LED（25個）（明るさセンサーにも）
- ボタンスイッチ（2個）
- 音（スピーカーが必要）
- 無線、Bluetooth Low Energy（BLE）
- micro-USB
- I/O リング（3個）
- エッジコネクター（20ピン）


### 参考

- 加速度センサーの写真

<img width="400" alt="1-BST-20778.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/dde05452-740e-f972-608b-f2c4b70ced1d.jpeg">
> ([bosch.co.jp](https://www.bosch.co.jp/press/group-1601-05/) より)

- 加速度センサーの動作原理（動画）
[![Bosch Working principle of an acceleration sensor](https://img.youtube.com/vi/4kfzqZpttTA/0.jpg)](https://youtu.be/4kfzqZpttTA?t=21)
> ([Bosch Working principle of an acceleration sensor - Youtube](https://youtu.be/4kfzqZpttTA?t=21) より)


### プログラミング環境

- ブロック（MakeCode）
- JavaSript
- Python
- C/ C++
- Scratch/ Smalruby ほか



## B. プログラミングを始めよう

（※ 巻末に「J. よくある質問」、「K. 困ったとき」を載せています）

### A） 必要なもの

ここでは、パソコンを使ったやり方を説明していきます

- micro:bit本体
- パソコン（Windows10、macOS、Linuxなど、ブラウザが動くもの）
- ブラウザ（Google Chrome が推奨）
- USBケーブル（Type A - micro B）でデータ転送できるもの

　※ 安いUSBケーブルだと、充電専用で、データ転送できないものがあるので注意！

- インターネット環境

あるといいもの

- micro:bit対応電池ボックス、乾電池（micro:bit単独で動かせる）
- 圧電スピーカー（音が鳴らせる）
- スピーカーのコードをmicro:bitに固定するもの：

　「M3皿小ねじ×2、ナット×4、ワッシャー×2」
　（あるいはバナナクリップなど）

- パソコンにBluetooth機能（SmalrubyやScratchと連動するときに必要）


### B） MakeCodeでプログラミング

オンラインエディタ の「MakeCode for micro:bit」を使います

ブラウザ（Google Chrome推奨）で「microbit」と検索して、

→「Micro:bit Educational Foundation | micro:bit」

のページを開いて、

https://microbit.org

<img width="600" alt="microbit_org_top.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/fedddaaa-8b31-ac5b-1f32-2d4bbcbff90b.png">
> ([microbit.org](https://microbit.org) より)

→「コーディングを学ぶ」の「Microsoft MakeCode」
をクリック
<img width="600" alt="microbit_org_makecode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/8fa38661-fe60-cc9f-573e-660c1dc6a78f.png">
> ([microbit.org](https://microbit.org) より)

→ micro:bit の MakeCode ホーム画面

https://makecode.microbit.org

（※ ブックマークに登録しておくといいです）
<img width="600" alt="makecode_home.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7880ff5f-1091-7296-8258-4a4c7371c32a.png">
> ([makecode.microbit.org](https://makecode.microbit.org/) より)



## C. 「チュートリアル」をやってみよう

まずは、ホーム画面の「チュートリアル」を順番にやってみましょう

（※ （応用）や「F. 組み合わせて作ってみよう」などの課題は、巻末にプログラミング例を載せています）


### 1. 「点滅するハート」

LEDでハートマークを点滅させよう


#### 1-1. チュートリアルの進め方

やりたいチュートリアルを選びます
<img width="600" alt="tutrial_heart_0.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/63017335-585c-074b-f61e-c6f740f701c6.png">
> ([makecode.microbit.org](https://makecode.microbit.org/) より)

→「ブロック」をクリック

<img width="600" alt="tutrial_heart_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/91ddef3d-5a3f-9ea6-f43d-210d14332d9f.png">
> ([makecode.microbit.org](https://makecode.microbit.org/) より)

→あとは、チュートリアルの説明通りに進めていきます


#### 1-2. 完成形

<img width="600" alt="点滅するハート.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/93996bf7-0f90-5aee-2d06-2d63803f8e1c.png">


#### 1-3. 左側の「シミュレーター」で動きを確認しよう

左側が「シミュレーター」です。実物のmicro:bitを使わずに、プログラムの動きを確かめられます


#### 1-4. micro:bitにプログラムをダウンロードしよう

※ 以下、Google Chrome（WebUSB対応ブラウザ）を使って説明していきます

（WebUSB非対応ブラウザの場合は、パソコンに一度ダウンロードしてから、micro:bitに書き込みます。やり方については、J.「K) プログラムをパソコンに保存したい」、「M) パソコンに保存したプログラムを直接 micro:bitに書き込みたい」を見てください。）

1）パソコンにUSBケーブルをつなぐ

2）ケーブルの反対側（micro-USB側）をmicro:bitにつなぐ
（※ ケーブルの上下の向きをよく確かめて！）

3）画面左下の「ダウンロード」の右の「…」をクリック

4）「デバイスを接続する」をクリック
<img width="600" alt="usb_connect_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/79c42e44-6afd-6a83-7329-c307da8a98a0.png">

5）パネルの右下の「デバイスを接続する」をクリック
<img width="400" alt="usb_connect_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/fad81f7a-d45c-44db-a127-17c033888a89.png">

6）「BBC micro:bit CMSIS-DAP」を選んで（クリックして色をつけて）から、右下の「接続」をクリック
<img width="400" alt="usb_connect_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/101fe767-aef1-f3aa-4826-4c9892f074f8.png">

7）元の画面に戻るので、左下の「ダウンロード」をクリックすると、micro:bitに作ったプログラムが書き込まれます

（よく見ると、「ダウンロード」のアイコンがUSBに変わっています）


#### 1-5. micro:bitで動きを確認しよう

プログラムが書き込まれると、自動的にプログラムが動き始めます。


#### 1-6. プログラムを改造して、いろいろ試してみよう

プログラムをいろいろ改造して、シミュレーターで確かめて、いいと思ったら micro:bitに書き込んで実際に動かしてみましょう

micro:bitのプログラム作りは、この繰り返しです

※ わからない、うまくいかないことがある場合は、巻末の「J. よくある質問」、「K. 困ったとき」を見てみてください


### 2. 「名札」

自分の名前を英語で表示してみよう

<img width="300" alt="Name-Tag.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/035e4870-0d25-bc5a-27e5-abe055b420ad.png">

### 3. 「スマイリーボタン」

ボタンを押すとニコニコマークを表示させてみよう

<img width="400" alt="Smiley-Buttons.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/feb4b241-920f-2b13-20e8-ec7a93bcfa4f.png">


### 3-a. （応用） 「スマイリーボタン 2」

ボタンを押していない時は、LEDを消すには？

ヒント：「もし〜」を使って、ボタンが押されている／いないで場合分けします


### 4. 「サイコロ」

ゆさぶったら、数字が出るサイコロを作ろう

<img width="400" alt="Dice.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/8ff07bb7-c7c5-ce4e-cfe7-0c876979827a.png">


### 4-a. （応用）「サイコロ 2」

数字でなく ⚀ ⚁ ⚂ ⚃ ⚄ ⚅で表示しよう

ヒント：「変数」を使って、数字によって場合分けしてLEDを表示します


### 5. 「ラブメーター」

端子をさわったら、数字が表示されるようにしよう

（端子0とGNDを両手で触ります）

<img width="400" alt="Love-Meter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/caa73c2d-f006-360a-8f0f-7209b8864d20.png">


### 6. 「マイクロチャット」

micro:bit同士を無線でつないで通信してみよう

<img width="500" alt="Micro-Chat.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/fa5fe9b1-eb85-9b0c-e5e7-85919092a0ae.png">



## D. いろいろなセンサーの値を表示してみよう

センサーのブロックは、「入力」やその下の「その他」にあります

<img width="600" alt="入力ブロック1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/df0ddfdf-4eab-b74b-45f6-fa0dccf260a3.png">

<img width="600" alt="入力ブロック2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/284d3a8a-1858-4c6f-f1dc-1e6aafe24ce3.png">


### 7. 「明るさ」を表示してみよう

#### 7-a. LEDに表示

明るさをLEDに表示してみよう
<img width="300" alt="明るさ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5a65efd6-0914-7d44-68f8-24b64c9da6b1.png">


#### 7-b. コンソールに表示

明るさをコンソールに表示してみよう

<img width="600" alt="シリアル通信ブロック.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e1057e29-63b2-fab6-1c29-0067e38dabc5.png">
「高度なブロック」の中の「シリアル通信」のブロックを使います

<img width="300" alt="明るさ_コンソール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/ff37527c-e86e-aecf-30af-c2487aa36fba.png">

micro:bitにプログラムを書き込んだら、USBケーブルでパソコンとつながっているときに、シミュレーターの下にある「コンソール表示 デバイス」をクリックすると、実際の明るさがコンソールに表示されます。
<img width="600" alt="明るさ_コンソール画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/db76bdae-76e3-1cc1-2f87-830ca2dc8d5a.png">


### 8. 「温度」を表示してみよう

※ この温度は気温ではなく、micro:bitのCPUの温度を測っています。CPUの部品を指で温めると、温度が変わるのが分かると思います。

#### 8-a. LEDに表示

温度をLEDに表示してみよう

<img width="300" alt="温度.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/90506bd5-fd96-dd68-93f2-5e4fd31c32d6.png">


#### 8-b. コンソールに表示

温度をコンソールに表示してみよう

<img width="300" alt="温度_コンソール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d7024fae-a9a3-c7af-235b-b8404388e08d.png">


### 9. 「方角」を表示してみよう

※ 初回は、micro:bitの磁気センサーのキャリブレーション（調整）が必要です。

LED画面に「TILT TO FILL SCREEN」と表示されるので、LEDが全部点灯するまで、いろいろな方向に傾けます。

#### 9-a. LEDに表示

<img width="300" alt="方角.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/8482afd9-d150-1928-1d4c-7ffccd7fbf02.png">


#### 9-b. コンソールに表示

<img width="300" alt="方角_コンソール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b2f8b5b3-1c5a-f013-6559-c269b5783b9b.png">


#### 9-c. （応用）「コンパス」を作ろう

北の方角を矢印がさすようにしよう

ヒント：方角の数字によって場合分けして、LED表示を変えます


### 10. 「傾き」を表示してみよう

傾きには「ピッチ」（前後方向）と「ロール」（左右方向）があります。

#### 10-a. LEDに表示

<img width="300" alt="傾き.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b816a592-672a-55e5-8ffa-754efb9ee0e6.png">


#### 10-b. コンソールに表示

<img width="500" alt="傾き_コンソール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/30ed025b-9ded-f9b2-2766-fde9958eefb8.png">


### 11. 「加速度」を表示してみよう

加速度センサーは、micro:bitの動き（加速度）を表示してくれます。
また、micro:bitを動かさなくても地球の重力による重力加速度を常に受けています。そのため、micro:bitの向き（どちらが上か下か）も知ることができます。


micro:bitの加速度センサーは、3方向が測れるようになっています。
X方向はmicro:bitの左右方向（左側を上に置いたときプラス）、Y方向は上下方向（上側を上に置いたときプラス）、Z方向は表裏方向（LED面を上に置いたときマイナス）です。

X、Y、Zの3方向の加速度をコンソールに表示してみましょう。micro:bitの置く向きを変えたり、振って動かしたりして、数字の変化を見てみてください。

<img width="500" alt="加速度.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a6d7c5fd-f38e-bafd-3c4e-0ec32950653e.png">


## E. 音を出そう

micro:bitにスピーカーをつなげる必要があるので、ちょっと工作します。ここでは、市販の圧電スピーカーを使います。

スピーカーのコードをmicro:bitの端子に固定する方法はいろいろ考えられますが、ここでは「ねじ」と「ナット」を使う方法を説明します。

「M3皿小ねじ」と「ナット」をmicro:bitの「端子0」と「GND」にそれぞれ固定します。さらに、「ワッシャー」を入れた上に、もう1つの「ナット」をゆるく締めます。スピーカーのコードを「ワッシャー」と「ナット」の間に挟んで、きちんと「ナット」を締めると完成です。

道具を使わずとも指で締めるくらいで十分でしょう。

赤と黒のコードの場合、赤いコードを「端子0」に、黒いコードを「GND」につなぎます。
コードは逆につないでも、（音が逆位相になるだけで）音は鳴りますので、あまり気にしなくてもいいです。


### 12-a. 「ド」の音を出そう

<img width="300" alt="音_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/279387f2-8dca-4803-9ce5-03676b4e3075.png">


### 12-b. 「ド、レ、ミ」と音を出そう

<img width="300" alt="音_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d9f0ad5a-6863-8943-8125-e09067739b1e.png">


### 12-c. 「メロディー」を鳴らそう

<img width="400" alt="音_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/ad969e83-33e4-d6a2-36c7-307fd94e19d9.png">



## F. 組み合わせて作ってみよう

### ○ ゆさぶる + LED表示

### 13. 「最初はグー、じゃんけん」

ホームの「チュートリアル」の下にある「ゲーム」の中から、 「最初はグー、じゃんけん」をやってみましょう
<img width="600" alt="makecode_じゃんけん.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5edd57de-2286-7f1e-4bca-90a4013d5edd.png">
> ([makecode.microbit.org](https://makecode.microbit.org/) より)

ゆさぶると、グー、チョキ、パーが表示されるようにしよう。作ったら、対戦してみよう


### ○ 明るさ + LED表示

### 14. 暗くなったら点灯

暗くなったら、LEDが光るようにしよう


### ○ 明るさ + 傾き + LED表示

### 15. micro:bitをめくると目を覚ます

伏せてあるmicro:bitをめくると、目を覚ましたようなLEDの表示をしてみよう


### ○ 加速度 + 音

### 16. ジャンプで音を出そう

ジャンプすると「ピコーン」と音が鳴るようにしよう


### ○ 傾き + 音

### 17. 音の高さを変化させよう

micro:bitを傾けると音の高さが変わるようにしよう


### ○ 傾き + LED表示

### 18. ボール転がし

micro:bitを傾けるとLEDのボールが転がるようにしよう

LED1つが光って、傾けるとそちらに動いていきます


### 19. ボール転がしゲーム

ゴールを作って、ボールを転がそう

もう1つLEDのゴールを作って、ボールが重なったらゴール！



## G. 工作しよう

身近な材料を使ってmicro:bitと組み合わせた作品を作ろう

### 20. ころころサイコロ

円筒のプラ容器を転がすサイコロを作ろう

micro:bitに 4.で作った「サイコロ」プログラムを書き込んで、透明な円筒プラスチック容器に入れて、転がすサイコロにしてみます

電池ボックスを入れる場所を工夫すると、電池の重みでmicro:bitが上を向いたときに止まるようになります

「ゆさぶられたとき」を「画面が上になったとき」に変えてもいいかもしれません



## H. 自由工作

micro:bitと工作を組み合わせて、自分の作品を作ろう

例）

- 3分タイマー（ひっくり返してスタート、時間で音が鳴る）
- エレキギター（傾きで音程が変わる）
- バースデーカード（開くとLED表示と音が鳴る）
- 引き出し監視アラーム（開くとLED表示と音が鳴る）
- 歩数計（加速度センサーで）
- サウンドヨーヨー（振り子）（傾きセンサーで音程が変わる）
- じゃんけん対戦（2台の無線でじゃんけんの判定）
- 接触アプリ or 忘れ物アラーム（2台の無線の距離で音が鳴る）
- ボールキャッチゲーム（落ちてくるLEDのボールを受け止める）



## I. スペシャル：Smalruby（Scratch）と組み合わせてみよう

micro:bit は Smalruby（あるいは Scratch）と組み合わせて動かすことができます。

その仕組みは、micro:bitに専用プログラムを書き込んでおいて、パソコンで作ったSmalrubyのプログラムを無線（Bluetooth）で通信することで、micro:bitを動かすようになっています。

そのため、プログラムはSmalrubyで作ることになります。

※ パソコンにBluetoothが搭載されている必要があります。


### 準備

#### 準備1) 「Scratch Link」をパソコンにインストールする

「Scratch Link」というパソコン用ソフトをダウンロードします。
https://scratch.mit.edu/microbit

から、ソフトをダウンロードしてパソコンにインストールします。
<img width="600" alt="ScratchLink_download.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b548293b-4e0c-34dd-2928-dd47de6bc836.png">
> ([scratch.mit.edu/microbit](https://scratch.mit.edu/microbit) より)


#### 準備2) 「Scratch micro:bit HEX」をmicro:bitに書き込む

同じページから、「Scratch micro:bit HEX」をダウンロードします。
<img width="600" alt="scratch-microbit-hex.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/ada4f85e-e787-d4bd-e45e-d779163ccf35.png">
> ([scratch.mit.edu/microbit](https://scratch.mit.edu/microbit) より)

このソフトは、micro:bitに書き込みます。

micro:bitへの書き込み方は、「J. よくある質問」の「M) パソコンに保存したプログラムを直接 micro:bitに書き込みたい」を見てください。


#### 準備3) 必要なものを起動しておく

- パソコンの「Scratch Link」を起動しておく
- パソコンの Bluetooth を有効にしておく
- micro:bit の電源を入れておく


#### 準備4) パソコンでSmalruby3のオンラインエディタを開く

- Smalruby3 のオンラインエディタは、こちら↓

https://smalruby.jp/smalruby3-gui/

<img width="600" alt="Smalruby3_エディタ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/608c1474-bf26-2115-ba9f-3d3b5ad0becd.png">
> ([smalruby.jp/smalruby3-gui](https://smalruby.jp/smalruby3-gui/) より)

- Scratch のオンラインエディタは、こちら↓

https://scratch.mit.edu/projects/editor/


#### 準備5) micro:bit拡張機能を追加する

オンラインエディタの左下角の青い <img width="20" alt="Smalruby3_拡張機能ボタン.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/55ca1cd8-51f8-711d-118f-227130d86218.png">（拡張機能）ボタンをクリックして、拡張機能の一覧から「micro:bit」を選びます。

<img width="600" alt="Smalruby3_拡張機能を選ぶ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/deef2a1a-7b36-0762-4518-65a9724deeaa.png">

<img width="600" alt="Smalruby3_拡張機能.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c92a5dbf-2904-0953-3ad1-dc60e14431de.png">


#### 準備6) Scratch Linkで接続する

接続するためのパネルが出ます。
<img width="300" alt="ScratchLink接続.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/63424b0f-c8e5-8e5b-4583-0da791c021a7.png">

「接続」を押すと、micro:bitが接続されます。
<img width="300" alt="ScratchLink成功.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5f05b816-e1dd-1e1d-d356-1a2b76d8d733.png">

下のようなパネル↓が出た場合は、前の手順に戻って確認してみてください。
<img width="300" alt="ScratchLink_未実行.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c6ba7b3e-22fd-6902-f54f-0f8f8afcb42e.png">


#### 準備7) micro:bitのメニューを確認

エディタに micro:bitの拡張機能がメニューに追加されています。
<img width="600" alt="Smalruby3_microbit.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/72427cb4-fc78-7593-17c6-29e30324923a.png">

なお、メニューの右上角に緑の✅（チェックマーク）が表示されている時は、micro:bitと接続できています。

接続が切れた場合は、右上角のマークがオレンジの❗マークになります。その時は、❗マークをクリックして、再度接続してください。
<img width="200" alt="ScratchLink_接続切れ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/627d0c7d-e339-5089-dc34-7925f31a0e8b.png">


### 21. ネコ1

（※ Smalruby（あるいはScratch）の詳しいプログラムの作り方は、それぞれのホームページを見てください）

micro:bitのAボタンとBボタンでネコが左右に動くようにしよう

<img width="600" alt="Smalruby3-ネコ1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/daf22b46-ff8f-0629-bdcb-26eac5265e3c.png">


### 22. ネコ2

micro:bitを傾けて、前後左右に動くようにしよう

<img width="500" alt="ネコ2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/1721c257-0330-4bf2-5415-8a2e8a846745.png">


### 23. ネコ3

ネコ2 よりスムーズに動くようにしよう

「もし〜」の中で、「〈前・後ろ・左・右〉に傾いたら」ブロックを使ってみます。
<img width="500" alt="ネコ3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/14d8f5f3-a38f-c3b4-b268-a7db6b96397c.png">

### 24. 魚と楽器ゲーム

ゲームキャラクタをmicro:bitでコントロールして、ゲームを作ろう

<img width="600" alt="Smalruby3_魚と楽器.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/10cff5e1-4ab9-523c-a554-f646de361153.png">

魚が泳いてきて、トランペットにぶつかると音が鳴る。トランペットはmicro:bitを前後に傾けると、画面を上下に動くようにします。

1）背景の画像を右下のステージから選びます

2）2つのキャラクターを右下の「ネコマーク」をクリックして選びます。

3）2つのキャラクターそれぞれにプログラムを書いていきます

※ キャラクターのアイコンをクリックすることで、そのキャラクターのプログラムが表示されます

・楽器のプログラム
<img width="600" alt="魚と楽器_f.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d07a5c5d-28d2-97db-d9ef-8aa23f0e6daa.png">

・魚のプログラム
<img width="600" alt="魚と楽器_t.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c680477a-681f-0118-a9a5-efcdfceea2fd.png">



## J. よくある質問

### A） micro:bitの左上の色がほかの人と違う

micro:bitの左上の色は青や赤、黄、緑など何種類かありますが、箱を開けてみないと分かりません。また、色は自分では選べません。


### B) 電源を入れるには？

- パソコンにつながったUSBケーブルをつなぐ
- 電池ボックスをつなぐ（電池ボックスのスイッチをON）

上のどちらかで、電源が入ります。


### C) 電源を切るには？

micro:bitに電源スイッチはありません。

電源を切るには、USBケーブルを抜いて、電池ボックスがあればそれもOFFにします。


### D) 電源を切らないで、プログラムを再実行したい

micro:bitの裏面の「リセット」ボタンを押します。


### E) 「ディスクの不正な取り出し」とパソコンに表示が出る

USBケーブルを抜いたときに、そのような警告が出ることがありますが、無視して大丈夫です。


### F) 「プロジェクト」って何？

MakeCodeで作る「プログラム」のことを「プロジェクト」と言っています。なので、2つは同じ意味です。


### G) 新しく自分でプログラムを作るには？

MakeCodeのホーム画面から「新しいプロジェクト」を選びます。
<img width="600" alt="makecode_new.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/10ccdf47-f8fc-3626-0107-b05c7e76418b.png">
> ([makecode.microbit.org](https://makecode.microbit.org/) より)

### H) プログラムに名前をつけるには？

「新しいプロジェクト」を選んだときは、最初にパネルが出ます。ここに名前を入れます。
<img width="400" alt="プロジェクト作成パネル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f6fd3cdf-fb50-409f-e419-00ee4862abaf.png">
何も名前を入れないで「作成」ボタンを押すと、「題名未設定」という名前になります。

また、チュートリアルでは、あらかじめプログラムの名前が入っています。


### I) プログラムの名前を変えるには？

「ダウンロード」ボタンの右側にプログラムの名前が入っています。ここで名前はいつでも変えることができます。
<img width="600" alt="名前変更.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/8b5a73bd-37b0-7749-6e77-a8418a4017bc.png">


### J) 前に作ったプログラムを見たい

MakeCodeのホーム画面の「マイプロジェクト」に、前に作ったプログラムが一覧になっています。（たくさんある場合は、「すべて表示」を押します。）
<img width="600" alt="makecode_プロジェクト一覧.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/6e02dfae-c3a1-8821-383b-1858bb132539.png">


### K) プログラムをパソコンに保存したい

「プログラムの名前」の右の「💾（保存）マーク」を押すと、プログラムはパソコンの「ダウンロード」フォルダに保存されます。（名前は、「microbit-○○○○.hex」のようになります。）
<img width="600" alt="パソコンに保存.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b2f84de9-e5b4-e237-3207-4ee627be1806.png">


### L) パソコンに保存したプログラムを開きたい

保存してあるプログラムを、MakeCode のプログラム作成画面にドラッグ＆ドロップします。

他のプログラムを作成中の画面でもいいです。また、ホーム画面にいる時は、「新しいプロジェクト」や「マイプロジェクト」の中のどれかを選んでプログラム作成画面にします。

別のやり方としては、MakeCodeのホーム画面の「マイプロジェクト」の右端の「読取」ボタンをクリックして、「ファイルを読む…
パソコン上のファイルを開く」を選んで、読み込みたいプログラムを指定します。
<img width="600" alt="makecode_プログラム読み取り.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/36dac603-26a1-2162-1dba-9c9456f98940.png">


### M) パソコンに保存したプログラムを直接 micro:bitに書き込みたい

micro:bitのプログラムを、パソコンのエクスプローラーやFinderの左側、デスクトップなどに表示されている「micro:bit」アイコン上にドラッグ＆ドロップします。


### N) 自宅でもプログラムを作りたい

MakeCodeは、Windows10、macOS、Linuxなどの動くパソコンで、ブラウザ（Google Chrome が推奨）があれば使えます。

また、タブレット（iPadなど）やスマートフォン（iPhone、Android）でもブラウザを使うか、あるいは「micro:bit アプリ」をインストールすることで使えます。（プログラムの書き込みは USBケーブルではなく、Bluetoothを使います。）



## K. 困ったとき

### A) プログラムの書き込みが終わらない

ブラウザを「再読み込み」（左上の「↻」ボタン）をするとうまくいくことが多いです。
<img width="600" alt="ブラウザの再読み込み.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/3b1b6fb0-8cfa-f226-46e4-b53c6fde4577.png">


### B) プログラムがmicro:bitに書き込まれず、パソコンにダウンロードされてしまう

ブラウザとmicro:bitの接続がうまくいっていません。もう一度、C.「1-4. micro:bit にプログラムをダウンロードしよう」の「デバイスを接続する」操作を行ってください。


### C) 再度「デバイスを接続する」操作をしてもうまく行かない

一度、micro:bitとの接続を解除してみてください。
左上の「🔒（鍵）マーク」を押して、"BBC micro:bit CMSIS-DAP"の右の「×」ボタンを押してください。（micro:bit が複数あれば、すべて解除）
<img width="600" alt="接続を切る.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f61e70ce-f12a-b08f-7cbe-3ea98c77602b.png">

その後、再度 C.「1-4. micro:bit にプログラムをダウンロードしよう」の「デバイスを接続する」操作を行ってください。


### D) やはり、micro:bitにプログラムが書き込めない
一度、パソコンに保存してあるプログラム（どれでもよい）を直接 micro:bitに書き込むと、直ることがあります。

やり方は、J.「M)「パソコンに保存したプログラムを直接 micro:bitに書き込みたい」を見てください。

### E) パソコンからは書き込めるが、ブラウザからはプログラムが書き込めない

a) WebUSB機能に対応したブラウザを使ってください（Google Chrome が推奨）。

b) micro:bitのファームウェアのバージョンが古く、WebUSB機能に対応していない場合があります。（バージョン 0243以上が必要）

下記を参照して、ファームウェアのバージョンを確認して、必要なら最新のファームウェアにしてください。

→ [ユーザーガイド ファームウェア - microbit.org](https://microbit.org/get-started/user-guide/firmware/)

https://microbit.org/get-started/user-guide/firmware/


### F) 一度もプログラムが書き込めない

見た目は同じですが、安いUSBケーブルだと充電専用で、データ転送できないものがあります。データ転送できるUSBケーブルに交換してみてください。


### G) 英語なので日本語にしたい

Google Chromeの「このページを翻訳」を使います。
右上の<img width="20" alt="Google翻訳ボタン.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/22924ab2-27f7-367b-3392-8d1808f18043.png">（Google翻訳）ボタンを押して、「日本語」と「英語を常に翻訳」を選択します。
<img width="600" alt="日本語翻訳.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/475037b9-830b-ce91-0502-84463dffb91d.png">


### H) ブロックが英語のままで、日本語にならない

右上の「Microsoft」ロゴの左にある「⚙（歯車）マーク」を押して、「言語」をクリックすると、「言語を選択する」パネルが出るので、「日本語」を選択します。
<img width="600" alt="言語設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/09d3228b-f56f-dc12-1e87-2a04f2b751b3.png">



## L. ライセンス

本テキスト内の解説文、プログラムはともにパブリックドメイン



## M. プログラム例

### 3-a. （応用） 「スマイリーボタン 2」

<img width="400" alt="Smiley-Buttons-2a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/0b2d8158-0028-6bdd-729f-a97bcd1007f8.png">
このプログラムでは、「ボタンA+B」を押した場合にうまく表示されません。なぜでしょうか？

ボタンA+Bを押しても、先に「もしボタンAが押されているなら」の条件に当てはまるので、そのLEDが表示されてしまうのです。

では、プログラムを修正してみましょう。
<img width="400" alt="Smiley-Buttons-2b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/369cdcf2-e9af-8739-b162-5e988491d0c7.png">
やり方はいろいろありますが、ここでは先に「ボタンA+B」が押されているかを見ることにしました。


### 4-a. （応用）「サイコロ 2」

<img width="400" alt="Dice-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/43a16327-9ca2-fc4d-9e17-92f010951f35.png">


### 9-c. （応用）「コンパス」を作ろう

まず、北を向いたときだけ矢印が表示するプログラムを作ってみます。

方角を4等分すると、北の方角は0〜45°または 315〜360°になります。
<img width="400" alt="コンパス_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/4012fa9f-8b11-48b5-0e4b-627de0325fbe.png">

次に、どの方向を向いても、矢印が表示されるようにします。

東の方角は45〜135°、南は135〜225°、西は225〜315°になります。
矢印はmicro:bitの向きを考えて作りましょう。
<img width="400" alt="コンパス_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b2d1b420-6cfc-199e-0b12-afae5bdd66b8.png">
方角の判定がすべて不等号（＞ や ＜）なので、135°ぴったりなどの場合を考えて ≧ や ≦ も使ってください。


### 13.  「最初はグー、じゃんけん」

<img width="400" alt="Rock-Paper-Scissors.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e6254962-652f-95f0-5f5d-b644232435ae.png">


### 14. 暗くなったら点灯

<img width="300" alt="暗くなったら点灯.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9b9dbcef-1b88-9837-79fc-e0459a313334.png">
明るさを判定する数字は各自調整してください。


### 15. micro:bitをめくると目を覚ます

<img width="500" alt="目覚める_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9f8430b2-e2b0-56ce-616c-2d3b919fdb0d.png">

「起きている」表示も増やしてみます。角度の判定は、絶対値の方がうまくいくようです。

LED表示が長くなったので、関数を作ってまとめてみます。

<img width="600" alt="目覚める_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/69372cfd-8f9c-1060-46b1-841cf8202e65.png">


### 16. ジャンプで音を出そう

ジャンプしたときに、加速度の数字がどう変わるかターミナルに表示してみます。
<img width="300" alt="ジャンプ_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7d3de728-cb10-c723-2e46-7bc2db5f31ae.png">

加速度の数字の変化を使って、ジャンプしたときの条件を作ります。
<img width="500" alt="ジャンプ_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/612a3048-7d1e-948d-5a88-723c273ecfc7.png">


### 17. 音の高さを変化させよう

<img width="300" alt="音程_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/0c7ded6b-5056-ac87-5bfa-88c8d1927b0c.png">
単純に傾きの角度の数字をそのまま使うと、音が低すぎました。

<img width="300" alt="音程_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2abf0400-2cd5-3fa8-e046-0dd582282e64.png">
そこで、ドの音（262Hz）に傾きの角度を足すようにしてみました。

<img width="500" alt="音程_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2037668d-8654-1d95-6105-d85cd069cf0f.png">
ボタンAを押すと、1オクターブ高くなる（周波数が2倍になる）ように、ボタンBを押すと、1オクターブ低くなるように（周波数が半分になる）ような機能を付け加えます。


### 18. ボール転がし

LEDを一つ点灯させてみます。（x位置 2、y位置 2）
<img width="300" alt="ボールころがし_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/cb0de234-aba1-033d-ea71-b05390ac515e.png">

前後に傾けると（ピッチが増えたり減ったりすると）、点灯する y位置が増えたり減ったりするようにします。
<img width="400" alt="ボールころがし_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7c9ebb97-e1ad-3fac-1195-c846459a42f5.png">

LEDが消えないでつながってしまうので、毎回LEDを消すようにします。
<img width="400" alt="ボールころがし_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e6ad402f-30f2-30f2-667c-02868abb0ead.png">

LEDの点灯がちらつくので、最初に消灯を入れてちらつきを抑えます。
<img width="400" alt="ボールころがし_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5acfa5af-6e06-fb4f-3873-63167be6e69b.png">

左右に傾けると（ロールが増えたり減ったりすると）、点灯する x位置が増えたり減ったりするようにします。
<img width="400" alt="ボールころがし_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/4de2f413-6dc9-746c-e0c6-36ddf3f8aa42.png">

前後左右の動きが滑らかでありません。

これは、一つの「もし〜」の中にピッチ（y位置）の判定も、ロール（x位置）の判定も入れてしまっているからです。

そこで、「もし〜」を2つ用意して、ピッチ（y位置）の判定と、ロール（x位置）の判定を別の「もし〜」でするようにします。
<img width="400" alt="ボールころがし_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c39741ed-a9e9-2006-252d-6d3447bad79b.png">

すぐLEDの範囲外に行ってしまうので、最小0、最大4の範囲に収めるようにします。
<img width="400" alt="ボールころがし_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/029e403a-f046-76b5-22ab-d48849c8b0d3.png">
これで完成です！


### 19. ボール転がしゲーム

ボール転がしを発展させて、ゴールを作ります。

ボタンAを押すと、ゴールのLEDがランダムな位置に点灯するようにします。
<img width="600" alt="ボールころがしゲーム_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e2813a16-1c89-4d4e-bcc8-c47af9b8cf2d.png">

ゴールのLEDとボールのLEDが同じ位置になったら、ゴールの表示をするようにします。
<img width="600" alt="ボールころがしゲーム_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e9ced7b6-97a6-1ec1-1bd2-a331d4f70451.png">

「もし〈真〉ならくりかえし〜」というブロックを使って、まとめてみます。
<img width="600" alt="ボールころがしゲーム_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/ee2f0bed-460e-1ae2-2cad-256352d95f35.png">

一応完成です！

ただ、ボタンAを押すたびにゴールのLEDが増えていってしまいます。どうしたらよいでしょうか？

また、他にも改造したいところがあれば、みなさんで直してみてください。


### 20. ころころサイコロ

<img width="400" alt="ころころサイコロ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b012c865-dd57-a974-e768-77aaebaac822.png">