App Inventorの使い方 その1（自作アプリでBluetooth経由でLEDをON/OFFしてみよう～アプリ編～）

こんにちは、Ideagearの鈴木陽介です。

今回は、App Inventorというブラウザだけでスマホアプリを製作できるとても便利なソフトの使い方をご紹介します。

はじめに

App Inventorは、元々はGoogleが提供しており、その後はマサチューセッツ工科大学(MIT)が引き継いで現在に至ります。このような経緯があることと、現在はバージョン2ということで、正式名称は「MIT App Inventor 2」と呼ばれています。

このソフトは、現状ではAndroidのネイティブアプリにしか対応しておらず、iOS用アプリはつくれません。ただ、以下の3つの特徴があります。

1. ブラウザだけで使える。
2. デザインはドラッグ・アンド・ドロップだけでできる。
3. プログラムはブロックプログラミングだけでできる。

まず、ブラウザだけで使えるという点ですが、たとえば、Arduinoのファームウェア（ハードを動かすためのソフトのこと）をつくるためには、Arduino IDEという統合開発環境をPCに構築（汎用あるいは専用のプログラミングアプリをインストール）する必要がありますし、KiCadもPCにインストールして使うソフトです。

また、Androidのネイティブアプリ製作で最もオーソドックスなのは、Android Studioを使ったKotlin開発環境ですが、これもPCにインストールして構築します。つまり、ブラウザだけでソフト開発できるということは、これらの面倒な事前準備が要らずにいきなり始められるということです。これだけでも十分初心者向けと言えます。

次に、デザインですが、これもカンタンです。
ほとんどの方は、Excelやパワポで図形や文字を駆使して資料をつくったことがあると思いますが、イメージとしてはほぼそれと同じ感覚です。

最後に、一番ストレスを感じるプログラミングですが、これも圧倒的に楽です。
というのもブロックプログラミングが採用されているからです。

ブロックプログラミングとは何ぞや？
と、思われた方は、ぜひ以下の記事をご覧ください。

https://zenn.dev/suzuky/articles/e3bb65954a2d11
https://zenn.dev/suzuky/articles/f23a391e35d461

このように、micro:bitはMakeCodeというブラウザでのブロックプログラミング環境がありますが、それとほぼ同じです。

ブロックプログラミングは、正直、ガチガチのコーディングをやってきた人にとっては初めはとっつきにくいのですが、慣れれば非常に楽です。プログラミングの知識はほとんどいらないため、単にソフトの使い方を覚えるだけで利用できるからです。

特に、「Androidアプリのプロトタイプをサクッとつくりたく、できればBluetoothもカンタンに使える方がいい。」というニーズにはとてもマッチしています。

では、前置きはこれくらいにして、さっそく使ってみましょう！

App Inventorを開く

先程もお伝えしたとおり、このソフトはブラウザ上で使えます。
https://appinventor.mit.edu/

こちらは英語版です。

今回は日本語版を使ってレクチャーしますが、正直、ネットで調べたり、YouTubeの動画で勉強したりする場合は、英語での情報量の方が圧倒的に多いため、英語版を使っているとそのままマネすればできる場合も多いため便利です。よって、プログラミングに慣れていたり、英語は得意な方は最初から英語版を使うことをオススメします。

とは言え、ありがたいことに日本語版も出ていますので使わせてもらいましょう！

まずは、下記から「MIT App Inventor 2 日本語化プロジェクト」のトップページを開いてください。
https://appinventor.tmsoftwareinc.com/

次に、「ここをクリックして日本語でアプリを作りましょう」をクリックしてください。

先程から散々ブラウザだけでいいとお伝えしていますが、元々Googleがリリースしていたサービスということもあり、Googleアカウントだけは必須です。

もし取得されてない方は取得してください。
※Googleアカウントの取得方法はネット上にいくらでもあるのでご自身で調べてください。

ここでは、Googleアカウントを取得済みであることを前提に話を進めます。
「許可する」をクリック。

「利用規約に同意します！」をクリック。

続いて、「プロジェクトを新規作成」をクリック。

このように任意の名前を入力してOKをクリック。

デザイン画面で編集する

こちらが「MIT App Inventor 2」を開くと最初に出てくる画面です。

現状は、右上のメニューにあるとおり、スマホの「デザイン編集」の画面になっています。
また、まだスマホの画面は一つしかないので、デフォルトで「Screen1」となっています。

ここに、ボタンやらラベルやらを配置して画面のデザインをつくっていきます。

では、まずは「ボタン」を配置してみましょう！

一番左にある「パレット」の「ユーザーインターフェース」内にある「ボタン」をクリックし、ドラッグ＆ドロップでScreen1の中に配置してください。

