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

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

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)

 

 


MIT App Inventor 2で遊ぶ (GlobalChat 6)

2024-09-04 07:10:20 | 日記

GlobalChat 6 用に、Firebase RealtimeDatabase内に、新たにチャットを保存する「GlobalChatRoom」とnicknameを保存する「NickName List2」を設けた。

個人情報として、nicknameの他に趣味とアバターの登録を追加した。

新たに登録したnicknameでツイートを追加したら、うまくいかなかったが、「Reload」ボタンをタップしたら追加したツイートも表示された。今回Firebase Realtime DBに新しくdirectoryを設けたが、その途端、やりとりがうまくいかない時が出てきた。(ビデオの通り)う〜ん、難しい。前回のGlobalChat 5 とブロック・コードの内容も同じなのに????

アプリ実行のビデオ:

スクリーンのデザイン:

                                                     

ブロック・コード:

追加・変更部分のみ。

1. nicknameの入力boxとしてPasswordTextBoxを使っていたが、入力内容を非表示にする理由に乏しいので、表示することとした。(通常のtextBoxにすればよのだが、とりあえず「入力内容を表示」に設定を変更した)

2. avatarの選択ボタン(以下5つ)をリストに保存(今のところnicknameの登録も5人に制限)

3. 変数avatarNumberを作成し、選択されたavatarの順番(1から5まで)を格納。

選択したavatarの番号がすでにFirebase Realtime DBに保存されている場合は、タップした番号はすでに選択済みなので、他のavatarを選択するよう促すメッセージを表示。選択されていない場合は、avatar番号(index番号)をavatarNumberに格納し、label componentであるselectedAvatarNumberに表示。

4. 「Register」ボタンをタップすると、管理者パスワードの入力を促すウインドウが表示。

管理者パスワードである「123」を入力すれば、nicknameに加え、hobyyとavatarNumberがFirebase Reatime DBの所定のURLのDirectory (NickNameList2) にPOSTされる。

                                                             

5. 「List of registered nicknames」のListViewにnicknameとともにhobbyとavatar画像を表示させるため、Firebase Realtime DBより取得したデータよりhobbyのみを取り出し変数hobbyListに格納。

また、同じく、Firebase Realtime DBより取得したデータよりavatar番号のみを取り出しリスト形式でavatarListに格納。

6. Firebase Realtime DBより取得したデータよりnickname, hobby, avatar番号のデータを統合してリスト形式で変数dataForListViewに格納。avatar画像については、「avatar」 + avatar番号 + 「.png」で画像のファイル名を作成。

 なお、このアプリが立ち上がった時に、Firebase Realtime DBよりnickname, hobby, avatar番号を保存しているディレクトリー「NickNameList2」よりデータを取得するが、そのデータよりnickname, hoby, avatar番号に分けてそれぞれをリスト形式で保存する関数makeNicknameList, makeHobbyList, makeAvatarList(上記)を実行しておく。またそれらリストを統合しLIstViewに表示するためのリストを生成する関数makeDataForListViewも実行する。

ブロックの説明がわかりにくいが、要するに、アプリ立ち上げ時にnickname, hobby, avatar番号の情報を取得し、nicknameについてはログインのためのデータとして使用し、個人の情報の登録では、List of registered nicknamesにこれら情報を表示。また、新規登録した場合は、しかるべきFirebase 側のURLにデータをPOSTし保存。保存されれば、List of registered nicknamesが更新される。

List of registered nicknamesは、今やnicknameだけではないので、変更した方が良いかもしれない。

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

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

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)