micro:bitをRubyでブラウザだけでプログラミングするプログラミング環境「rbCanvas」の紹介

この記事は「[micro:bit Advent Calendar 2021 - Qiita](https://qiita.com/advent-calendar/2021/microbit)」の2日目の記事です。

rbCanvas
https://rbcanvas.net/
<img width="600" alt="rbcanvas_home.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2a17e27c-a998-43a1-88a4-a85b569d16b8.png">
（[rbCanvas公式ページ](https://rbcanvas.net/index.html) より）


## 1. はじめに
micro:bitを使えるプログラミング言語としては、今までブロック（MakeCode、Scratch3、Smalruby3）、JavaScript（MakeCode）、Python（MakeCode、MicroPython）C/ C++、Swift（Swift Playgrounds）などがありました。

そこに、昨年の公開された「[rbbit](https://spoolkitamura.github.io/rbbit/index.html)」でRubyが加わりましたが、今回大幅にパワーアップして「[rbCanvas](https://rbcanvas.net/index.html)」になりました。

rbCanvasのブラウザだけで完結するRubyプログラミング環境によって、ブロックによるプログラミングから、テキストによるプログラミングに比較的簡単にステップアップできます。
また、Ruby on Railsなどで幅広く使われているRubyの初心者向けの学習ツールとして、micro:bitを使うことはとても有効だと考えています。



## 2. rbCanvas とは
Rubyでmicro:bitを使えるようにするブラウザベースのプログラミング用ツールです。

### 特徴
- ブラウザとインターネット環境だけで動作
- パソコンにインストール不要（Rubyのインストールも不要）
- 無線（Bluetooth）接続
- エディタ付属
- 2Dゲームライブラリ付属（DXRuby相当） ※

仕組みとしては、micro:bitとパソコン（PC）をBluetoothで接続し、お互い無線通信することでPCからmicro:bitに制御命令を送ったり、micro:bitからセンサーなどの情報をPCに送ることで、お互いのやりとりを可能にします。

これは、MakeCodeのようにmicro:bitにプログラムを転送して実行させる方式ではなく、Scratchで実行時にコマンドをScratch Linkによって送受信するイメージに近いです。
<br>

※ rbCanvasのゲームライブラリ機能については、下記の記事を参照ください。
→・[インストール不要！ブラウザだけではじめるRubyゲームプログラミング環境「rbCanvas」の紹介（DXRubyスタイル） - Qiita](https://qiita.com/noanoa07/items/bfbf3b45989c8889a868)


## 3. できること
### 対応
- LEDの点灯（階調表示可）、消灯、文字の表示
- スピーカー出力
- センサーの値の取得（加速度、傾き、明るさ、温度）、およびブラウザでの表示
- ボタン、タッチセンサーの状態の取得
- Bluetooth無線通信


### 未対応
- 磁気センサー
- P0など入出力端子
- マイク

現状でも、micro:bitのほとんどの機能が使えるようになっています。

### その他
- 2Dゲームライブラリ（DXRuby相当）との併用可（ブラウザ上）
- ユーザインターフェース（UI）用のパーツとの併用可（ブラウザ上）
- マウス、キーボードによる入力取得可



## 4. 参考サイト
- rbCanvas公式ページ

https://rbcanvas.net/index.html

## 5. 動作環境
### A. 対応PC OS
- Windows
- macOS
- Linux

※ BLE(Bluetooth Low Energy)に対応したBluetooth 4.0以上が必要
※ Rubyのインストール不要


### B. 対応ブラウザ
- Google Chrome
- Microsoft Edge

（Web Bluetooth機能必須）


### C. 対応micro:bit
- micro:bit v2 のみ

（micro:bitには、専用プログラムを書き込んで使用）


### D. 接続
- Bluetoothによる無線接続

（BLE(Bluetooth Low Energy)対応 Bluetooth 4.0）

※ 最初に専用プログラムを書き込むためにUSBケーブル接続が必要


## 6. 準備
### micro:bitへ専用プログラムの書き込み
[micro:bitを使う前の準備](https://rbcanvas.net/site/about_microbit.html) を見ながら実行します。

micro:bitに、rbCanva用のBluetooth通信を解釈する専用プログラムをあらかじめ書き込みます。

#### 1) [rbCanvasのページ](https://www.rbcanvas.net/site/about_microbit.html) から、専用プログラムをPCにダウンロードします。

#### 2) ダウンロードしたプログラムをmicro:bitに書き込みます。（ここのみUSBケーブル接続）

#### 3) micro:bitのLEDが以下のように点灯すると、正しく書き込めています。

<img width="200" alt="mb_init.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/25577f15-2487-d92e-69e1-a77d842e4a33.png">
（[rbCanvas公式ページ](https://rbcanvas.net/index.html) より）


## 7. rbCanvasを使ってみる
### A) サンプルプログラムの実行

#### A-1) [rbCanvas](https://www.rbcanvas.net/index.html) のサンプルプログラムのページを開きます。
<img width="600" alt="rbcanvas_sample.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9d15d36f-88bf-d804-7603-8cc192f1002b.png">

#### A-2) 実行させたいサンプルのサムネイル（画像）かタイトルをクリックします。

#### A-3) micro:bitとBluetooth接続をするためのウィンドウが開きます。
<img width="250" alt="rbcanvas_connect.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d2d7f868-7fcf-4e0b-8b33-6c665078931b.png">

#### A-4) 「選択」を押すと、micro:bitとペアリングするパネルが開きます。
<img width="300" alt="rbcanvas_paring.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e0bb0cc4-6baa-05ff-b569-36dc95295b69.png">


##### ※ パネルが開かず次へ進めない場合は、https接続になっているかの確認、あるいはブラウザのキャッシュを削除してブラウザを再起動するといいようです。

#### A-5) プログラムが実行されます。

### B) エディタを使ったプログラムの作成と実行

#### B-1) [rbCanvas](https://www.rbcanvas.net/index.html) のページの「rbCanvas editor」をクリックします。

#### B-2) rbCanvas editor のウィンドウが開きます。

<img width="6000" alt="rbcanvas_editor.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/fe63d96b-105c-5e61-5b66-5b0b4f9b670e.png">

※ あらかじめ記入されているプログラムは、micro:bitでは使わないので全て削除して構いません。


#### B-3) プログラムを書く

・サンプルプログラム「ハートの点滅」

```ruby
mb = Microbit.new

heart = [
  '01010',
  '11111',
  '11111',
  '01110',
  '00100'
]

mb.connect do
  i = 0
  while i < 5
    mb.led_show(heart)
    sleep 0.5
    mb.led_off
    sleep 0.5
    i += 1
  end
end
```


ちなみに、サンプルプログラムのタイトルをエディタウィンドウにドラッグすると、エディタにコードが読み込まれてプログラムが編集できるようになります。

#### B-4) 実行は、エディタ上部の「▶︎ ボタン」を押します。
実行すると、ハートが5回点滅します。

##### 文法、プログラム例は
マニュアル＞APIリファレンス＞Microbitクラス
で見ることができます。

### C) プログラムの保存
エディタ上部のダウンロードボタンを押します。
<img width="50" alt="1069_dl_h.pngg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/85d25262-afaf-8a0e-f6bc-3425ba4a3984.png">

## 8. 困ったときは
公式ページ＞マニュアル＞よくある質問
が用意されています。

- [よくある質問](https://rbcanvas.net/site/faq.html)



## 9. さいごに
micro:bitをRubyからも扱えるようになり、micro:bitの魅力が一段と増しました。Rubyによるmicro:bitプログラミングは、小学校高学年から中学、高校、大学などでも、プログラミング教育に十分活用できる可能性があると思います。

rbCanvasによって、とても手軽にRubyのプログラミングが始められるようになりました。ぜひ試してみてみてください。