2020/11/1

2020.11.21

第16回教科情報合同研究会

資料

micro:bitによるフルカラーLEDの制御
内容:シミュレータを使ったプログラミング実習
担当：稲川孝司（帝塚山学院大学）

講義
1

1

NeoPixelとは◼NeoPixelとは、RGBの３つのLEDとその制御回路が１つのセルに入っており、シリアル通信でRGBの値を順に送ることで、多くのLEDをフルカラーで光らせることができるAdafruit社のLEDです。
RGBそれぞれを256段階に調整でき、およそ1670万色に光ります。

2

2

1

2020/11/1

NeoPixelの種類 リング型とstrip型

33Micro:bitとNeoPixelの接続
Micro:bitとNeoPixelを右図のように接続します。
黄色はP0,赤は３V,黒はGND(シミュレータのみの人は、不要です）

442

2020/11/1

シミュレータの利用ライブラリを追加し、プログラムを作成すると、自動的にシミュレータ画面にNeoPixelが追加されます。
55

NeoPixelが2つの場合

NeoPixelが3つの場合

663

2020/11/1【準備】NeoPixelライブラリの入手
1)

ブラウザで https://makecode.microbit.org サイトに行きます。

2) 新しいプロジェクト⇒名前を「rei-1」と入力し、作成ボタンをクリック
3) 一番下の「高度なブロック」⇒「＋拡張機能」⇒「neopixel」の写真をクリック
4) プログラム作成画面上に、水色のNeopixelのブロック群が追加されます。
写真をクリック

77

これで講義は終了です。
次は 実習１です8842020/11/1

micro:bitによるフルカラーLEDの制御
内容:シミュレータを使ったプログラミング実習
担当：稲川孝司（帝塚山学院大学）

実習1 例１～例４
99【例1】NeoPixelを光らせてみよう。(rei-1）＜手順＞
1) 新しいプロジェクト⇒名前を「rei-1」と入力し、作成ボタンをクリックします。
2)「最初だけ」の中に「変数をNeoPixelモードにする」ブロックを入れます。
3) NeoPixelを接続している端子はP0なので、P0であることを確認します。
4) NeoPixelの数は8個なので、ブロック内の24を8に変更します。
5) 「Neopixel」ブロックから「赤色に点灯する」ブロックを最初だけに追加します。
6) 作成したプログラムをmicro:bitに書き込み、赤色で点灯することを確認します。

24を8に変更10105

2020/11/1【例2】好きな色で点灯させてみよう。(rei-2）＜手順＞
1) 例1のプログラムのままで、プログラム名に「rei-2」と入力します。

2) 「赤」色に点灯するブロックの▼をクリックし、好きな色に変えます。
3) 作成したプログラムをmicro:bitに書き込み、点灯することを確認します。

1111【例3】LEDを赤色で100ミリ秒ごとに点滅させてみよう。(rei-3）＜手順＞
1) ファイル名を「rei-3」と入力します。
2) 「最初だけ」の中に「変数をNeoPixelモードにする」ブロックを入れます。
3) NeoPixelを接続している端子はP0なので、P0であることを確認します。
4) NeoPixelの数は8個なので、ブロック内の24を8に変更します。
---------------------------------------------------5) 「ずっと」の中に「赤色に点灯する」ブロックを追加します。
6) 基本から「一時停止（ミリ秒）100」ブロックを追加します。
7) 「赤色に点灯する」ブロックを追加し、消灯するために色をblackに変更します。
8) 再度、基本から「一時停止（ミリ秒）100」ブロックを追加します。
9) 作成したプログラムをmicro:bitに書き込みます。
12126

2020/11/1【例3】（rei-3）

ここをクリックすると、好きな色に変えることができる

13

13【例4】フルカラーの色から好きな色を選んで点滅させよう（rei-4）＜手順＞
例3のプログラム名をrei-4に変えて、赤色をRGB(赤、緑、青)に変えます。

※Neopixelのその他ブロックからを選び、赤の所に入れます。
そして、RGBそれぞれを0～255の数字に変えるとフルカラーで表示させることができます。

14147

2020/11/1

コラム：光の三原色(フルカラー)の原理
赤緑

青

256色× 256色× 256色
＝16777216色≒1677万色
10進数⇔16進数
０～２５５ ⇔ ００～FF
1515

