【MIT AppInventor2】小学生でもできるAndroidアプリ開発3日目

この記事は、[LIFULL Advent Calendar 2017](https://qiita.com/advent-calendar/2017/lifull)の4日目の記事です。

全国のサンタさんこんにちは。
もうお子さんや甥っ子姪っ子にあげるプレゼントは決まったでしょうか。
やはりねらい目は某ゲームハードだと思いますが、やはり入手困難。
そこで今年は趣向を変えて格安Android端末をプレゼントして、冬休みにアプリ開発に挑戦してもらうのはどうでしょうか。
アプリ開発と聞くとむつかしく聞こえるかもしれませんが、今や2017年、某人気コミックだって[小学生向けにゲーム開発環境](http://corocoroblock.jp/)を提供してる時代。
そこで今回はMITから提供されている教育向けAndroidアプリ開発環境[MIT AppInventor2](http://ai2.appinventor.mit.edu)(以降AI2)の紹介(の続き)をしていこうと思います。

基本的な導入については過去の記事をご覧ください(はてなブログ)
http://shunxnegi.hateblo.jp/entry/2014/12/26/181911
http://shunxnegi.hateblo.jp/entry/2015/07/21/011839

# 今日作るもの
ゲームをやっていて、「今手が離せないけどメモがしたいんだ！」という時がよくありますよね。
今日はそんな時に使えるメモアプリを作りながら
・音声入力
・データ保存
・画面遷移
のサンプルを紹介していきたいと思います。

作る画面は以下の二つ
・カテゴリー画面
　・保存内容のカテゴリー一覧。フォルダのようなもの
　・今まで保存したカテゴリーが確認できる
　・音声入力で新規カテゴリーが作れる
・各カテゴリーの保存内容画面
　・カテゴリーに保存したメモ一覧が見れる
　・音声入力でメモを追加できる
です。

# 画面を作る
前の記事でもお伝えしましたが、AI2には画面を構成するDesignerと動きを決めるBlocksが存在します。
Designerについては以前詳しく書いているので、軽く触れる程度とします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/b2fc5ba5-9f6b-2f5c-967d-81fffbee58d1.png)
今回作ったのがこの画面、カテゴリー画面、保存内容画面は同様の構成になっています。
今回はデータ保存のためにTinyDB、音声入力のためにSpeechRecognizerを使っています。

# 音声を入力する
AI2ではキーボード入力やジャイロセンサー、カメラなど多くの入力に対応しています。
今回は音声入力ということでSpeechRecognizerを使っていきます。
DesignerではMediaに項目があります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/c53f32b2-d512-1770-f57d-673042da645e.png)

次にBlocksの設定を見ていきます。
追加したSpeechRecognizerの中にGetTextというメソッドがあると思うので、こちらをボタンクリック時に呼び出します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/b981f708-83d9-ff30-b52d-38194a5b48e7.png)
これによりよく見る音声入力プロンプトを立ち上げることができます。
![Screenshot_20171204-023210.png](https://qiita-image-store.s3.amazonaws.com/0/82960/9a83aada-268e-fa30-cb2f-f821e1be137d.png)

音声入力結果はSpeechRecognizerのAfterGettingText内でResultとして受け取ることができます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/d1f1bbec-706a-a46c-ebbc-1bceb43b9f5a.png)
上記では受け取った結果をリストに追加しています

# データを保存する
データをローカルに保存する場合はTinyDBを使います。
TinyDBは変数やリストに名前を付けて保存をすることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/df1be4ba-8678-59a3-c5c8-fe1873e84117.png)
今回は先ほど取得した音声データをCategoryとして保存しています。

保存したデータはGetValueで取得することができます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/e9ae6fcb-3f9c-db45-9506-e9d0f51ea61b.png)
指定した名前のデータが存在しなかったときのデフォルト値もここで決めます

# 画面遷移する
ここまででカテゴリー画面ができました。
![Screenshot_20171204-023205.png](https://qiita-image-store.s3.amazonaws.com/0/82960/5acf428e-7b41-0e9a-0546-ec473db65f78.png)
次は各カテゴリ選択時にカテゴリ詳細画面に遷移したいと思います。
上部Add Screenから新しい画面を作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/d1294b81-46a1-fac6-12e9-f0eccca5f39a.png)
今回はカテゴリ画面と全く同じものを作ります。

BlocksのControlからopen another screenを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/8bf4a647-7698-543a-4b16-1c6a0941a5b0.png)
今回は選択された項目名を変数として渡しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/c8d7205d-30a0-f970-2502-4220fc34b9a7.png)
渡した値は遷移先の画面のget start valueで取得することができます。

![Screenshot_20171204-023241.png](https://qiita-image-store.s3.amazonaws.com/0/82960/98ffd1f5-718b-8d89-de09-d72f4d2aa826.png)
受け渡した値をタイトル(やデータを格納する場所の名前)に使っています。

値を受け渡す必要がない場合はこちら
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/4b3ed156-652d-639b-2e1a-51ad75823c32.png)
画面名の指定のみで遷移できます。

かなり駆け足になりましたが、今回は音声入力、データ保存、画面遷移についてサンプルを交えながら解説しました。
一応Blocks全体を張っておくので何かの参考になれば。

カテゴリ一覧
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/21340b7a-68d0-1205-01d3-56a927ace7ee.png)

カテゴリ詳細
![image.png](https://qiita-image-store.s3.amazonaws.com/0/82960/897cfcd4-2eef-b1e9-dbdd-22e4554e415c.png)

なんとたったこれだけです。
思いついてぱっとすぐ作れるすごい！

# 終わりに
MIT AppInventor2と聞いて、「なんでそんなもん今更…」と思う方もいるかもしれませんが、意外といまだに更新され続けているこのサービス。
実はFireBaseも使えたりします(需要があれば書くかも)。
サービス開発は日に日に楽になっていってるし、そのうち誰もが作りたいものを簡単に作れる時代が来ることを僕は願っています(エンジニアは商売あがったりですが)。
がっつりプログラミングして作りこむのもいいですが、ぱっと思いついたものを気軽に作ってみる、というのもたまにはいいのではないでしょうか。

# 参考
[MIT App Inventor2 攻略WIKI](http://appinventor2.wiki.fc2.com/)