75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2で遊ぶ (Weather App New 2)

2024-09-21 07:35:15 | 日記

今回は、最小限の変更、追加で、いつでも言語の選択を可能にした。

アプリ実行のビデオ:

スクリーンのデザイン:

緑の背景に白字の「English <= => 日本語」ボタンを追加。

                                             

ブロック:コード:

1. 変数langの設定はそのまま。

2. 前回は、Screen1(メイン画面)が初期化されるときに関数slelctLangを実行したが、今回は、「English <= => 日本語」の変更ボタンをタップした時も、関数selectLangを実行するように設定した。(今回新しく追加したのは実質的にこのcomponentのみ

3. 関数selectLang以下は前回と同じ。

4. 各言語選択ボタン(4つ)の動作をコントロールするのにgenericのイベントハンドラーを使っている。言語変更ボタンも対象ボタンになってしまうため、「タップしたボタンが言語変更ボタンではない場合」との条件を追加した。(赤黄点線部分)

 

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (Weather App New 1)


MIT App Inventor 2で遊ぶ (Weather App New 1)

2024-09-18 17:51:59 | 日記

天気予報アプリ。素材は同じだが、UIなどを若干変更して作成してみると、新たな発見があるし、色々な使い方の復習にもなる。

都市毎のボタンをタップしデータを取得。最初に言語を英語か日本語より選択。ボタンの処理はgenericのイベントハンドラーに任せる。

アプリ実行のビデオ:

スクリーンのデザイン:

中央部分にある黒い長方形はListView。その下のTest Label 2は取得したデータを確認するテスト用のLabel。今回は、ListViewを使っていない。

Test Label 1は、気象データ検索対象の都市名(検索に使用するので英語名)を確認のために表示するLabel。

今回は、Tokyo, Paris, London, Beijingの各ボタンの動作確認を行なった。

                                           

ブロック・コード:

1. 選択した言語を格納する変数lang

2. スクリーンの初期化時に関数selectLangを実行

3. 関数selectLangの実行内容:選択ダイアログ・ウインドウを表示し、日本語あるいは英語(English)のいずれかを選択

4. 選択ダイアログ・ウインドウでいずれかを選択したら、変数langに選択言語を格納し、アプリのタイトルを選択した言語に応じたものに設定するとともに、関数makeButtonTextを実行して、4つのボタンの表示も適宜設定。

5. 関数makeButtonText:変数cityNameListより選択した言語に対応したボタンのテキストを選択し表示

6. 選択言語に応じた表示テキストのリスト

7. 天気予報が知りたい都市名のボタンをタップしたら、全てのボタンの背景色をlight grayにした上で(resetButtonBGColor)、当該ボタンの背景だけを白色に変更。(genericなイベントハンドラーを使用しているので、一旦全てのボタンの背景色をデフォルトのlight grayに戻す関数resetButtonBGColorを実行。もし、デフォルト色に戻さない場合は、直前にタップしたボタンの背景色が白色のままで残ってしまう。)

タップされたボタンの表示名のindexを取得(cityNameListENまたはcityNameListJP)=>そのindexを利用してcityNameListEN(英語の都市名リスト)よりターゲットの都市名を英語で取得(天気予報情報をリクエストする場合は英語の都市名で行う)して変数targetCityに格納。

関数fetchDataを実行してtargetCityの天気情報を取得。

取得した天気情報をtestLabel2に表示。この際、extensionを利用して整形された形で表示。

関数resetButtonBGColor:全てのボタンの背景色をlight grayに設定する。

cityButtonListには全てのボタンがリスト形式で格納されている。for each 〜 と generic の setButton.BackgroundColorを使えば、簡単に設定できる。(generic の componentを使う際、対象としたいcomponentを限定する一つの方法が、対象のcomponentをリスト形式で変数に格納して、それを for each 〜 で反復実行するもの。)

言語の選択が最初にアプリを立ち上げた時しかできないが、いつでもできるようにしたい。

 


MIT App Inventor 2で遊ぶ (Nobel Prize Laureates 1)

2024-09-14 07:22:13 | 日記

ノーベル財団は、ノーベル賞受賞者・受賞団体に関するデータをPublic APIで提供している。

データの属性として、生誕地(birth)、没地(death)、現在主に活動(?)している国(countryNow)とかはあるが、「国籍(nationality)」はない。

当然であるが、1901年第1回のノーベル賞からのデータを検索できる。今回は、まず、対象分野と受賞年を指定してデータを検索。

アプリ実行のビデオ:

1901年第1回ノーベル物理学賞、日本人の受賞者などを検索してみた。

スクリーンのデザイン:

左側:メイン画面  右側:対象受賞者のプロフィールのウエッブサイトを表示(ブラウザーのcomponentを配置)

                                                   

ブロック・コード:

<Screen1>

1. 受賞対象のカテゴリーについて、フルネイムのカテゴリー(選択リストに使用)とデータベースで使われている3文字の略号を関係づけてdictionary形式で変数categoryDictionaryに格納。

2. categoryListPickerのアイテムを設定。

また、1901年より20023年までの受賞年のリストを生成して、awardYearListPickerのアイテムとして設定。

3. categoryListPickerおよびawardYearListPickerで選択されたカテゴリーと受賞年をそれぞれcategoryOptionとprizeYearOptionに格納

4. カテゴリーおよび受賞年が選択されていれば、それらをパラメーターとして所定のURLにGETリクエストを行う。

カテゴリーおよび受賞年が選択されていなければ、選択を促すメッセージが表示される。

5. 取得したデータを各アイテム毎に格納する変数を初期化する関数resetAll

6. 正常にデータを取得した場合、各アイテムごと(フルネイム、誕生年月日、受賞カテゴリー、受賞年等)にリスト形式で上記該当の変数に格納する関数makeListDataを実行。

また、ListViewにデータを表示するため、それらリストを統合する関数makeDataForListViewを実行。

7. 各アイテムごと(フルネイム、誕生年月日、受賞カテゴリー、受賞年等)にリスト形式でデータを格納する変数の初期化(ブランクのリスト)

関数makeListData:全体の画像では、ぼやけて内容が全くわからなくなるので、最初の部分を拡大すると以下の通り。

取得したJSONデータより、各受賞者の ID をlaureateIDListに、fullName をfullNameListに、以下割愛したが、birth をbithDateListに、categoryをcategoryListに、等々を順次格納していく。

                                                    ********************** 以下省略 ****************************

8. 関数makeDataForListView:Listviewに表示させるために、上記の関数makeListDataを実行することによりリスト形式となった各項目を、受賞者ごとに統合してリストを作成して変数dataListForListViewに格納。(上記6. のcomponentを参照。)

ListViewの行をタップすると、profileScreenに遷移するが、その際当該受賞者のプロフィールが掲載されているURLを渡す。

<profileScreen>

Screen1より、当該の受賞者のプロフィールがアップされているウエッブサイトのURLが渡されるので、WebViewerでそのURLを開く。

×印のボタン(Button1)をタップすればメイン画面(Screen1)に戻る。

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

冒頭でも紹介したが、Nobel Prize APIに関するURLは以下の通り。

https://www.nobelprize.org/organization/developer-zone-2/

1901年の物理学賞を検索する場合のURLは以下の通り。適宜パラメーターを変更すれば、欲しいデータが簡単に検索できる。

https://api.nobelprize.org/2.1/laureates?nobelPrizeYear=1901&nobelPrizeCategory=phy

 


MIT App Inventor 2で遊ぶ (GlobalChat 7)

2024-09-11 07:50:34 | 日記

avatarの数を増やし、Chat Room上部にnicknameとともに該当のavatar画像を表示した。大きな変更・追加ではないが。。。

アプリ実行のビデオ:

スクリーンデザイン:

左側:nickname他情報の登録画面。avatarを12個に増やす。(一部のavatarは右側に隠れてしまって見えない)

右側:Chat Roomの上部のボタン。「Reload」および「Logout」ボタンのアイコン化。真ん中にログインしている人のavatar画像を表示するimage component。

                                     

ブロック・コード:

Screen1(メイン画面)=>

                  

nicknameを入力し、「Enter Chat」(loginButton)をタップし、問題なければpostsScreen(Chat Room)に遷移するが、その際、ログインした人のnicknameとともにavatarの番号を渡す。

簡単に図示すると。。。ログインするのがkenjiの場合、kenjiのnicknameListでのindex値は「1」なので、avatarListのindex値「1」である「2」がkenjiのavatar番号となり、この番号をnicknameであるkenjiとともに遷移先であるpostsScreenへ渡す。

Chat Room画面=>

アプリに同梱しているavatar画像のリストを変数avatarImagesに格納

nicknameとともに受け取るavatar番号を変数avatarNumberに格納

avatarImagesよりavatarNumberをキーにavatar画像のファイル名を取得し、表示する。

 

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

前回までのブログ(CRUDの内Uを除くCRDを実装):

MIT App Inventor 2で遊ぶ (GlobalChat 6)

MIT App Inventor 2で遊ぶ (GlobalChat 4 (5) - 再々追加 -)

MIT App Inventor 2で遊ぶ (GlobalChat 4 -追加-)

MIT App Inventor 2で遊ぶ (GlobalChat 4)

MIT App Inventor 2で遊ぶ (GlobalChat 3)

MIT App Inventor 2で遊ぶ (GlobalChat 2)

MIT App Inventor 2で遊ぶ (GlobalChat 1)


MIT App Inventor 2で遊ぶ (Space Travel 2)

2024-09-07 07:14:18 | 日記

小型の隕石を追加。大型、小型隕石ともに回転しながら迫ってくるように設定。粉砕した隕石の個数を表示。画面に表示されていないが制限時間(30秒)を設定。

制限時間に達するか、隕石に衝突したら「Game Over」。

アプリ実行のビデオ:

スクリーンのデザイン:

左上端の数字 0 は、粉砕した隕石の数を表示するもの。

                             

ブロック・コード:

追加した部分のみ。

小型隕石の追加:大型隕石と同様に設定したが、起点をずらし、また下に移動するスピードは若干遅くした。画像は同じものを使用し、サイズのみ変更。

1. 経過時間と制限時間を格納する変数timePassedとtimeLimitを設定。

「Start」ボタンをタップするとcountingTimeClockが動き出す。timeLimitまで来ると関数gameIsOverが実行される。

関数gameIsOverは、ClockおよびaccelerometerSensorを無効にする。

2. 粉砕した隕石の個数を格納する変数hitCountを設定

Canvasの上には、imageSpriteとBall(sprite)しか配置できない。要するに画像のみ。隕石を粉砕した回数も画像で作成し、30回までの画像をリスト形式で変数scoreImagesListに格納。粉砕回数=同リストのindex値、で画像を指定して左上端のimageSpriteに表示。

(なお、scoreImagesListとあるが、当初、粉砕回数をscoreとしていた名残り)

Ballは、宇宙船より発射する弾丸で、隕石に当たれば、hitCountが1ずつ増加していく。

1Trans.png, 2Trans.png, 3Trans.png, 4Trans.png, 5Transpng. . . . の画像は以下の通り。

                      ・・・・・・・

3. 大型(meteorite1)小型(meorite2)を回転させるブロック:

以下4つの画像を順番に表示し回転しているように見せている。変数animationFrames1またはanimationFrames2に、反復して1〜4の数字が割り当てられ、各画像ファイル名の中にある数字となり、画像が順番に表示される。

       meteo1.png                   meteo2.png                    meteo3.png                   meteo4.png

                             

4. 「Start」をタップすると、変数の初期化、ならびに無効になっていた背景を動かすmovaBGClock、隕石を動かすmeteorite1Clock/meteorite2Clock、宇宙船を左右に動かすAccelerometerSensor1、隕石を回転させるmeteorite1RotationClock/meteorite2RotationClock、時間を刻むcountingClockをそれぞれ有効にし、作動させる。

5. 「Game Over」ボタンをタップした時の動作:

隕石を粉砕した回数を格納する変数hitCountを0に初期化。その回数を表示するscoresImageSpriteに「0Trans.png」を割り当てて、0を表示させる。

 

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (Space Travel 1)