原色大辞典 https://www.colordic.org/

16

168

2020/11/1【コラム：ブロックプログラムにおける16進数の扱いについて】

16進数であることを示す０ｘを先頭につける
０ｘｆｆ

０ｘｆｆ

０ｘ００

自動的に10進数になる

1717

これで実習１は終了です。
次は 実習２です18189

2020/11/1

micro:bitによるフルカラーLEDの制御
内容:シミュレータを使ったプログラミング実習
担当：稲川孝司（帝塚山学院大学）

実習２ 例５～例８
1919【コラム：LEDの番号の割り当てについて】
NeoPixelは、順番にLEDを点灯させるために、それぞれに番号が割り当てられています。
8個のバー型の場合は、右図のように、信号線に近いほうから順に０から7が割り当てられています。
個別に色を設定して点灯する方法は、で番号を指定し、ｎ番目のLEDを好きな色で点灯させることができます。
また、

０１２３４５６で、点灯しているLEDを下にずらすことができます。

７2020102020/11/1【例5】8個のLEDを個別に好きな色に指定して光らせてみよう。(rei-5）＜手順＞
1) ファイル名を「rei-5」と入力します。
2) 「最初だけ」の中に「変数をNeoPixelモードにする」ブロックを入れます。
3) 今回のNeoPixelの数は8個なので、ブロック内の24を8に変更します。
4) NeoPixelの「その他」ブロックから「stripの０番目のLEDを赤色に設定する」ブロックを入れます。
5)「設定」ブロックを右クリックして複製し、8個の「設定」ブロックを作成します。
6) 設定する番号を０から7の順に変更し、色は好きな色に変更します。
7) 最後に「stripを設定した色で点灯する」ブロックを入れます。
8) 作成したプログラムをmicro:bitに書き込みます。

21

21【例5】（rei-5）

複製する

22

22

11

2020/11/1【例6】「1個分ずらす」ブロックを使って、緑のLEDを下へ移動させてみよう。 （rei-6）＜手順＞
１）ファイル名を「rei-6」と入力します。
２）「最初だけ」中に「変数をNeoPixelモードにする」ブロックを入れます。
３）今回のNeoPixelの数は8個なので、ブロック内の24を8に変更します。
------------------------------------４）「ずっと」の中に、NeoPixelの「その他」ブロックから「０番目のLEDの色を設定する」ブロックを入れます。
５）ループから「くりかえし」ブロックを入れ、回数を8回に設定します。
６）「くりかえし」の中に、NeoPixelから「指定した色で点灯する」ブロックを入れます。
７）さらに、基本から「一時停止(ミリ秒)100」ブロックを入れます。
８）そのブロックの下に、NeoPixelから「色をLED1個分ずらす」ブロックを入れます。
2323【例6】（rei-6）

０１２３４５６７242412

2020/11/1【例6別解】「ループ」からの繰り返しのブロックと変数を使って、例6と同じ動きをするプログラムを作成してみよう。（rei-6b）※最初だけブロックは省略している

25

25【例7】１つだけLEDを点灯させて、上移動させてみよう。(rei-7)(※例6において、7番目から順に０番目まで点灯するように、次の2か所を修正すればよい。) ※最初だけブロックは省略している

変更箇所

０１２３４５６７262613

2020/11/1【例7別解】例6別解を利用して、繰り返しブロックの変数を0➡7ではなく、7➡0の順に変化させて、上移動で点灯させてみよう。(rei-7b)※最初だけブロックは省略している

変更箇所

2727

【コラム：加速度センサについて】
micro:bitには、加速度センサが搭載されており、図のようにx,y,zの３方向の加速度を計測することができます。
地上では下向きの重力加速度があるので、それを計測してmicro:bitを3次元的に動かすと値を変化させることができます。
また、傾きや、振動、衝撃なども検知することができます。

Z軸
Y軸

X軸

