MIT App Inventorとmicro:bitでBLE通信をやってみた

普段はサーバーエンジニアとして仕事をしていますが、プログラミングを勉強し始めたときにはサーバーサイドをやりたいという考えはなくて、スマホアプリをやってみたいと思って開発を始めていました。

ただ当時の僕にとってはやはり開発が難しくてあっという間に挫折しましたw。

あとは単純に作りたいものがなくて、モチベーションもなかったんですよね…

あれから4年経った今、職業柄ネイティブアプリのサーバーサイドを開発という形でスマホアプリの開発に携わるようになりました。

そこで改めて今回はネイティブアプリの開発の再入門をするべく、MIT App Inventorをやってみたいと思います。

とりあえずチュートリアルやってみた

公式のチュートリアルでは、ボタンを押したら予め用意した音源を再生するアプリや、入力した文字を読み上げるアプリが用意されており、どちらもチュートリアルどおりに簡単に試せました!

これらのチュートリアルは、以下のリンクで試すことができます。(上記ツイートのアプリはどちらもチュートリアルの内容からアレンジを入れたものです)

appinventor.mit.edu

BLEやってみたい!

とりあえずチュートリアルをいくつかやってみて思ったこととしては、めちゃめちゃ簡単にアプリを作ることができました!

何よりNoCodeでスマホのセンサー、アクチュエータも使えるので作れるアプリのバリエーションも豊富なのがいいですね。

その中にはどうやらBluetoothも使えるようになっており、さらに拡張機能を用意すればBLE通信もできるようです。

ということは、今までネイティブアプリでやってみたかったBLE通信ができるようになるってことですね。

それもノンコーディングで!

というわけで今回の本題である、App Inventorを使ったBLE通信を試してみたいと思います。

そしてせっかくなのでマイコン側もノンコーディングでBLE通信のプログラムをやってみたいと思ったので、micro:bitを使ってみたいと思います。(使用するmicro:bitはV2ではない旧モデルです)

拡張機能のインストール

App InventorでのIoTにまつわるドキュメントは以下のものが見つかりました。

iot.appinventor.mit.edu

そして、運良くmicro:bitを使ったドキュメントも見つかったのでこれを参考にやってみます。

http://iot.appinventor.mit.edu/assets/howtos/MIT_App_Inventor_Microbit_LED.pdf

まずは以下のページの上部にあるBLEの拡張機能のダウンロードします。

iot.appinventor.mit.edu

続いて以下のページの上部にあるmicro:bit拡張機能をダウンロードします。

iot.appinventor.mit.edu

App Inventorで新規のプロジェクトを作成し、Extensionをクリックし、Import extensionから先程インストールした拡張機能を読み込みます。

f:id:KMiura:20210308232421p:plain

アプリのレイアウト

必要な拡張機能を読み込んだところでアプリを作っていきましょう。

今回はBLEで接続したmicro:bitのLEDマトリックスをボタン操作で表示を切り替えるアプリを作っていきます。

f:id:KMiura:20210309213828p:plain

導入したコンポーネントとしてBLEデバイスの認識、デバイスの接続をするためのボタンを上部に配置しています。

ボタンを押したときのステータスをテキストで表示するようにしています。

また、認識したデバイス情報を一覧で出力できるようにリストビューを入れています。

また、ペアリングしたデバイスの操作をするためのボタンも用意しました。

あとは、今回導入した拡張機能の中のBluetoot LEMicrobit_Ledをそれぞれアプリビューに追加します。

この2つはアプリ上には表示されませんがアプリに必要な機能としてスマホ画面の下に表示されます。

また、Microbit_LedについてBLEデバイスとの紐付けを行います。

これによりmicro:bitをBLEで操作できるようになります。

アプリのプログラム

続いてアプリのプログラムを作成します。

プログラムの大枠は以下の画像のようになります。

f:id:KMiura:20210309221134p:plain

上記のプログラムの中にあるcall SmileFacecheckについては以下のブロックを組んだ上で呼び出すブロックになります。

このブロックはmicro:bitマトリックスLEDで描画する図を文字列で指定してそれをマイクロビットに送信するための配列に変換します。

f:id:KMiura:20210309221453p:plain

micro:bitのプログラム

micro:bitは以下のプログラムになります。

今回のアプリであれば最低限LEDサービスが定義出ていればOKです。

ついでにデバイス側でペアリングしたことがわかるようにしてみました。

動作確認

実際に動作確認です。

BLEは機種依存があるので実機で確認する必要があります。

App InventorのコンパニオンアプリをAndroid端末にダウンロードしたらQRとかで読み込んで接続すれば確認できます。

アプリの動作は以下の動画のようになります。

Scanボタンで接続するデバイスを選択して接続できたら、ボタンが2種類表示されてLEDの表示が切り替わります。

まとめ

今回はApp Inventorでmicro:bitとBLE通信をやってみました。

ネイティブアプリを挫折してた人間でも簡単にアプリを作ることができて、しかもBLEまであっという間にできてしまうのは時代の進歩を感じますね(App Inventorはだいぶ前からあるっぽいですがw)。

何よりmicro:bit拡張機能でUUIDとかを考えずにBLE通信ができるのが便利で、アプリもハードもノンコーディングでシステム構築できてしまいました。