ちなみに、ボタン上の文字を変更したい場合は、当該ボタンをクリックして選択し、その状態のまま右のプロパティ欄を下にスクロールします

すると、「テキスト」という項目がありますので、そこを変更してください。

このように、ボタン×2にラベルとテキストボックスを一つずつ加えて画面デザインをつくりました。

では、次は右上の「ブロック編集」をクリックしてください。

ブロック画面で編集する

続いて、プログラミングに入ります。

こちらが「ブロック編集」のデフォルト画面になります。

以下は、使い方の一例です。

App Inventorはブロックプログラミングを採用しているため、このように左のブロックから必要なブロックをビューアーに引っ張ってきて、ただ単に置いたり、ブロック同士をくっつけたりすることでプログラミングをします。

たとえば、こんな風に組み合わせます。

ボタン1をクリックされた時に、
もしラベル1の文字が「あいうえお」と同じだったら、
ラベル1の背景色をオレンジ色に変える。

というものです。
最初はとっつきにくいですが、慣れるととてもカンタンなことをおわかりいただけると思います。

ここでお気づきの方もいらっしゃると思いますが、ここで使えるブロックは、基本的にデザイン画面で自分がSreen上に配置したコンポーネント（基本ブロックを除く）からしか選べません。

ただ、今回は単なるソフトの使い方に留まらず、「Bluetoothを使えるようになる」というのがポイントですが、いくら探してもBluetoothに関するブロックが見つかりません。

それもそのはず、デザイン画面でBluetoothコンポーネントを配置していないからです。

ということで、一旦デザイン画面に戻ります。

Bluetoothコンポーネントを配置する

Bluetoothに関するコンポーネントはパレットの下の方にある「接続」にあります。

ところが、Bluetoothなんちゃらは2つあるため、どちらを使えばいいか迷いますよね。

この辺の話は詳しく説明すると長くなるので割愛しますが、カンタンに言えば、スマホアプリ側はクライアント、イヤホンなどの端末側がサーバー、というくらいにここでは理解しておいてください。

よって、今回は、「Bluetoothクライアント」を選びます。

で、「Bluetoothクライアント」をパレットからビューアーに移動すると、コンポーネントに追加されます。ところがビューアーには表示されません？どういうことでしょうか？

そこで、ビューアーを下にスクロールすると、「見えないコンポーネント」としてちゃんと見ることができます。

確かに、ボタンやテキストボックスといったスマホ画面で実際に操作するコンポーネントとは違い、「Bluetoothクライアント」は、ただ単にBluetoothを使えるようにしますよ！というだけで、単なる概念です。よって、コンポーネントの一覧に表示されないのも理解できます。

ただ、いかんせん、これをやらないとBluetoothのブロックがが使えないから困ります。

Bluetooth関連のブロックを使う

再びブロック編集の画面に戻ります。

このように、Bluetooth関連のブロックを使えるようになりました。

このように配置してみました。
一応説明すると、

「ボタン1」をクリックしたらBluetooth経由で「1」を送信。
同時に「ラベル1」の文字を「LED点灯中、ご注意を！」に変更。

「ボタン1」をクリックしたらBluetooth経由で「0」を送信。
同時に「ラベル1」の文字を「LED消灯」に変更。

というブロックプログラムになっています。

ところで、なんで電話番号？
と、思うかと思いますが、ここは英語版では「Number」となっています。
なので、単に「番号」と訳せばいいと思うのですが、、、

ちなみに、水色の数学系含めて、番号のブロックだと数字だけしか使えませんが、テキストのブロックだと文字だけではなく数字も使えます。ただ、稀に数字だけでも番号のブロックを使うとエラーになる場合があります。

したがいまして、今回は大丈夫ですが、基本的には数字だろうが文字だろうが、できる限りテキストのブロックを使う方がいいです。私も実際それで何回かハマめられました。

アプリを出力する

ここまでできたら、実際にアプリ化してみましょう！
メニューバー内の「ビルド」をクリックしてください。

すると、

・アンドロイドアプリ(.apk)
・アンドロイドアプリバンドル(.aab)

の2つが出てきまますが、一つ目のapkを選んでください。
aabは何かというと、プログラミングの世界でいうライブラリーのようなものです。
※AAB = Android App Bundleで、ハンドルではなくバンドル。

アプリ生成が始まりました！

ところが、エラーが残っている状態でビルドすると、このようにエラーメッセージが表示されます。

この場合は、ブロック編集画面のビューアーの左下にあるShow Warningsを確認してください。
一つでも×があるとエラーになります。

生成が終わると、このような画面が出てきます。
この画面が出てくれば、少なくともエラーは無かったことになります。

