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

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

MIT App Inventor 2で遊ぶ (T-Rex Jump 2 - や〜っと -)

2024-12-18 22:30:37 | 日記

や〜っと、横向き画面 (landscape orientation) で背景を右から左へ動かし、T-Rexをジャンプさせることができるようになった。

問題は、現在の状態では、ゲーム・アプリとして成り立っているとは言い難いこと。T-Rexがサボテンにいとも簡単にぶつかってしまい、ゲームが終わってしまう。T-Rexやサボテンの大きさ、背景の移動のスピードなどをもう少し調整する必要があり。=>次回に向けた検討課題。

横向き画面 (landscape orientation)だと、どうしてもジャンプの滞空時間が短くなってしまうのでタイミングを調整するのが難しい。以前作成したマリオの場合、縦向き画面(Portrait)なのでジャンプの時間を長く取ることができて調整がやりやすかったのではないかと思う。

アプリ実行のビデオ:

スクリーン・デザイン:

これではあまりわからないので、

アプリを立ち上げた時のスクリーンショット(タイトルの右横のスクリーンの横幅およびキャンバスの横幅がまだ表示されていない。キャンバスの幅をスクリーンの幅の3倍に設定するブロック・コーディングで1000ミリ秒X4 =4秒を準備時間としてセットしてあるのでこの準備時間が経過しないと数値が表示されない。お手本YouTuberのTutorials Azaotlさんがマリオゲームで設定していた時間は約30ミリ秒X4=120ミリ秒くらいだったと思う。設定されることをはっきりと確認したかったので長い準備時間を設定した。)

4秒後セットアップが終了し、スクリーンの幅 (870pixels) およびキャンバスの幅 (2609pixels) の数値が表示された時の画面

 

ブロック・コード:

ブロック・コード自体は、T-Rex Jump1 や以前にアップしたマリオ・シリーズのブロックと大きな相違点はないので、要点のみ。

いずれのブロック・コードもYouTuberのTutorials Azaotlさんに教えてもらった内容で、私のオリジナリティーは、ほとんどありません。ここでブロックを紹介するのも気が引ける感じ。

canvasの幅をスクリーンの幅の3倍に設定

変数loadingTimes:関数setScreenを実行させた回数を格納。setScreenを4回実行。4回も実行する必要はないが、実験では少なくとも3回程度実行しないと3倍に設定することはできなかった。

関数setScreenの内容

赤黄点線部分でキャンバス幅をスクリーンの3倍に設定。他の背景などもサイズと位置を設定。

これは、マリオの時と同じだが。砂漠の背景desertSprite1とdesertSprite2を横方向に連結したが、連結した結合部分にどうしても空白が生じるため裏にdesertFillingSprite(単なる直線)を敷いてある。

サボテンも同じような内容の関数setCactus(省略)を実行してサイズおよび初期の位置を設定。

全ての「舞台装置」のサイズ、位置が設定された後でこれら「舞台装置」を表示する関数makeBGVisibleを実行。(cactusSprite2は、非表示)

 

T-Rexの位置(Y座標値)(=地面の位置)の設定など(スクリーンの初期設定)

ちょっと見にくいが。。。

スクリーンの初期設定として、全ての背景(砂漠およびサボテン)とT-Rexを非表示に設定。(後で、これらのサイズおよび画面上の位置設定が完了してから表示)=> 背景色の設定。=> 上記loadingClockを有効に。=>T-RexのY座標値を「(スクリーンの高さ)ー(タイトルが表示されている上部のHorizontalArrangementの高さ)ー(T-Rex自体の高さx1.2)」に設定(なお、T-RexのY座標値とは、T-Rexのimageの左上端のY座標値)

(サボテンは2つあるが、まだテスト段階で2つあるとややこしいのでcactusSprite2は非表示のままにしてある)

背景およびサボテンを右から左へ動かす設定

変数speedBG:背景(砂漠、サボテン)が動くスピード。左方向に動かすので負数(-40pixels)。

moveBGClockのInterval timeは120ミリ秒に設定されているので、120ミリ秒毎に左方向へ40pixels移動する。

キャンバスの左端(x座標が0)まで移動すると初期の位置に戻る。それまでは、砂漠の背景は40pixelsずつ、サボテン(cactusSprite1)は20pixelsずつClockのInterval timeごとに左へ動く。(なお、cactusSprite2も設定されているが、非表示としているので画面には現れない。)

 

以上いくつかのポイントを簡単に図式化すると、

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

