電子工作 その３ ミニワークショップを開催！（micro:bit+スマホ編【後編】）
どうも、Ideagearの鈴木陽介です。
去る2022年5月18日に、浜松いわた信用金庫さんが運営する浜松駅前のメーカーセンター「FUSE」にて、運営の方を対象にお試しとして電子工作のミニワークショップを開催させていただきました。
今回、備忘のためと次回以降のテキストの用途も兼ねて、Zennの記事に残したいと思います。
関連記事は下記からご覧ください。
その１（Arduino+ブレッドボード編）： その２（micro:bit+スマホ編【前編】）：
はじめに
本ワークショップでは、以下の２つの課題に取り組みました。
１．Arduinoとバッテリーを使って、携帯型デバイスのプロトタイプをつくってみる。
２．micro:bitとスマホをBluetoothでつなぎ、micro:bitのセンサーの値をスマホに表示する。
実は、本編でお伝えする内容はワークショップでは実施していませんが、当日は時間が余ることも想定して本編でご紹介する３つの課題も準備しておりました。
前回、micro:bit+スマホ編【前編】では、micro:bit内臓の温度センサーの値をスマホで表示することにチャレンジしました。
本編ではさらに一歩進んで、それをWebブラウザ（課題３）で表示させることやmicro:bitから数字（課題４）や文字列（課題５）をスマホへ送り、それを表示させることにチャレンジしてみましょう！
文字だけだとちょっとイメージしにくいため、写真も交えてもう少し詳しくご説明します。
課題３は、課題２のプログラムをそのまま使い、ブラウザ上で温度を表示するWebページを作成して温度を表示させます。
課題４は、MakeCodeのBluetooth UARTサービスを使って、Arduino IDEのシリアルモニターやnRF ConncectのNordic UART Serviceを使って数字を表示させます。
課題５は、MakeCodeのBluetooth UARTサービス、Bluetooth、スマホアプリのSerial Bluetooth Terminalを使って、micro:bitのボタンを押すことでスマホに文字列を送信し、アプリ上で文字列を表示させます。
参考記事
本編は、秘密結社オープンフォースの河野氏が書かれた下記記事「micro:bitで標準的なBLE動作するテストプログラム」を参考に、細かなところを補足しながら進めたいと思います。
また、ブラウザ上に温度を表示するWebページの作成に関しては、下記記事を参考にさせていただきました。
Web Bluetooth機能で温度を取得する
7-1-3.Webページを作る
micro:bitをパソコンにつなげてみよう！
前回、スマホ上でmicro:bit内臓の温度センサーの温度を表示させることができました。そこで、次のステップとしてスマホをパソコンに変えてチャレンジしてみます。
具体的には、JavaScriptのWeb Bluetooth APIを使ってWEBページを作成します。
JavaScriptでWEBページをつくる
まずは、WEBページをつくります。
ただ、ゼロからJavaScriptでコーディングしましょうというのは、本記事をご覧のほとんどの方にとっては無理ゲーだと思いますのでw、今回は既存のソースコードを拝借します。
パソコン上で、テキストドキュメント（.txt）を新規作成し、以下のソースコードをコピペした上でテキストデータのまま保存します。
ソースコードは、参考記事でもご紹介した下記にあるソースコードを丸々コピペしてください。
7-1-3.Webページを作る
保存する際のファイル名は何でも構いませんが、ここでは「温度センサー」としておきます。
先程保存したファイルの拡張子を「.txt」→「.html」へ変更してください。
すると、アイコンがテキストから「Microsoft Edge」や「Google Chrome」などのWebブラウザのアイコンに切り替わりますので、クリックして開きます。
このような画面が表示されれば成功です。
WEBページ上で操作してmicro:bitとつなぎ、温度データを取得する
では、次はmicro:bitとペアリングします。
micro:bitをパソコンに接続した状態で、「micro:bitと接続する」をクリックします。
すると、ポップアップが表示されます。
ここで一定時間何もしないと接続に失敗してしまいます。
改めて、「BBC micro:bit」を選択して、ペアリングをクリックします。
接続しました。
と、表示されたらペアリング成功です。
その後、すぐに上図のように温度が表示されます。
micro:bitを置く場所を変えて温度が変化するかぜひ試してみてください。
micro:bitから発信した数字を端末で確認する
次は、MakeCodeの「Bluetooth UARTサービス」を使って、micro:bitから数字を発信してみましょう！
ブロックは下図のように配置してください。
＜補足＞
「シリアル通信1行書き出す」等に埋め込まれている赤い楕円形の部分は、変数にある変数だけのブロックをそのまま埋め込んでください。
Arduino IDEでmicro:bitから発信された数字をモニタリング
続いて、Arduino IDEを起動します。
ツール > シリアルモニタ
プログラムや通信に特に問題がなければ、「前の値+1」の数字が1秒ごとに表示されます。
注意点は、右下のデータ転送レートの単位を115200bps（ビット毎秒）に変更してください。
変更しない場合は、不安定だったり、文字化けしたりします。
Arduino IDEのデフォルトでは9600bpsになっています。
MakeCodeでBluetooth UARTサービスを設定する
まず、先ほどのブロックプログラムに「Bluetooth UARTサービス」と「bluetooth uart writh line " "」を追加します。
上図のように、両方のブロック共にBluetoothの「その他」の中にあります。
ブロックは下図のように配置してください。
＜補足＞
「最初だけ」に「Bluetooth UARTサービス」を追加するのを忘れないようにしてください。
nRF ConnectのNordic UART Serviceで受信したデータを確認する
先ほどのプログラムをmicro:bitに書き込んだら、再びnRF Connectを開きます。
「micro:bit Event Service」の下にある「Nordic UART Service」をタップします。
もし一番下に出てこない場合は画面が見切れている可能性もあるので、下にスクロールしてみてください。
展開された中の一番上、「RX Characteristic」の右端にある「↓↑」をタップします。
「Value」のところに文字列として変換された数字が表示されます。
1秒ごとに1つずつ増えていれば成功です。
＜補足＞
なお、トラブルシューティングの例として、何度やっても「micro:bit Event Service」の下にある「Nordic UART Service」が出てこないことがありました。
MakeCodeのConnect deviceで調べたところ、下記のように複数のmicro:bitを検出しました。
ところが、下記写真のとおり、パソコンのUSBポートから一つだけに電源供給しているため、複数が同時に動くことはありえません。
いずれにせよ、MakeCodeなりPCなりの不具合と判断し、パソコンを再起動してやり直したところ、無事「Nordic UART Service」が出てきました。
Bluetooth自体がやや不安定なところもありますが、無線通信関係は、ノイズや電波干渉などの影響を受けやすくトラブルが発生しやすいです。もし上手くいかない場合は、面倒ですが関連機器のリセットや再起動などを試してください。
micro:bitのボタンを押したら文字列を発信するように設定する
最後に、micro:bitを操作し、Bluetoothを通して文字列を発信し、スマホでそれを受信して表示する。というやや高度なことにチャレンジします。文字で書くと難しそうですが、実際はカンタンです。
ブロックは下図のように配置してください。
Serial Bluetooth Terinalをインストールする
Google Playストアで「Serial Bluetooth Terinal」を探してダウンロードしてください。
※以下、私のスマホが中国語表記ですのでわかりにくく申し訳ありません。
App Storeでは「Bluetooth Terminal」で検索すると見つかります。
スマホにインストールします。
Serial Bluetooth Terminalを開きます。
Serial Bluetooth Terminalで送受信されたデータを確認する
下記は、アプリを開いた時の初期画面です。
左上の横三本線をタップします。
「Devices」をタップします。
「BBC micro:bit」をタップします。
「Connected」と表示されたら接続完了です。
あとは、micro:bitのAボタンを押すたびに、「BLE UART!」という文字列が送受信されます。
詳細は下記動画をご確認ください。
最後に
いかがでしたでしょうか？
micro:bit+スマホ編【後編】はここまでです。
本編は、実際のワークショップでは時間の関係で割愛しましたが、事前の準備及び本記事を書くにあたって何度もテストしました。
ただ、悲しいかな、いずれもすんなりいきませんでした。
いやはや、無線通信は思いもがけないトラブルが発生しますね。
けれども、一度できたことが日を改めると上手くいかないということは、トラブルシューティングの知見も含めて、ちゃんと理解できていない証拠でもあります。
電子工作でプロトタイピングする段階はまだお遊びですが、実際に製品化するにあたっては、無線は有線と異なり、いかにして安定的に通信できるか。ということが、大きなファクターを占めることを改めて認識しました。
それはともかく、
電子工作のミニワークショップを開催！その１（Arduino+ブレッドボード編）
電子工作のミニワークショップを開催！その２（micro:bit+スマホ編【前編】）
電子工作のミニワークショップを開催！その３（micro:bit+スマホ編【後編】）
と、長編三部作にお付き合いいただきまして誠にありがとうございます。
では、次回作をお楽しみに！
P.S. ワークショップ後日談
事前のテストでは、パソコンはWindows、スマホはAndroidでしかほぼテストしていなかったのですが、一方で、ワークショップ当日は、Mac OSの人もいましたし、特にスマホはiPhoneユーザーがほとんどでした。このため、Widows＆Androidで事前にうまくできていたことが、当日はほとんどできませんでした。
念のために、私はAndroidスマホを複数持参していため、オフラインの参加者にはそれらを使ってもらうことで事なきを得ましたが、オンラインの参加者に対してはどうしようもありませんでした。
当日は大雨でネットワーク不調だったのも要因の一つかもしれませんが、特に、Micro:bitとiPhone、Make CodeとMac OSの相性があまりよくなかったように感じます。
ということで、時間的に、設備的に事前にすべてをテストするのは難しいですが、今後のワークショップ準備のための反省点として残しておきたいと思います。
Discussion