もしブロックプログラムにエラーがある場合はこの完了画面になる前にエラーで止まります。
つまり、このウィンドウが出てきた時点でアプリ出力は成功です！

左のアイコンをクリックするとPCにダウンロードされます。

右のQRコードをスキャンすると、スマホにそのままダウンロードできるか、擬似的にスマホ上で直接動作確認ができるようですが、私のAndroidスマホが中国で買ったネイティブ中華スマホばかりだからなのかw、何度スキャンしても白い画面が出るばかりで何も起こりません。

なので、私の場合は面倒ですが、毎回左側をクリックしてPCにダウンロードしています。

なお、ここにも英語で書かれていますが、このダウンロードリンクとQRコードは、両方とも有効期限が2hだけなのでご注意を！

PCにダウンロードすると、拡張子が「.apk」の真っ白なアイコンのファイルが現れます。
基本的にパソコンでは使えないため、クリックしても展開できません。

これをSDカードに保存してスマホに移すなり、DropboxのようなオンラインストレージやFacebookメッセンジャー、Chatwork、Slackといったサーバー保存型のチャットアプリにPCからアップロードし、スマホ側でダウンロードしてください。

ただ、一番カンタンなのは、PCとスマホをBluetoothでつないでこのapkを飛ばすことです。

アプリをスマホにインストールする

以下は、apkファイルをPCからBluetooth経由でAndroidスマホへ転送し、インストールする手順です。

Bluetoothによる転送が成功すると、スマホ側はこのような表示になりますので、タップします。

すると、正規のアプリじゃないけど、インストールして大丈夫か？
と、聞いてきます。

自分でつくったアプリだからいいに決まっていますが、このように聞かれると何かムカつきますよねw、インストールを継続してください。

インストールが完了したら、アプリを開いてください。

アプリを開いて最初の画面です。

App Inventorのデザイン画面と基本的には同じデザインと配置になっています。

試しに、「LED ON」をタップしてみます。
すると、プログラムした通りラベルの文字は変わりますが、英語のエラー表示が出てきます。

次に、「LED OFF」をタップします。
すると、同じくプログラムした通りラベルの文字は変わりますが、英語のエラー表示が出てきます。

エラー内容を見てみましょう。
「Not connected to a Bluetooth device.」
Bluetoothデバイスに接続されていません。

あれ？

実は、ブロック編集でBluetooth用のブロックを使えばつながるなんて単純な話ではないのです。

Bluetooth接続の基本

Bluetoothを使う時のポイントは2つ：

1. 将来的に接続したいデバイス同士を事前にペアリングをする。
2. 事前にペアリング済みのデバイスの中から今回接続したいデバイスを選び、接続する。

この2つのステップを経て初めてBluetoothの接続が成功します。

この内、ペアリングに関しては、スマホに本来備わっている機能を使えばいいですが、
接続についてはアプリの中で解決する必要があります。

※スマホとBluetoothデバイスとのペアリング方法に関しては、Bluetoothイヤホンやスピーカーとペアリングするのと同じです。よって、ここでは割愛します。

Bluetoothの接続機能を使うためにリストピッカーを追加する

つまり、現状のアプリには「Bluetooth接続」のボタンすらないため、仮にペアリング済みであっても接続のしようがありません。

だったら先に言えよ！という話ですがw、Bluetoothによる無線通信は思ったほど単純じゃないですよ。ということをご理解いたただくためにあえてそのまま進めました。

ということで、先ほどのPC上のダウンロード画面に戻り、「Dismiss」をクリックして邪魔なウィンドウを閉じます。

デザイン画面のパレットで、今度は「リストピッカー」を選びます。

またわけのわからない横文字が出てきましたがw、リストからピックアップするからリストピッカーと呼ばれているようです。多分w

ただ、大それた名前をしていますが、デザイン上はボタンと同じです。
今回は、目立たせるために長さを画面いっぱいとし、色も変えてみました。

背景色はプロパティから変更できます。長さや幅も同様です。

アプリのタイトル名とアプリ名の変更方法

そうしたら次はブロックの方ですが、その前に、アプリを開いた時に表示されるタイトル名とスマホのデスクトップ画面上に表示されるアプリ名、この2つをどこで変更するかをまだお伝えしていなかったので、そこを先に確認しましょう。

まず前者については、ビューアーの空白部分をクリックするとアプリ全体が選択されたことになりますので、その後にプロパティを下にスクロールすると「タイトル」が現れます。

ここの名称を変更すると、アプリを開いた時に上側に表示される名称が変更されます。

なお、その下のバージョンコードは1や2のような整数だけ、バージョンネームは小数点以下まで使用できますので、これらを上手に使ってバージョン管理をしてください。