サボテンにぶつかっても、まだ足を動かしているT-Rex、改善すべきところ満載という感じ。

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (T-Rex Jump 1)

同じ系統のブログ(参考):

MIT App Inventorで遊ぶ (マリオ 4)

MIT App Inventorで遊ぶ (マリオ その3)

MIT App Inventorで遊ぶ (マリオ その2)

MIT App Inventorで遊ぶ (マリオ その1)

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

All block codes in this blog originally crafted by Tutorials Azaotl and adapted to the  above app (T-Rex Jump) with slight modifications.


MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 3-)

2024-12-14 21:53:56 | 日記

編集画面(更新、削除)を追加。ブロック・コードは、以前のブログと重複箇所多い。

アプリ実行のビデオ:

またミラリングアプリのX-Mirageがうまく作動しなくなったので、今回、スマホの画面録画とMac側のウエッブサイト(Firebase)録画をそれぞれの録画機能を利用して行い、動画編集アプリで結合したが、微妙に同期がずれている感じのところができてしまった。

スマホとパソコンで同時に録画をスタートさせたつもりでも、若干のずれができてしまう。

スクリーン・デザイン:

編集(更新、削除)画面:

TextBoxが4つあり(赤黄点線部分)、上から、

 editFirstPartTextBox1:最初の句を表示および更新可

 editSecondPartTextBox2:次の句を表示および更新可

 editFullTextTextBox3:フルテキスト表示のみ(更新不可)

 editMeaningTextBox4:ことわざの意味を表示および更新可

なお、このスクリーンショットには表示されていないが、下部にListViewが配置されており、更新、削除対象のことわざをタップして選択することになる。

ブロック・コード:

関数initMainScreen:編集画面(+追加画面)よりメインスクリーンに戻る際に、メインスクリーン側のLabelを初期化する。

関数celarEditScreen:編集画面のLabelを初期化する。

戻るボタン をタップした際の動作を設定=>Labelなどの初期化、キーボードの非表示、編集画面の非表示、メインスクリーンの表示、メインスクリーン側Labelの初期化および関数getTagList(Firebase Realtime DBより最新データの取得)を実行

メインスクリーン側で「Edit」ボタンをタップした時の動作=>メインスクリーンの非表示、編集画面の表示、編集画面でフルテキストを表示するTextBoxをReadOnly(更新不可)に設定および関数getTagList(Firebase Realtime DBより最新データを取得)を実行

変数targetID:更新、削除対象のことわざデータのIDを格納

ListViewより更新、削除対象データを選択=>ListViewのSelectionIndex(選択したデータのListview上でのindex=データベース上のindex)をキーにして最初の句(firstHalfList)などのリストより当該データを抽出し、該当TextBoxに表示。また、同様にIDも取得。

変数updatePost:更新データ(修正ない場合は現在のデータ)を格納

Editボタンをタップした時の動作を設定。

所定のURLに更新対象データのIDをパラメーターに追加 => 変数uploadPostに、データベース側で設定されているキーに対応するデータ(最初の句、次の句、フルテキスト、意味)を格納 => PUTリクエストを実行 => キーボードを收める => 変数の初期化後、関数getTagListを実行して更新後のデータを取得し、ListViewも更新される。

Deleteボタンをタップした時の動作を設定。

削除対象データの内容を表示して、削除実行の確認を要求するポップアップが表示される。=>「削除を実行」をタップした場合は。次のイベントハンドラー (When Notifier1.AfterChoosing)に移る。=>「削除を取り消す」または「キャンセル」ボタンをタップした場合は、何も実行されずにポップアップが消える。

「削除を実行」をタップした時は、所定のURLに削除対象のデータのIDを追加してDELETEをリクエストする。

削除実行後は、変数などの初期化を行った上で関数getTagListを実行する。この関数を実行することにより、更新されたデータを取得し、ListViewのデータもリアルタイムで更新される。

今回で、Firebase Realtime DBに対するCRUD(Create,Read,Update,Delete)は4回目くらいになると思うが、かなり慣れた。Realtime DBの代わりにFirestore DatabaseやStorageなどが使えるようになれば、もっと色々なことができるようだが、残念ながら現時点の私の知識では難しいようだ。

<余談>

旧聞になってしまった感があるが、米国大統領選挙にちなんで歴代の大統領に関する検索アプリを作ろうと思った。しかし、データ自体が結構複雑で、データ整理に四苦八苦しているところ。スプレッドシート(Mac同梱アプリのnumbers使用)を作成し、csvあるいはJSON形式に変換の上、利用。。。と考えたところまでは良かったが、データがスプレッドシート上でうまく整理できない。

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 2-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 1-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 3 -U&D of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 2 -R of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 1 -C of CRUD-)

 


MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 2-)

2024-12-09 14:29:48 | 日記

Layoutのcomponentを使って複数画面の「ことわざ遊び-英語編-」を作ってみた。

アプリ実行のビデオ:

スクリーン・デザイン:

左から、ランディング・ページ(1600ミリ秒経過後メインスクリーンに自動的に遷移)、メインスクリーンの初期画面(クイズの画面)、メインスクリーンのデータ追加画面

なお、メインスクリーンの編集画面(更新・削除)は次回以降の予定。

                                         

ブロック・コード:

基本的にすでにこのブログで紹介したブロック・コードが多く、かなり重複していますが。。。

ランディング・ページ =>

画面初期化時にClock1を有効にする。intervalはあらかじめ400ミリ秒にセット。

画面遷移のタイミングを決める変数countを0で初期化。

countが4以下の場合は、400ミリ秒毎にcountの数値を1ずつカウントアップする。

countが4超となったら、Clock1を無効とし、メインスクリーンに遷移する。

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

クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング((Firebase Realtime DBよりデータを取得し、項目毎にリスト形式の部分データを抽出)=>

この部分は以前のブログの内容と同じですが。

関数getTagList:各データのIDリストを取得するために所定のURLに対しGETのリクエストを行う。パラメーターshallowをtrueにし、IDのみを取り出すようにセット(既出)。

取得するTag List(データのIDリスト)は以下のようなDictionary形式なので、keyのみを取り出すとIDリストとなる。

tagListからデータの個数(length of list)を抽出し変数lengthOfDataに格納。そして、さらにデータ自体を取得する関数makeGETRequestを実行する。

関数makeGETRequest:パラメータshallowを外して、各データの詳細を取得するために所定のURLに対しGETリクエストを行う。

正常にデータを取得できたら、デコードを行った後、各項目毎のデータを抽出する。

関数makeFirstPartList(最初の句)、関数makeSecondPartList(次の句)、関数makeFullTextList(ことわざの全文)、関数makeMeaningList(ことわざの意味)、関数getRandomlyChosenFirstPart(任意に取り出した最初の句)を実行し、それぞれ変数にデータを格納する。

なお、メインスクリーンが表示されている場合は、mainListPickerに変数secondHalfListの値を渡し、追加画面が表示されている場合は、checkDataListViewに変数fullTextListを渡すようにセット。(赤黄色点線部分)

関数makeFirstPartListは以下の通りで、各データのIDをキーにしてデータを抽出しリスト形式で変数に格納。

なお、他の関数も内容的には同じなので省略形のみとした。

関数getRandomlyChosenFirstPartでは、extensionを利用して「最初の句」のリストをシャフルしてindex 1(最初のデータ)を取り出している。=> mainFirstHalfLabel(最初の句)に表示されるので、ユーザーは「Tap & pick second half」ボタンをタップし表示されるリストより「次の句」を選択することになる。

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

メインスクリーン(クイズの画面)=>

解答が正しい場合と間違った場合に再生する効果音をMultimedia ComponentであるSound1およびSound2にセットする

ことわざのデータ関係の変数およびListViewを初期化。

変数AuthStatusをfalseで初期化しセットする。(追加画面に入るためにはパスワードが必要だが、一度パスワードを入力すれば、追加画面からクイズ画面に戻って、再度追加画面に遷移する場合パスワードの入力を不要にするために使用)

「Add」ボタンをタップした際の動作を設定。

AuthStatusがtrueの場合=>変数を初期化。関数makeAddSCreenVisibleを実行し、メインスクリーンを非表示に、追加画面を表示にそれぞれ変更する。

AuthStatusがfalseの場合=>追加画面に入るためのパスワードを入力した事がないので、パスワードの入力を促すポップアップが表示される。

 

パスワードを促すポップアップで、パスワード(123)が正しく入力されれば、変数AuthStatusをtrueに設定。関数makeAddSCreenVisibleを実行し、変数の初期化、メインスクリーンの非表示、追加画面の表示を行う。パスワードが空白あるいは間違っていれば、正しいパスワードの入力を促すポップアップを表示。

関数makeAddScreenVisible:変数の初期化、Labelの初期化、メインスクリーンの非表示、追加画面の表示をそれぞれ行う。

変数startButtonStatusをfalseで初期化。これは、「Start」ボタンの表記を「Start」あるいは「Next」に変更するタイミングをコントロールするためのもの。

「Start」ボタンをタップすると、初回は、「Start」ボタンの表示をStartよりNextに変更。=> statusButtonStatusをtrueにセット。=> 変数などの初期化 => 関数getTagListを実行してデータを取得(この関数および関連ブロックは冒頭の「クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング」を参照)

任意に選択された最初の句に続く次の句をmainListPickerより選択=>変数answerFullTextに当該最初の句と選択された次の句を結合して格納。=>mainFullTextLabelに結合したテキストを表示=>最初の句のindexをキーにして、正しい次の句を取り出し、mainListPickerで選択されたものと同じであれば正解なので、その場合は、mainResultLabelに「Correct」と表示し、同時にことわざの意味もmeaningLabelに表示する。

=>正解でなければ、再度次の句の選択を促すポップアップを表示する。

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

データ追加画面 =>

メイン画面に戻るボタンをタップした時の動作の設定:

取得データを項目毎に格納する変数や追加画面のLabelの初期化(関数clearAddScreen)。追加画面の非表示とメイン画面の表示。

メイン画面側のLabelの初期化。これら初期化を行った後、関数getTagListを実行して追加画面で追加したデータなどを含め改めて最新のデータを取得する。

ちょっとブロックがぼやけてしまってわかりにくいが、追加画面の3つの入力画面にテキストの入力がされていれば、それら入力データをデータベースの項目(キー)の値としてセットし変数postData(Dictionary形式)に格納。

そして、所定のURL(赤黄点線部分)に対しpostDataのデータをPOSTする。(赤白点線部分)

「Clear」ボタンの動作設定

 

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

スクリーンを一つだけにして画面展開をするメリットはあるが、今回のようなの独立した機能を持った画面の場合は、コードは重複するかもしれぬも、スクリーンを分けた方が良いと思われる。

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 1-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 3 -U&D of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 2 -R of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 1 -C of CRUD-)

 


MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 1-)

2024-12-01 07:17:07 | 日記

今回は、番外編として、一つのスクリーンで複数の画面を作るということについて復習してみたい。

「新ことわざ遊び」では、メイン画面に、データ追加画面、データ編集画面(更新および削除)の3つのスクリーンで構成し作成した。複数スクリーン間での関数、変数の使い回しができず、かなり重複したブロック・コードとなった。

そこで、スクリーン一つで作り直してみることとした。

レイアウト用のcomponentであるVerticalArrangementを縦に3つ配置。

VerticalArrangement(垂直配列)とは、MIT App Inventor2(日本語版)によれば、

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

垂直配列

上下に表示されるコンポーネントを配置する書式設定要素です。 (最初の子コンポーネントは一番上に保存され、2 番目の子コンポーネントはその下に保存されます。) コンポーネントを並べて表示したい場合は、代わりに horizontalArrangement(横配置) を使用してください。

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

要するに、コンポーネントを縦方向に配置する場合に使うのがVerticalArrangement(垂直配列)で、横方向に配置する場合に使うのがHorizontalArrangement(横配列)。

各VerticalArrangementの高さを「Fill parent」に設定。「Fill parent」は、使うことができるスペースいっぱいに高さを設定することになる。

このように設定すると、以下左図のように、3つのVerticalArrangementがスクリーンの高さを1/3ずつ占拠する結果となる。

      

このようにスクリーンを3分割しているのは、各VerticalArrangementのVisible属性をtrue(上記ではチェックが入っている状態)になっていることによる。

ここで、Layout Componentについて復習してみると。。。

Layout Component の VerticalArrangement と HorizontalArrangement にはスクロールタイプのものもある。スクリーン・キャプチャーでみてみると次の通り。上から、VerticalArangement、VerticalScrollArrangement、HorizontalArrangement、HorizontalScrollArrangementとなる。もちろん、これらlayout componentの中にlayout componentを配置し、さらに複雑なレイアウトを設定することもできる。

本題に戻り、今回の「ことわざ遊び」の画面に合わせると下の左図通りとなる。

そして、VerticakArrangement2 (Add Screen)およびVerticalArrangement3 (Edit Screen) のVisible属性をfalseに設定(非表示)すると右図の通りとなり、メインスクリーンのみの画面となる。

             

後は簡単。

