電子工作 その２ ミニワークショップを開催！（micro:bit+スマホ編【前編】）
こんにちは、Ideagearの鈴木陽介です。
一昨日の2022年5月18日に、浜松いわた信用金庫さんが運営する浜松駅前のメーカーセンター「FUSE」にて、運営の方を対象にお試しとして電子工作のミニワークショップを開催させていただきました。
今回、備忘のためと次回以降のテキストの用途も兼ねて、Zennの記事に残したいと思います。
はじめに
本ワークショップでは、以下の２つの課題に取り組みました。
１．Arduinoとバッテリーを使って、携帯型デバイスのプロトタイプをつくってみる。
２．micro:bitとスマホをBluetoothでつなぎ、micro:bitのセンサーの値をスマホに表示する。
文字だけだとちょっとイメージしにくいため、写真も交えてもう少し詳しくご説明します。
課題１は、Arduino IDEでコーディングし、Arduinoとバッテリーの他、ブレッドボード、LED、抵抗、ブザー、スイッチを使用します。
※詳細は「その１（Arduino+ブレッドボード編）」をご覧ください
課題２は、MicrosoftのMakeCodeでプログラミングし、スマホアプリのnRF Conncectを使ってBluetoothでmicro:bitとスマホをつなぎ、micro:bit内臓の温度センサーで測った値をスマホで見られるようにします。
参考記事
本編は、秘密結社オープンフォースの河野氏が書かれた下記記事「micro:bitで標準的なBLE動作するテストプログラム」を参考に、細かなところを補足しながら進めたいと思います。
micro:bitをスマホとつなげてみよう！
micro:bitをプログラミングするにあたっては、Arduinoのように汎用のアプリをパソコンにインストールするのではなく、MakeCodeというWebブラウザ上でコーディングができる便利なツールを使用します。日本語版のトップページは下記です。
MakeCodeを開く
MakeCodeは、Microsoft社が提供しているブロックプログラミングの開発環境です。
先程のURLをクリックすると、下図のような画面が出ます。
今回は、micro:bitを使うため、一番左の「micro:bitでプログラミングを始める」をクリックします。
新しいプロジェクトをクリックします。
任意のプロジェクト名を入力しましょう。
まずは、micro:bitの温度センサーを使うので、今回は「温度センサー」という名前にしました。
MakeCodeの初期画面はこのようになっています。
なお、先ほどつけた名前は、画面中央下部の窓に目立たないように表示されています。
この窓で直接名前を変えることも可能です。
拡張機能でBluetoothを追加する
残念ながら、MakeCodeの初期画面ではBluetoothのブロックを使えるようにななっていません。
面倒ですが自分で追加する必要があります。
高度なブロック > 拡張機能 と進めます。
こちらが拡張機能の初期画面です。
ただ、ここでも残念ながら画面をスクロールしてもBluetoothが出てきません。
検索窓で「bluetooth」と検索するとようやく出てきます。
bluetoothをクリックします。
「拡張機能が削除されます」と書かれた窓がでてきますが、要は、bluetoothを使うとradioが使えなくなりますがいいですか？と聞いてきています。今回はraidoは使いませんので、「一部の拡張機能を削除してbluetoothを追加する」をクリックします。
使用可能なブロック欄に「Bluetooth」が無事追加されました。
ブロックを使ってコーディングする
今回はMakeCodeを使ってプログラミングしますが、このMakeCodeの優れた点は主に2つあると思っています。
１．アプリはインストール不要で、ブラウザ上で動作します。つまり、ネットにつながっていればどこでも使え、データも共有されます。
２．難しいプログラミング言語を覚えることなく、人間が理解できる自然言語で書かれたブロックを組み合わせることでコーディングができます。各ブロックはジャンルごとに色が分かれ、また個別のブロックで形状が異なることで、形が合わない（＝プログラム上不自然）ブロック同士が結合することはありません。
※micro:bitのプログラムはJavaScriptでコーディングされています。
つまり、プログラミング未経験者、初心者、子供でも比較的カンタンにプログラミング体験ができるのが特徴です。遊びながらプログラミングを学習するという意味では、Arduinoよりもmicro:bitの方が優れています。
では、前置きはこれくらいにして、実際のプログラミングを見ていきましょう。
micro:bitの温度センサー用のブロックを使ってコーディングする
Bluetoothのブロックを中心に組み立てていきましょう。
下図のとおり組み立ててください。
ブロックの色でだいたい予想ができると思いますが、「Bluetooth」と「基本」は色に大差ないのでご注意ください。
ちなみに、上部の「ブロック」→「JavaScript」に切り替えると下図のようなソースコードを見ることができます。
つまり、ブロックには人間の言語（もちろん、日本語だけでなく、英語や中国語など他の言語のバージョンもあります）で書かれており、それらを組み合わせてプログラミングしていても、実際はJavaScriptというプログラミング言語によってこのように記述されているということです。
話を戻します。
次に、micro:bitに書き込む前に、Bluetoothのペアリングの設定を変更します。
右上の歯車 > プロジェクト設定をクリックします。
デフォルトでは、「JustWorks pairing(default):Pairing is automatic once the pairing is initiated.」（JustWorksペアリング（デフォルト）：ペアリングが開始されると、ペアリングは自動的に行われます。）
となっていますが、この設定を下記に変更します。
「No Pairing Required: Anyone can connect via Bluetooth.」（ペアリングは不要：誰でもBluetooth経由で接続できます。）
注意点は、新しいプロジェクトをつくる場合、この設定もデフォルトになっていますので、Bluetoothを使う場合は面倒ですが毎回ここを変更する必要があります。
micro:bitをパソコンに接続する
では、micro:bitをパソコンと接続します。
使うケーブルは、USB Type-A（パソコン）⇌ microUSB（micro:bit）変換ケーブルです。
続いて、MakeCode上でも接続設定します。
ダウンロードボタン右の「…」をクリックし、「Connect device」をクリックします。
（右上の歯車マークをクリックしても「Connect device」を選べます。）
すると、自動的にフォルダが開いて、micro:bit内に格納されているデータが表示されますが、これは無視してください。
画面にしたがって、次へ。
画面にしたがって、次へ。
すると、ポップアップが表示されます。
「BBC micro:bit CMSIS-DAP」を選択して、接続をクリックします。
ちなみに、一定時間内に接続しないと、
このように接続に失敗した旨のアナウンスがあります。
改めて、接続しなおします。
完了をクリックします。
確認として、もう一度、ダウンロードボタン右の「…」にマウスポインタを合わせると、「micro:bitに接続しています」と、表示されます。
micro:bitにプログラムを書き込む
実は、MakeCodeには書き込みボタンがありません。
ダウンロードボタンを使用してmicro:bitに書き込みます。
ところが、厄介なことにダウンロードと書かれている箇所が2つあります。
一つ目は、ダウンロードボタン右の「…」をクリックすると出てくる「Download as file」で、二つ目は、ダウンロードボタンです。
結論から言えば、⓵はパソコンにプログラムデータを保存することで、⓶がmicro:bitへの書き込みです。⓵をクリックすると、hexファイルがパソコンに保存されます。
⓶のダウンロードボタンをクリックしてmicro:bitへデータを書き込みます。
「Downloaded」と、表示されたら書き込み完了です。
但し、先ほどの「Download as file」でhexファイルをパソコンに保存していない場合は、続いて上記画面が表示されますが、こちらも完了をクリックして終わらせてください。
スマホにnRF Connectをインストールする
今回の課題は、スマホにインストールされた「nRF Connect」というスマホアプリを使ってBluetoothを通してmicro:bitとつなぎ、micro:bit内臓の温度センサーの値をnRF Connectに表示することでスマホ上でも見られるようにする。というコンセプトです。
ということで、micro:bit側の準備は完了しましたので、まずはnRF Connectをダウンロードします。
※以下、私のスマホが中国語表記ですのでわかりにくく申し訳ありません。
Android版は、スマホ内のGoogle Playストアで検索し、「nRF Connect for Mobile」をダウンロードしてください。
iOS版は、App Storeで同じく「nRF Connect for Mobile｝をダウンロードしてください。
ただ、Android版がGoogle Playストアで見つからい場合は、WEB上の検索サイトからでも発見することができます。
同じく、iOS版がApp Storeで見つからない場合は、WEB上の検索サイトからでも発見することができます。
アプリをダウンロードします。
インストールが完了したらnRF Connectを起動します。
こちらは最初に起動した時に表示される画面です。
アプリの説明が何画面にも渡って表示されますので、スクロールして飛ばしてください。
すると、この画面になります。
次回以降は起動するとこの画面になります。
この「No filter」と書かれているところに「BBC micro:bit」を表示させる必要があります。
ただ、このままだと右上のSCANを何度押しても出てきませんので、ひと工夫が必要です。
micro:bitのBluetoothマッチングを手動でONする
このタイミングで、micro:bit側で手動で設定する必要があります。
これをやらないと永遠にマッチングできません。
実は、ワークショップ開催前のテストでこれがわからず困っていましたが、深センの同僚が下記解決方法を見つけてくれました。
- 表面のA/B、2つのボタンを同時に押す
- 上記1の状態を保ったまま裏面のRESETボタンを押す
詳細は下記動画をご覧ください。
上記をしてもまだ「BBC micro:bit」が表示されない場合は、nRF Connectを再起動してください。
無事に「BBC micro:bit」が表示されました。
micro:bit内臓の温度センサーの温度をnRF Connectで確認する
「BBC micro:bit」のCONNECTをタップします。
CLIENTの中の「micro:bit Temperature Service」をタップします。
「micro:bit Temperature」が展開されたら、右端の「↓↓↓」をタップします。
すると、Valueのところに温度（気温）が表示されます。
小さすぎて、一瞬あれ？と思うかもしれませんがｗ、これで成功です。
これが、micro:bitの温度センサーが実際に検知している温度（気温）です。
最後に
いかがでしたでしょうか？
micro:bit+スマホ編【前編】はここまでです。
MakeCodeまではカンタンだったけど、micro:bitとスマホをBluetoothでつなぐところから一気に難しくなった。と、思われた方も多いのではないでしょうか？
やはり、通信となると一気にハードルが上がりますね。
実際のワークショップはここまででしたが、実は、尻切れトンボにならないようカリキュラムはもっと用意していました。
せっかくですので、おまけとして、次のmicro:bit+スマホ編【後編】で最後までご紹介します。
Discussion