私の場合は、これらも変更しつつもパッと見てわかるように、タイトルにもバージョンを入れています。

後者については、アプリ全体を選択したままで上の方にスクロールすると、「アプリ名」という項目がありますので、ここを変更するとことでスマホにインストール後に表示される名称を変えることができます。

ただ、ここで要注意なのは、パレットの上の方に表示されているのはアプリ名ではなくプロジェクト名だということです。

ですので、もしこのプロジェクト名を変更したい場合は、

「プロジェクト」→「プロジェクトを別名で保存」

からプロジェクト名を変える必要があります。

Bluetoothに接続するための一連のブロックを追加

今回、Bluetoothに接続するめには、このリストピッカーを使わないといけないとわかるまで結構時間がかかりましたが、実際にどのようにブロックを組み立てればいいかがわかるまでにもさらに時間を費やしました。

で、数時間試行錯誤した結果、上記に辿り着きました。

今回はとにかくできればいいという方は、ここは何も考えずに上記の通りブロックを配置してください。

ただ、一応説明すると、

１．リストピッカーをクリックし、リストが表示されたらBluetoothデバイスのアドレスと名前の一覧を表示
２．リストから選択されたら、Bluetoothを接続するが、そのアドレスは選択したデバイスとする
３．リストピッカー上の文字を「接続中...」へ変更する

だいたいこんな感じです！

もう一度、ビルドからapkファイルを生成します。

Bluetoothモジュールとスマホをペアリングする

アプリにBluetooth接続のボタンを追加することも重要ですが、それと同じくらい重要で、かつ忘れやすいのが「ペアリング」です。

機器同士をBluetoothで接続するためには、必ず事前にペアリングをする必要があります。

普段から、スマホからBluetoothでイヤホンやスピーカーをつなげたり、パソコンへ写真を送ったりしている方はペアリングなどお手の物だと思いますが、もしわからない方でもスマホで他の機器とペアリングする方法はについては解説記事が山のようにありますのでそちらを参考にしてください。

ここではパスワード入力のところだけ解説します。

こちらはHC-06とスマホをペアリングした時の写真ですが、HC-05でも同じです。

パスワード入力を求められていますが、ポップアップウィンドウにはご丁寧に、パスワードは「0000」か「1234」だと書かれています。ちなみに、私は毎回「1234」で通っています。

少なくとも、この記事を執筆している時点で、私はHC-05を2個、HC-06を1個使ったこと（いずれも深セン華強北の店舗で購入）がありますが、すべて「1234」で通りました。

ペアリングが完了すると、上記のようにデバイス名一覧に表示されます。

なお、HC-05とHC-06は複数使っても同じ名前で表示されるため、混同しないためにも名称変更でナンバリングするなどしてわかるようにしておきましょう。

Bluetooth接続ボタンを使ってデバイスとつなぐ

アプリのダウンロード＆インストール方法は先程ご説明したので割愛します。

アプリを開いたら、「Bluetoothで接続」をクリックしてください。

すると、過去にペアリング済みのデバイスの一覧が表示されます。
各行ごとに、

MACアドレス デバイス名

の順番で表示されています。

なお、MAC（Media Access Control address）アドレスとは、カンタンに言えば、無線接続できるデバイスごとに割り当てられた個別の番号のことです。

ただ、これ以上のことは本論とは外れますのでご自身で調べてください。

デバイス側については次回の記事でご説明しますので、ここではこの中から一つを選ぶということ、そして、リストピッカーを使ってこの選択画面を出ないと接続できないこと、さらに繰り返しになりますが、その前にスマホの元々の機能でデバイスとペアリングをしていないとここに表示されないということを覚えておいてください。

ともかく、いずれかのデバイス名をタップします。

無事接続されると、先程のブロックプログラムの通りリストピッカー上の文字が「接続中...」に切り替わります。

まぁ厳密には、今回のプログラムでは接続に成功しても失敗しても、「Bluetoothで接続」をタップした時点で必ず文字が切り替わってしまうためダメですし、そもそも接続ボタンはあるのに切断ボタンが無いのも問題ですが、今回の入門編で最初からそこまでやると情報過多なので今回は割愛しました。

まとめ

いかがでしたでしょうか？

今回は、Androidアプリ製作の説明だけで結構な長さになってしまったためここまでとします。

ただ、スマホアプリって何だか難しそう？
と、思われていた方も、「これならできそう！」と、感じていただけたのではないでしょうか？

次回は、このアプリと対となるデバイス側の作り方をご説明します。
https://zenn.dev/suzuky/articles/c872429ced4841

具体的には、Bluetoothモジュールをマイコンにつなぎ、後はLED（発光ダイオード）とブザーを使ってスマホアプリからLチカをできるようにします。

それではまた！