「ADD」ボタンをタップしたら、VerticalArrangement1 (Main Screen)を非表示 (visible = false)として、VerticalArrangement2 ( Add Screen) を表示 (visible = true) とすれば、以下の図のように、あたかも画面展開をしているように見える。これは、今まで「お天気アプリ」、「MovieDB」など色々なアプリで使ってきたやり方で特に目新しいものではないが。

       

この方法の利点は、スクリーンが一つなので関数、変数の使い回しができること。例えば、Public APIを利用している場合など、データを取得する関数は一つ作っておけば何度でも使い回しができる。

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

次回 新ことわざ遊び -番外編 2- では、この方法で、実際に「ことわざアプリ(英語版)」を作ってみる予定。

(実際には、ランディングページがあるので2つのスクリーンとなる予定)

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

<余談>

以前にも紹介したが、MIT App Inventor2は簡単に言語の切り替えができますよ!

ユーザーインターフェイスのメニューを英語と日本語で見たら以下の通り。

英語そのままのものもあるし、全体的に慣れのせいか英語の方がしっくりくる。

                               

 


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

2024-11-27 07:17:15 | 日記

対象都市名の横に国名を表示。都市の位置をgoogle map上に表示。いずれも既にこのブログで紹介したもので、目新しいものはない。

なお、google mapの利用方法については、以前にも紹介した通り、 こちらのブログ に教えてもらった。

アプリ実行のビデオ:

任意の都市名を入力して検索する場合の「Fetch Data」ボタンの表示が、言語を日本語に変更してもそのままになっていたことを発見。次回修正したい。

スクリーン・デザイン:

すでに紹介済みのものもあるが、左より、アプリ立ち上がり時の画面、言語選択後の初期画面、左上の拡大鏡アイコンタップ時遷移する任意検索画面、Google Map表示画面。

なお、このスクリーンショットではわからないが、City Name:の右側には都市名に加え国名のLabelが追加されている。

               

ブロック・コード:

国名と対象都市の経度緯度を取得する部分及び地図を表示するmapScreenに関する部分のみ。

メインスクリーン=>

お天気データの取得と同時に、アプリに同梱の国名・国コード一覧表(JSONファイル)を読み込む。

なお、iso_countryCode.jsonは、以下のような内容で、英日の国名、3文字または2文字のISO国コード、地域名で構成されている。

[
 {
   "countryNameJp": "アイスランド",
   "countryNameEn": "Iceland",
   "ThreeDigit": "ISL",
   "TwoDigit": "IS",
   "Area": "北ヨーロッパ"
 },
 {
   "countryNameJp": " アイルランド",
   "countryNameEn": "Ireland",
   "ThreeDigit": "IRL",
   "TwoDigit": "IE",
   "Area": "西ヨーロッパ"
 },

....

データを取得した後、関数getTargetCityLonLatを実行し、対象都市の緯度経度のデータを抽出。

また、2文字の国コードをパラメーターとして関数getCountryNameを実行の上、国名(選択言語により日本語または英語)を抽出。=>LabelのcountryNameにセット。いずれも赤黄点線部分。

iso_countryCode.jsonよりデータを取得し、デコードの上、変数countryListJSONに格納。

国名の日本語および英語名を格納する変数countryNameJpおよびcountryNameEnを設定。

関数getCountryName=>パラメータ(abbrev)として受け取る2文字の国コードをキーにして、データをスキャンし、日本語名および英語名を抽出・取得。

地図画面に遷移するボタン「jumpToMapImageButton」をタップした際のイベントハンドラーの内容:

受け渡すデータとして、対象都市の緯度経度、都市名、日英の国名(括弧でくくり)をstartValueに格納。

以下は、関数getCountryTwoDigitおよび関数getTargetCityLonLatの内容。取得したJSONデータより2文字の国コードと対象都市の緯度経度を抽出。

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

Googel Map画面=>

メイン画面より遷移あった際に受け取るデータ(対象都市の緯度経度、都市名、国名)を変数に格納し、関数showMapを実行する。

Googel Mapのズーム・レベルを15に設定し変数に格納。

関数showMap:

所定のURLに緯度経度、ズームレベルおよびdataTypeをnormalとしてセットし、mapを呼び出す。また、cityCountryLabelに都市名と国名(括弧内)を表示する。

Google MapのdataTypeを格納している変数dataTypes(Dictionary型)。内容は、この使い方を教えてもらったブログに書いてあった通り。衛星写真などGoogle Mapでみる地図タイプを選択できる。

メイン画面に戻るbackButtonを設定。

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

次回は、表示するデータを増やしたい。

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

前回までのブログ:

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

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

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