MIT App Inventor 2でもできるかやってみた (Collection of Small Apps 1）

YouTubeにあった 「9 HOURS of Python Projects - From Beginner to Advanced」 をMIT App Inventor 2でできるのかやってみた。

今回は、略語が何を表しているのかを答える簡単なアプリと、思いきや、ちょっと手こずった。

アプリ実行のビデオ：

スクリーン・デザイン：

左端：初期画面　中央：初期画面で「１」をタップした時に遷移する画面　右端：中央の画面を上方向にスクロールした画面

今回は、「１」をタプした時が対象。

           

ブロック・コード：

スクリーン・デザインで表示している初期画面の部分＝＞

今回は、５つの Vertical Arrangements (mainScreenVA + subScreen1VA1 〜 subScreen1VA4) で Screen1 が構成されている。mainScreenVAは上記初期画面となる。今回のブログの対象はsubScreen1VA1。

Screen1の初期化時に、関数makeVAVisibleにパラメーターとして「home」を渡し実行され、mainScreenVAのみが表示される。

関数makeVAVisible：受け取るパラメータの内容により、表示するVertical Arrangementを選択し表示する。

画面の最下部に配置されている homeButton （家のアイコン）及び各ボタンがタップされたときに、該当のVertical Arrangementをパラメーターとして関数makeVAVisible に渡し表示させる。今回は、item1Buttonをタップした時のみが対象。以下item2Button〜item4Buttonは次回以降に動作等を追加。

item1Button をタップした時の動作＝＞

変数abbrevDictの設定。使用するデータをdictionary形式であらかじめ格納。Firebase Realtime DBなどに格納し、アプリ上からデータの追加・訂正・削除などができるようにすれば便利かもしれないが、今回は必要なデータをアプリに同梱。

key => 略語

value => ３つのデータ（略語に対応するフルテキスト、詳細な説明があるウエッブサイトのURL、簡単な略語の説明）をリスト形式で設定。

上の画像では見にくいので、例として「HTTPS」を拡大表示すると以下の通り。

略語(abbrevList)、略語のフルテキスト(abbrevInFullTextList)、ウエッブサイトのURL(wikiSiteList)、簡単な説明(abbrevMeaningList)をそれぞれリスト形式で格納するための変数を設定。

また、略語データの件数 (abbrevListLength) と問題をランダムに選択する際使用する乱数 (randomNumber) を格納する変数を設定。

初期画面でボタン「１」をタップした時の動作を設定＝＞

略語クイズ画面の「スタート」ボタンの表示を「スタート」に設定（1回目以降の表示は「次の問題へ」となる）

関数makeVAVisibleにパラメーター「1VA1」を渡して実行。この結果、初期画面(mainScreenVA)が非表示となり、略語クイズ画面(subScreen1VA1) が表示される。

さらに、関数makeListsを実行し、上記変数にデータをセットする。また、「正誤の確認」ボタンは一時無効にする。

関数makeLists：Dictionary形式のデータのvaluesをlist形式で抽出し、項目ごとにそれぞれのデータをlist形式で変数に格納。

変数selectedAbbrevはランダムに選択された略語を格納

略語クイズの画面で「スタート」ボタン (start1Button) をタップした時の動作を設定＝＞

念の為、問題の略語を表示するLabel、回答を記入するTextboxおよび結果を表示するTextBoxを空白で初期化。

１からデータの個数までの数字よりランダムな数字を生成してrandomNumberに格納。

略語リストよりindexがrandomNumberに該当する略語をselectedAbbrevにセット。

問題の略語を表示するabbreviationInQuestionLabelにselectedAbbrevに格納されている略語を表示。

「正誤の確認」ボタンを有効に。

関数clearVarsVA1：変数およびLabel/TextBoxを初期化する関数

「正誤の確認」ボタン (checkButton1)の動作を設定＝＞

回答を入力するanswerTextbox1に何らかの入力があった場合 ＞＞ もし、入力された回答が、略語のフルテキスト・リストの該当するフルテキストを同じであれば（問題の略語を抽出したときに使用したrandomNumberをindexとして使用）、 ＞＞ 結果を表示するresultTextBox1に「正解です」＋略語の意味を表示。（なお、Labelの代わりにTextBoxを使用することにより複数行の表示が可能となる）＞＞ 「スタート」ボタンの表示を「次の問題へ」に変更する ＞＞ 正解ではない場合は、「再度入力」か「次の問題へ」のいずれかの選択を促すポップアップを表示

上記ポップアップにていずれか（「再度入力」あるいは「次の問題へ」）を選択した場合の動作＝＞

キーボードの表示・非表示などがコントロールできるextension 「pl.extension.Keyboard.aix」を利用した。

「再度入力」を選択した場合は、キーボードを表示して、カーソルを回答欄にセット。

「次の問題へ」を選択した場合は、「スタート」ボタンの表示を「次の問題へ」に変更し、回答欄と問題欄は空白にセット。

お手本のYouTubeビデオ「9 HOURS of Python Projects - From Beginner to Advanced」の#1 - Quiz Game (Easy) をMIT App Inventor2 でやってみようとしたのだが。。。お手本ビデオだとterminalに入力、出力を行い非常に簡単に仕上げている。

同じようにはいかないが、もう少し簡単に作ってみたい。（多分、素人コーディングなので、必要以上にややこしくなっているのではと思う。）

改善すべき点としては、同じ略語が続けて出ないようにしたい。