創って学ぼうプログラミング(3) JavaScriptでグラフが表示される照度計を作ろう micro:bit編

照度センサーとは

　マイクロビットには明るさを調べる照度センサーがあります。照度センサーはLEDを利用して計測しています。明るさの変化を確認したい場合はLEDの上に手をかざしたりライトをあててください。　今回はこの照度センサーの値をリアルタイムにスクロールする棒グラフで表示してみます。

LEDに照度を表示する

　最初に明るさをLEDに表示するプログラムを作成します。開発のためのページを開きます。新規プロジェクトを作成して下さい。

・JavaScript用のブロックエディタ
https://makecode.microbit.org/

新規プロジェクトを作成すると図のような状態になります。

新規プロジェクトの作成

明るさは入力のカテゴリにあります。「入力」のカテゴリをクリックして表示される「明るさ」のブロックをクリックします。ブロックをクリックすると、ブロックが追加されます。ただし、「明るさ」ブロックは単体では使用できないためグレーで表示されます。

「入力」カテゴリから「明るさ」ブロックをクリック

「明るさ」ブロックが表示される

照度データを表示するにはLEDに数値として出力する必要があります。「基本」カテゴリにある「数を表示」ブロックを使えば数値をLEDに表示させることができます。ブロックを配置したら、図のように組み合わせていきます。

「基本」カテゴリから「数」を表示ブロックをクリック

「数を表示」ブロックが表示されるので

図のように「ずっと」ブロックにあてはめる

これで完成です。ダウンロードボタンをクリックしてHEXファイルを作成します。あとは作成されたHEXファイルをマイクロビットに転送します。しばらくするとプログラムが起動して明るさの数値が表示されます。なお、明るさは0〜255までの値になります。

LED部に光をあてると光の強さが数字で表示される

標準のブロックを使って棒グラフで表示する

　明るさが表示されたら次にグラフで表示してみます。マイクロビットには標準のブロックで値を棒グラフ表示してくれるものがあります。

「LED」カテゴリにある「棒グラフを表示する」ブロック

　このブロックを使って明るさを表示します。以下の図のようにブロックを組み合わせます。棒グラフブロックの最大値は255に設定してください。

「LED」カテゴリをクリックし、「棒グラフを表示する」ブロックをクリックする

表示される「棒グラフを表示する」ブロックを「ずっと」ブロックにあてはめる

「入力」カテゴリから「明るさ」ブロックをクリックし、「棒グラフを表示する」ブロックの値にあてはめ、最大値を255に設定する

これで完成です。ダウンロードボタンをクリックしてHEXファイルを作成します。あとは作成されたHEXファイルをマイクロビットに転送します。しばらくするとプログラムが起動して、明るさが棒グラフで表示されます。

スクロールする棒グラフを作成する

　さきほど作成したプログラムですが、多分想像していたものと違うと思った人もいるのではないでしょうか。明るさが棒グラフで表示されリアルタイムにスクロールしていくものを想像していた人も多いかも知れません。そこで、明るさがリアルタイムに棒グラフで表示されスクロールするように作成します。
　プログラムの流れは以下のようになります。

（１）端に明るさを示す棒グラフを表示する
（２）LEDが表示されているかどうか調べて1つずつずらす

　仕組みは簡単なので、あとはブロックを組み合わせていきます。まず、（１）の部分を作成します。図のようにブロックを組み合わせます。64で割り算していますが、これだとかなり明るくしないと5つまでLEDが点灯しません。この場合、51など数値を減らして調整してみてください。

図のようにブロックを組み合わせます

　この段階でマイクロビットにプログラムを転送して動作を確認してみます。LED上に手をかざしたりライトをあてるとLEDの表示数が変わります。

端に明るさを示す棒としてLEDが表示される

　あとは表示されたLEDの内容をスクロールさせます。マイクロビットのLEDは5×5サイズです。座標値としては(0,0)-(4,4)になります。マイクロビットはLEDが点灯しているか消灯しているかを調べることができるので、これを利用してLEDの内容をスクロールさせます。もし、この機能がないと配列にデータを用意して処理することになります。
　ブロックは以下のように組み合わせます。少し複雑なので間違えないように組み合わせてください。なお、変数X,Yは変数のカテゴリをクリックすると「変数を追加する」というボタンがあるので、そこでXとYの変数を追加してください。

　どうしてもブロックでは手間がかかるし、性に合わない方はJavaScriptエディタにして以下のプログラムを入力してください。

 let 変数 = 0
 let カウンター = 0
 basic.forever(() => {
     for (let カウンター = 0; カウンター <= 4; カウンター++) {
         led.unplot(0, カウンター)
     }
     for (let カウンター = 0; カウンター <= input.lightLevel() / 64; カウンター++) {
         led.plot(0, カウンター)
     }
     basic.pause(1000)
     for (let Y = 0; Y <= 4; Y++) {
         for (let X = 0; X <= 3; X++) {
             変数 = 3 - X
             if (led.point(変数, Y)) {
                 led.plot(変数 + 1, Y)
             } else {
                 led.unplot(変数 + 1, Y)
             }
         }
     }
 })

　完成したらダウンロードボタンをクリックしてHEXファイルを作成しマイクロビットに転送します。明るさの変化が棒グラフで表示され1秒ごとにスクロールしていきます。

　1秒ごとではなく、もっと速くスクロールするように改良してみるとよいでしょう。明るさ以外の値、例えば温度などを棒グラフとして表示してみるのもよいのではないでしょうか。