2828142020/11/1【例8】micro:bitを傾けて、搭載されている加速度センサの３つの値を読み込んでRGBの3つの色に対応したLEDを点灯させ、micro:bitを動かして色を変えてみよう。（rei-8）＜手順＞
1) 「最初だけ」の中に「変数をNeoPixelモードにする」ブロックを入れます。
------------------------------------2) 「ずっと」の中に、NeoPixelのその他から「stripの０番目を赤色にする」ブロックを入れます。
3) 赤の部分を、NeoPixelのその他から「RGB(赤255、緑255、青255)」に置き換えます。
4) 数値の３つの255の部分を入力ブロックの加速度X、加速度Y,加速度Zに置き換えます。
5) Neopixelから「Stripを指定した色で点灯する」ブロックを入れます。
6) 基本から「一時停止(ミリ秒）100」ブロックを入れます。
7) Neopixelから「stripに設定されている色を1個分ずらす」ブロックを入れます。
2929【例８】（rei-8）

Z軸

Y軸

X軸
3030

15

2020/11/1

これで実習２は終了です。
次は 実習3です3131

micro:bitによるフルカラーLEDの制御
内容:シミュレータを使ったプログラミング実習
担当：稲川孝司（帝塚山学院大学）

実習３ 例９～演習3
32

32

16

2020/11/1【例9】レインボーパターンで光らせてみよう。(rei-9）

NeoPixelのライブラリの中に「レインボーパターンで点灯する」という命令があり、それを使うと虹色で光らせることができます。
＜手順＞
1) 「最初だけ」の中に「変数をNeoPixelモードにする」ブロックを入れます。
2) 今回のNeoPixelの数は8個なので、ブロック内の24を8に変更します。
3) 次に「Stripをレインボーパターンに点灯する」ブロックを入れます。

33

33【例10】レインボーパターンで色を下に移動させよう。(rei-10）
例9ではレインボーパターンの色が固定されていたので、「ずっと」ブロックの中に「1個分ずらす」ブロックを追加して、色を順番に下に移動してみよう。
＜手順＞
1) 「最初だけ」のブロックは、【例9】をそのまま使います。
2) 「ずっと」の中に、NeoPixelから「LED1個分ずらす（ひとまわり）」ブロックと「設定した色で点灯する」ブロックを入れます。
3) 基本から「一時停止（ミリ秒）100」ブロックを入れます。

34

34

17

2020/11/1【例11】レインボーパターンで色を上に移動させよう。(rei-11）＜手順＞例10のレインボーパタンを上に移動するように変更します。
1) 「最初だけ」ブロックは、例10をそのまま使います。
2) 「ずっと」ブロックの中の「LED１個分ずらす（ひとまわり）」の１をー１に変更します。

変更箇所

3535

【演習1】２つのNeoPixelを使って、１つは下向きに、もう1つは上向きにレインボーパターンで移動させよう。(en-1）＜手順＞
1) 1つ目のNeoPixelの信号線はP0端子に、２つ目のNeoPixelの信号線はP1端子に接続します。
2) ブロックは、例10を基本的にそのまま使います。
3) 「変数」ブロックの「変数を追加する」をクリッ
クし、変数strip2を作ります。
4) 「最初だけ」ブロックの中の2つの命令をコピーし、変数stripを変数strip2に変更します。
5) strip2に接続している端子をP1に変更します。
------------------------------------6)「ずっと」ブロックの中の2つの命令をコピーし、変数stripを変数strip2に変更します。
7) ずらすブロックの数字を１つは１に、もう1つは-1に変更します。
3618

2020/11/1【演習1】 (en-1）

追加
変更

追加
変更

変更

37

2つ目を端子P2に接続

2つ目をP1,３つ目をP2に接続

38

38

19

2020/11/1【演習2】microbitのセンサの傾き(ピッチ)を使って、前後に傾けて、前傾の時はレインボーカラーを下向きに、後傾の時はレインボーカラーを上向きにNeoPixelを光らせてみよう。（en-2）

3939【演習3】今まで学んだプログラムを組み合わせて、好きなパタ－ンでNeoPixelを光らせてみよう。（en-3）

40

40

20

2020/11/1

これで実習３は終了です。

4141

プログラムのダウンロードについて＜プログラムに対する注意事項＞
本テキストで利用している例題プログラムは、NPO法人学習開発研究所の下記のWebサイトからダウンロードしてください。
※資料で記載しているプロムラムのファイル名、例えばrei○○は、保存ファイル名では、microbit-rei-○○.hex になっています。
http://www.u-manabi.org/microbit/kensyu/kensyu_sonoda/pro.zip

4221