ビジュアルプログラミングで Androidアプリ開発ができる「MIT App Inventor」を試す（ボタンを押したら音声でしゃべるアプリを作る）

## 【追記】 テキストプログラミング版もやってみました
比較用に、Java と Kotlin を使い、この記事でやったのと同じ内容を実装してみました。

* [MIT App Inventor で試しに作った「ボタンを押したら音声合成でしゃべる Androidアプリ」を Java で作ってみた - Qiita](https://qiita.com/youtoy/items/a0c26a3b8a671a2bb707)
* [MIT App Inventor で試しに作った「ボタンを押したら音声合成でしゃべる Androidアプリ」を Kotlin で作ってみた - Qiita](https://qiita.com/youtoy/items/b41f2f4428f911c9ebe6)

## はじめに
先日、以下の Qiitaの記事を書いた際にも使った「MIT App Inventor（以下、App Inventor と記載）」に関する記事です。

●ビジュアルプログラミングの MIT App Inventor を用いた音の機械学習を利用する Androidアプリ開発【後編：アプリ実装】 - Qiita
　https://qiita.com/youtoy/items/b241809c93e8fcef0e26

以下のページにある作例と同じ機能のものの作成手順を、画面の説明・操作方法なども含めて解説を多めにしつつ書いていきます（一部、入力するテキストや設定が違っている部分もあります）。
　●話して！(その１) | MIT App Inventor 2 日本語化プロジェクト
　　https://appinventor.tmsoftwareinc.com/archives/531
また、作ったプログラムを動かす方法についても触れて、アプリ作成から動作させるところまでの一連の流れを含んだものにしてみます。

### App Inventor とは
App Inventor はブロックベースのビジュアルプログラミングで Androidアプリ開発が行えるものです。
**（【2021/3/9追記】 iPhone・iPad でもアプリを動かせるようになりました）**

以下のように、MIT が提供する公式のものと、別の会社が提供している日本語化されたものがあります。

- [MIT App Inventor | Explore MIT App Inventor](https://appinventor.mit.edu/)
- [MIT App Inventor 2 日本語化プロジェクト | MIT App Inventor 2 Japanese Localization Project](https://appinventor.tmsoftwareinc.com/)

冒頭で紹介した記事を紹介した時は公式版（英語）を利用しましたが、今回は日本語化されたほうを使ってみます。
![MIT_App_Inventor_2_日本語化プロジェクト___MIT_App_Inventor_2_Japanese_Localization_Project.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/21a39ddb-d8fd-f38f-5dc7-6f97a56433f2.jpeg)

## アプリの作成
公式のものも日本語化されたものも、どちらを利用する場合にも Googleアカウントが必要です。アカウントを準備してから、以下のボタンを押してアプリ作成画面へ進んでください。
![【入り口】MIT_App_Inventor_2_日本語化プロジェクト___MIT_App_Inventor_2_Japanese_Localization_Project.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e341aeb6-284f-dc92-abc5-98af9fb8e6f3.jpeg)

### プロジェクトの新規作成
今まで作ったものがない状態だと、以下のような表示になります。以下の矢印で示した「プロジェクトを新規作成」を押します。
![MIT_App_Inventor_トップ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/75a8746f-afd2-cc68-2494-d25a9574bf83.jpeg)

そうすると以下の画面が出てくるので、これから作成するプロジェクトに名前をつけましょう。利用できる文字は英数字と下線（_）のみのようです。
![プロジェクト名をつける.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6bcd784e-215f-b3bf-ba50-7a63507c4de3.jpeg)

今回、適当に「test01」という名前にしました。名前を入力したら、右下の「OK」と書かれたボタンを押します。

### 画面のデザインを編集する
プロジェクトを作成した直後の画面表示は以下のようになります。
![作成画面（デザイン編集）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e62f705a-70e2-08b3-00c1-afd83be18398.jpeg)

#### ボタンを配置する
早速、画面上にボタンを配置してみます。以下の枠で囲んだ「ボタン」を赤い矢印で示したようにスマホの画面が表示されている場所に、ドラッグアンドドロップで動かしてください。
![作成画面（デザイン編集_ボタン追加）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/36febf2f-f295-5cf3-6047-82cac00fc7ad.jpeg)

ボタンを配置した後、以下の赤枠で囲んだ部分と同じような表示になっているのを確認してください。
![作成画面（デザイン編集_ボタン追加後）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/198faa99-ee11-17ad-42f9-9c80aba70997.jpeg)

#### 音声合成（テキストを音声でしゃべらせる機能）を行う機能を配置する
次に、テキストを音声でしゃべらせる機能を配置します。画面の下のほうを見ると「メディア」と書かれた部分があるので、ここを選択します。
![メディア.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6d190e10-4d49-902b-3719-b66f6d825bf5.jpeg)

選んだ部分が展開され、その中に「テキスト音声化」という項目があるので、スマホの画面が表示されている場所にドラッグアンドドロップで動かしてください。
![音声合成機能を配置.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/790f5b4a-6e3d-227a-7b92-3f69d02527a4.jpeg)

配置後に、以下の赤枠で囲んだ部分と同じような表示になっているのを確認してください（ボタンを配置した時と異なり、スマホの画面が表示されている部分には、特に何も表示されるものは増えません）。
![音声合成の配置後.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4100fa2b-e123-d915-63d7-056395b338b9.jpeg)

これで画面のデザインの準備は完了です。

### ブロックのプログラムを作成する
次に、ブロックのプログラムを作っていきます。画面の右上にある「ブロック編集」と書かれたボタンを押してください。
![ブロック編集画面への切り替え.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c27cd575-4887-0663-76b2-509f8cbee9fb.jpeg)

そうすると以下の画面が表示されます。
![ブロック編集画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0e9135bb-b0b7-3b02-4e0e-9bba83217538.jpeg)

画面の左のほうを見ると、先ほどの画面のデザイン編集の時に追加した「ボタン（ボタン1
）」と「テキスト音声化（テキスト音声化1）」が表示されている部分があります。
![利用するブロック（画面に追加したもの）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cbe0c9f5-10df-38a9-b88d-c7eebd54d51c.jpeg)

#### ブロックのプログラムを作る
先ほどの「ボタン1」と「テキスト音声化1」が表示されている部分のうち、「ボタン1」のほうを押すと画面が以下のような表示になります。その中の「いつも ボタン1 クリックされたら実行する」と書かれたブロックを、右のほうへドラッグアンドドロップで移動させてください。
![ボタンが押された時の処理.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/76412529-2c5c-07ca-13a1-82e155e5ae6b.jpeg)

次に、先ほどの「ボタン1」と「テキスト音声化1」が表示されている部分のうち、「テキスト音声化1」のほうを押すと画面が以下のような表示になります。以下の赤枠で示したブロックを、画面の右のほうへドラッグアンドドロップしてください。
![音声合成のブロックの配置.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d1d27009-da33-725a-4243-7275fa2e6f21.jpeg)

後から追加したブロックは、先に追加したブロックの中の部分にドラッグアンドドロップで移動させてください。そうすると、2つのブロックがくっついた状態になります。
![ブロックを組み合わせる.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8c2ec23a-6697-ee43-022e-4119f7489ff8.jpeg)

以下のようになれば OK です。
![2つのブロックがくっついた状態.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b24b940-0f4b-6ee1-3816-ed36d0acd531.jpeg)

このブロックの意味は「スマホ上に表示されたボタンを押すと、何らかテキストのメッセージを音声でしゃべる」というものですが、しゃべる内容を示したテキストがない状態です。そのため、最後にしゃべらせる内容を設定します。

画面左のほうに、以下の画像の赤い矢印で示した「テキスト」と書かれた部分があります。それを選ぶとブロックが並んだ画面が出てきますので、以下の画像の青い枠で囲んだブロックを画面の右のほうへドラッグアンドドロップで移動させてください。
![テキストのブロックを配置.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4860f02d-360e-3a61-db0b-de951e65fabc.jpeg)

今、移動させたブロックは、前の手順で先に配置していたブロックの中の右下のほうに配置してくっつけます。以下の画像のようになれば OK です。
![ブロックの組み合わせが完成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bd3503f1-95bf-91f2-89f2-357c3c1f715a.jpeg)

そして、以下の画像の青い矢印でしめした部分（何も書いていなかったところ）を選んで、音声でしゃべらせたい内容を文字で入力します。ここでは「この内容をしゃべるよ」という文章を入れました。
![しゃべらせるテキストを入力.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ed881025-609b-6024-6268-fee0bf107810.jpeg)

これで、プログラムの部分も完成です。それでは、ここで作った内容を実際に動かしてみます。

## 作ったアプリを動かしてみる
ここから、アプリを実際に動かしていきます。
App Inventor で作ったアプリを動かす方法はいくつかあり、公式ページ（英語のページ）には 4つの方法が書かれています。その中で、1つ目の方法が一番オススメのようです。

●Setting Up App Inventor
　https://appinventor.mit.edu/explore/ai2/setup
![動かすための4つの方法.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cb9f6e86-58ce-891e-4729-4896d39023f8.jpeg)

このやり方の説明は、日本語化プロジェクトのページの以下に概要が書いてあります。少し、解説を増やしたものをこの後に書いていきます。
　●スマホやタブレットをWiFi経由で接続する | MIT App Inventor 2 日本語化プロジェクト
　　https://appinventor.tmsoftwareinc.com/setup-device

### Androidスマホに公式アプリを入れる
オススメの方法は、Androidスマホに公式アプリを入れて、Wi-Fi経由で自分が作ったアプリのデータを送るものです。

Androidスマホ側にインストールする公式アプリは、ストアにある以下の「MIT AI2 Companion
」です。ストアの URL は「 https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 」になります。
![MIT_AI2_Companion_-_Google_Play_のアプリ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/734e9cbb-d845-dce5-727b-cfb6e23a7dd6.jpeg)

スマホからたどる場合は、アプリ名の「MIT AI2 Companion」で検索するか、以下の QRコードでアクセスするのがオススメです。
![MIT AI2 Companion の QRコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0cb6fc77-097a-50c1-640c-68044de0f1e0.png)

公式アプリをAndroidスマホにインストールし、起動させた直後の画面は以下のようになります。
![コンパニオンアプリを起動した直後の画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/643b3d82-1dba-39e2-6001-65eeaf82a9f3.jpeg)

### Androidスマホに作ったアプリを入れて動かす
次に、PC で作ったアプリを Androidスマホで動かします。
ここからの手順を進める前に、**PC と Androidスマホは同じ Wi-Fi に接続しておく**よう、ご注意ください。

Androidスマホ側の準備はできたので、PC側の操作を行っていきます。
画面上部にある「接続」と書かれた部分（以下の赤矢印で示した部分）を押して、その後に表示される「AI2 Companionアプリ」という項目（以下の青矢印で示した部分）を選んでください。
![PC側での操作（アプリのデータを送る）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/29c0fc00-8777-08c8-e234-78ce7d3e0e80.jpeg)

そうすると、以下のように QRコードと文字で書かれたコードが画面に表示されます。
（文字で書かれたコード・QRコードの内容は、以下と異なるものが出ていると思います）
![QRコードと文字のコード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c32c7d22-b45c-f7c8-81fe-f752f0cb6b36.jpeg)

あとは、先ほど Androidスマホにインストールした公式アプリで、この QRコードを読み取るか、文字で書かれたコードを手で入力します。
QRコードを読み取る場合は、以下の画面の「scan QR code」と書かれたボタン（以下の赤矢印で示したボタン）を押します。また、文字のコードを入れる場合は、以下の青い矢印で示した部分に手入力で文字を入れ、その後に下にある「connect with code」と書かれたボタンを押してください。
![コードの入力.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8c89910f-6ce7-aa92-d760-f973fd16e438.jpeg)

それらのどちらかの操作を行うと、PC側の画面が以下のようになり、これが 100% になると Androidスマホでアプリを動かせる状態になります。
![アプリ転送中.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/09d9f276-09c0-02c7-b0dc-024f0059aeb6.jpeg)

実際に、今回作ったアプリを動かしてみた時の様子はこのようになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MIT App Inventor に関する Qiita の記事のために作ったアプリ（Androidスマホで動かしている時の様子）。 <a href="https://t.co/9vR9k8L3TF">https://t.co/9vR9k8L3TF</a> <a href="https://t.co/1UxjXbuq6W">pic.twitter.com/1UxjXbuq6W</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1368477617251258373?ref_src=twsrc%5Etfw">March 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】 iPhone・iPad版も出たようです
iPhone・iPad で動くコンパニオンアプリが出たようです。

●‎「MIT App Inventor」をApp Storeで
　https://apps.apple.com/jp/app/mit-app-inventor/id1422709355
![iPhone版ストア.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/181b9b7f-474d-7fba-3b6e-3c9c88bdd1d8.jpeg)

この記事で作ったアプリを iPhone でも動かしてみました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ボタンを押したら音声合成で喋るだけのアプリ、iOS版の MIT App Inventor アプリで動いた。 <a href="https://t.co/qXZVscsxE2">https://t.co/qXZVscsxE2</a> <a href="https://t.co/vPqC0x1Yxl">pic.twitter.com/vPqC0x1Yxl</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1369097040936857602?ref_src=twsrc%5Etfw">March 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに
今回、ビジュアルプログラミングで Androidアプリ開発「MIT App Inventor」を使い、ボタンを押したら音声合成でしゃべるアプリを作りました。

今回作ったアプリでは、使った仕組みは、ボタンを使う機能と音声合成の機能のみでした。MIT App Inventor には他にも、スマホ内蔵のセンサーを使ったり、Bluetooth を使った無線通信機能を使ったり、クラウドとのデータのやりとりをしたりといった、多種多様なアプリを作るための機能も備わっています。
また、画面にボタンを配置した際は、見た目や配置などを何も変更することなく使いましたが、この見た目や画面の見た目を様々変えることも可能です。

今後は、そのあたりの多様な機能を使ったアプリや、画面デザインにいろいろ手をいれたアプリを作ってみたいと思います。