MIT App Inventor 2であのアプリを作ってみる (Whack-a-Mole 1）

要するに、「モグラ叩き」ゲーム。

動物をハンマーで叩くなんて、ゲームとは言え、あまり好きなタイプではないゲームですが。。。でも、小さい時（？半世紀以上前）に旅館などで、よくバンバンと叩いていた記憶あるが。

これも、YouTubeにはたくさん作り方のチュートリアルがある。MIT App Inventorだとどの程度できるのか、作ってみた。

アプリ実行のビデオ：

スクリーンのデザイン：

                             

 

ブロック・コード：

1. 「遊び方」を表示。

2. 「Start」ボタンをタップするとClock1が有効となる。

mole2.png                           mole3.png

           

全体で56マスあり、ランダムにそのうちの一つを選び、選ばれた当該のマスの背景画をmole2.png に置き換える（モグラが顔を出し => タップすることになる）。56マス全ての表示が終わると終了のメッセージが表示される。表示の間隔は600ミリ秒（Clockのintervalとして設定）

  ************** 以下Image56 まであるが省略 ******************

モグラが顔を出したマスをタップすることになるが、タップした後の処理は、genericのイベントハンドラー(when any Image.Click)を利用。

タップしたマスの画像がmole2.png (モグラが出ている）であれば、mole3.png (穴だけの画像)に画像を置き換え、スコアに1点加算する。mole3.pngのマスを誤ってタップした時は、スコアが２点以上の時に限り1点減点する。

ゲームが終了した際に関数resetが実行される＝＞すべてのマスの画像をmole3.pngとし、変数並びにスコアLabelの初期化を行う。

 

課題：レベルの設定とかはどうすれば良いのか？モグラの穴が整然とし過ぎているので、もう少しバラバラの方が自然か？

 

 

MIT App Inventor 2で遊ぶ (World News 2 -追加-）

データをGNewsより直接取得 。詳細情報をみることができるメディアのウエッブサイトを追加。

アプリ実行のビデオ：

スクリーン・デザイン：

メインスクリーンは変更なし。右図がウエッブサイトを表示するために追加したarticleScreen。

                                                              

ブロック・コード：

追加部分のみ。

1. 今回は、同梱のファイルからデータを読み込む代わりに、直接所定のURLに対しGETリクエストを行い、データを取得。

「fetchUSDataButton」（ボタンの表示は「US」）をタップした時の動作。言語：英語、国：米国、対象カテゴリー：「全て」で設定。日本語（「JP」）、中国語（「CN」）、フランス語（「FR」）も同様。

2. データ取得に成功したら、必要なデータを抽出(extractData)、日付のフォーマット変更(makeDateAndTime)、ListView用のリスト形式のデータ生成(makeDataForListView)をそれぞれ行う関数を実行。内容的には、同梱のJSONファイルを読み込んだ時と基本的に同じ。関数makeDateAndTime（赤点線内）が追加されたのが変更点。

3. 当該記事のメディアのウエッブサイトURLおよびメディアのソースを追加で抽出。（赤線内）

4. リストアップされている記事をタップすれば、当該記事のメディアのウエッブサイトのURLが渡され、別画面のarticleScreenに内容が表示される。

 

5. デフォルトの日付表示「2024-02-06T06:37:00Z」＝＞「2024/02/06 06:37:00」に変更するための関数。時間関係のcomponentを使えば簡単にフォーマットを変更できると思っていたが、そんな便利なcomponentはなかった。

この関数が行なっているのは、デフォルトの日付を分解して、単にデータを組み直しているだけのこと。こんな大袈裟な関数でないとこちらの意図していることができないのか、疑問ではあるが。。。たぶん、こんな関数を作るよりもっと簡単な方法があるはず。

6. 別画面：

受け取ったURLをWebViewerで表示。Xボタンをタップすれば、メイン・スクリーンに戻る。

                                                *******************************************************

前回までのブログ：

MIT App Inventor 2で遊ぶ　(World News 1）

 

MIT App Inventor 2で遊ぶ (World News 1）

世界のニュースを提供しているPublic APIがいくつかある。今回は、そのうちの一つGNewsを利用。

                                            ***********************************************

ListViewを使用する時（画像＋Main Text＋Detail Text）に、デフォルトの設定のまま使用すると以下の通り、画像とテキスト部分の間が余白なしで表示される。（赤点線部分）

                           

ネット上でいろいろ調べたところ、extensionを使うadviceが多かったので試してみたが、期待通りの動作を得ることはできなかった。その後、Designer で設定をいろいろ変更して試行錯誤を重ねた結果、ListViewの画像のサイズを以下の通り変更すれば、期待通りの動作に「近い結果」を得ることができた。200px X 200px => 130px X 260px

                                    デフォルトの設定値       ＝＞            値を変更

                               .       

画像サイズ変更後の表示：

                                                 

なお、今までも同じようにListViewを使って特に問題がなかったのは、うまい具合に取得した画像のまわりに空白の部分があったようである。その空白部分がpaddingのような役割をしていたようだ。今まで知らずに使っていた。

                                            ***********************************************

アプリ実行のビデオ：

アプリ作成中は、何度となくGETリクエストを行い、試行錯誤を重ねるがPublic APIの無料枠に達することもあるので、今回は、あらかじめ取得しておいたJSONファイル（英語、フランス語、日本語、中国語）を使用した。いずれも7月21日〜24日にダウンロードしたもので内容的に若干古いニュースとなっている。

スクリーン・デザイン：

                             

ブロック・コード：

1. 言語別に、fetchUSDataButton, fetchJPDataButton, fetchCNDataButton(中国), fetchFRDataButtonのボタンを設定し、言語に対応したJSONファイルを読み込む。CircularProgress（あのクルクル回るアイコン）を有効にする。

他ボタンは省略（ファイル名のみが異なるだけで内容は同じ）

2. 関数reset

3. 読み込んだJSONファイルをデコードの上変数JSONDataに格納。データの数も変数LengthOfDataに格納　＝＞　データの抽出を行う関数extractDataおよびListView用データを生成する関数makeDataForListViewをそれぞれ実行　＝＞　CircularProgressを無効に　＝＞　ListViewにデータを表示

4. 以下は、実行した関数の内容。

for each を使ってJSONDataよりそれぞれのデータを抽出し、データの種類ごとにリスト形式でデータを変数に格納。

Designerであらかじめ選択したListViewのレイアウト（下図）に従い、

　　　　　　　　　　　　　　　

ListViewに表示する要素（mainText、detailText、imageName）に対応したデータを当てはめて統合したリスト(dataForListView)を作成

 

課題：詳細な情報の表示（メディアのウエッブサイト表示）、日付の形式を変更、ネットより直接データを取得など

MIT App Inventor 2で遊ぶ (Audiobook 1/2）

電子書籍とオーディオブックを合体させたようなもの。

日本語、英語、フランス語、ドイツ語の誰でも知ってる書籍のごくごく一部を読んで聞く。あまり実用的なアプリではないが。。。どの言語の発音も及第点というところか？

アプリ実行のビデオ：

=> 選択した書籍のテキストをtextLabelに表示させた場合。単語の選択などは不可。

=> 選択した書籍のテキストをTextBoxに表示させた場合。この場合は、単語の選択が可能で、翻訳を参照したり、コピー機能なども使える。TextBoxは、通常は、文字、数字などを入力する機能を提供。

なお、フランス語とドイツ語の場合、単語に赤の下線が表示されているものもあるが、理由はわからない。

スクリーンのデザイン：

                                               

ブロック・コード：

1. イソップ童話の名前をリスト形式の変数aesopに格納。この名前に.txtを付ければファイル名となる。

2. 「高瀬舟」が４つのパートに分かれていたので、それぞれのパートの名前をリスト形式の変数katasebuneに格納。この名前をもとにファイル名を選ぶことになる。

3. スクリーンの初期化時に、ListPicker1の表示項目として変数aesopの項目を、ListPicker2の表示項目として変数katasebuneの項目をそれぞれ設定

4. 言語を格納する変数languageStatusを設定

5. ListPicker1より項目を選択した場合、languageStatusをen （英語）に設定し、選択項目名+ .txt を同梱のファイルより読み込む

6. 読み込んだテキストをtextLabelに表示し、変数targetTextに同テキストを格納する。（TextBox1にも読み込んだテキストを表示するようになっているが、こちらを表示した場合のアプリは、上記のビデオの通り。）このtargetTextに格納されたテキストが読み上げられることになる。

7. ListPicker2より項目を選択した場合、変数languageStatusにja （日本語）を設定し、選んだ項目によって読み込むテキストファイルを選択する。同様に、同梱のファイルより選んだファイルを読み込む。高瀬舟は４つのパートに分かれていたのでその通りに作成。

8. 「海底2万里」のボタンをタップした場合は、languageStatusを fr （フランス語）に設定し、所定のファイルを読み込む

9. 「ブレーメンの音楽隊」のボタンをタップした場合は、languageStatusを de （ドイツ語）に設定し、所定のファイルを読み込む

10. 「Read」ボタンをタップすれば、「SpeechRate」と「SpeechPitch」を適宜設定し、各languageStatusに合わせて、TextToSpeechの国、言語を設定していく。設定が終わったら、それぞれのテキスト（変数targetTextに格納してある）を読み上げる。アジアの他の国々の言語、韓国語、中国語、タイ語、ベトナム語なども加えたかったが、適当な書籍をどのようにして見つければ良いのかわからなかったので、今回は残念ながら加えることができなかった。

11. 「Stop」ボタンをタップすると読み上げは中止される。

12. 「Clear Text」ボタンをタップするとテキストは削除される。

 

MIT App Inventor 2で遊ぶ (Sudoku 3 -追加-）

＜Sudoku 2 への追加＞

Public API (DOSUKU) より数独の問題と解答を取得した際、問題のレベルに関する情報も得ることができる。

アプリ実行のビデオ：

スクリーンのデザイン：

「Start」ボタンの右側にレベルを表示するLabel(Level)を追加。

                                   

ブロック・コード：

1. 取得したJSONデータよりレベルのデータ（キーは、difficulty）を抽出し、levelLabelに内容を表示する関数getDifficutyData。

2. 関数getdifficultyDataの実行

                                         *******************************************************************

前回までのブログ：

MIT App Inventor 2で遊ぶ　(Sudoku 2）

MIT App Inventor 2で遊ぶ　(Sudoku 1）