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

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

MIT App Inventor 2で遊ぶ (GlobalChat 2)

2024-08-10 08:53:31 | 日記

メッセージの削除は、当該メッセージの投稿者のみとした。(この種アプリでは、あまり意味はないが)

アプリ実行のビデオ:

(バックは、Googleに表示されている「Firebase Realtime Database」のページ)

スクリーンのデザイン:

変更点は特にないが、削除するアイテムのIDと投稿者名、および削除しようとしている者の名前をチェックするためのLabelを追加した。(赤点線枠内)

                                         

ブロック・コード:

追加・変更部分のみ。

1. 削除するアイテムのIDおよび投稿者名を格納する変数の設定

2. Listviewのアイテムをタップした場合、まず削除の是非を再確認するメッセージを表示。

削除するアイテムのIDおよび投稿者名に加え削除しようとしている者(ログインしている者)のニックネームをtestLabel (Label For Check)に表示。

3. 上記メッセージで「削除する」を選択した場合、投稿者名(deleteName)と削除しようとしている者(nickname)が同一であれば、Firebase所定のURL/MySecretMemo/ID.jsonに対しDeleteを実行。

同一でなければ、「このメッセージの作成者ではないので、削除できません。」を表示し、削除のリクエストはしない。

ListViewのアイテムを選択した状態を解放する。(ListViewのアイテムをタップした場合、当該アイテムの背景色がlight grayに変化するように設定してあるが、解放しなければ背景色がそのままとなる)

やはり、課題は、いつでもFirebaseとスムースにデータのやり取りができること。まだ、稀に不安定な時がある。

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

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

MIT App Inventor 2で遊ぶ (GlobalChat 1)

 

データベースに対するCRUD操作に関する以前のブログ:

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

MIT App Inventorで遊ぶ (Journal アプリ1C & R / REST API)


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

2024-08-07 14:13:11 | 日記

ゲームのレベル選択を追加。

アプリ実行のビデオ:

(ちょっとスコアーの数字がおかしいようですが。退屈なビデオです。)

スクリーンのデザイン:

レベルの選択を追加しただけ。

                                   

ブロック・コード:

レベル選択部分のみ。

1. 「遊び方」にゲームのレベルに関する記述を追加。

2. ゲームのレベルは、モグラの出てくる間隔を長くするか短くするかで調節。数字の単位はミリ秒。

3. 「Start」ボタンをタップした時にゲームのレベル(ClockのInterval時間)をセットする。

 

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

前回までのブログ:

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

 


MIT App Inventor 2で遊ぶ (GlobalChat 1)

2024-08-04 07:36:29 | 日記

Global Chatと呼ばれている(?)形式で、誰でもあらかじめ登録しておけばChatに参加できるという単純なチャット・アプリ。もちろん、push notificationなんて便利なものは備わっていない。pullしに行かないとダメ。あらかじめ登録しておいたニックネームを入力すればChat Roomにログインできる。チャットのメッセージが左右に分かれることもなく、リスト形式で表示される。

パスワード登録もなく、2〜3人の仲間内で使う「おもちゃ」、または秘密の連絡ツール?(作成途中で、なかなかうまくいかず、何度も中断があり、作成し始めてから結構時間が経過しているが、当初は、「MySecretMemo」と呼んでいた)。

Chatの内容はFirebaseのRealtime DBに保存されるので、Firebaseを通じてのコミュニケーションということになる。

今回は、DBを扱う時の基本4機能(CRUD:Create,Read,Update,Delete)のうち、U(Update)の更新機能を除く3機能を備えたもの。

アプリ実行のビデオ:

スクリーンのデザイン:

メインスクリーンとChat Roomのスクリーン(右側)

                                         

ブロック・コード:

既にCR(U)Dの部分については、以前取り上げているので、復習も兼ねることになる。

=>Screen1(メイン画面)

参加者のニックネームをリスト形式で変数registeredNamesに格納。登録されていないニックネームを入力すると、Warningが表示される。

Chat Roomに遷移する際、データとしてニックネームを渡す。

=>postsScreen

変数ならびにLsitView1を初期化する関数を設定しておく。

まず、TagListを取得。(Firebase RESTでデータをpostした際に各データに自動的に与えられるIDのリスト)

本アプリ用にはFirebaseのRealtime DB内のproject endpoint URLに「MySecretMemo」というdirectoryが設定されており、通常、Firebaseの所定のURL + MySecretMemo + .json でGETリクエストを行うと、MySecretMemo以下の全てのデータが返される。

しかし、「?shallow=true」を付加しておくと、MySecretMemo直下のデータのみを返してくれる。直下のデータとは、postした際に自動的に付されたID。(以下図)なお、実際に返ってくるデータは、[["-01g1UHk4sG5pttoICpb", true],[......],.....]のようにBool値とペアーとなったリスト形式となっており、IDのみを抽出するために、index=1 のデータのみを取り出している。(「when Web2.GotText」のcomponentの通り)

実際には、(ちょっと古いデータだが)以下のように各IDの下に具体的なデータが、キー/値の形式で格納されており、?shallow=trueを付けなければこれら全てが返される。設定したキーは、Date、Message、Nameの3つ。

Firebase データベース REST API の使い方等については、以前にも紹介した以下を参考にした。

Firebase Database REST API (Google)

Firebase Demo: No Security with Web Component (by METRIC RAT AI2)

 

 

そして、データを取得する。Clockを使っている理由は、今回、Firebaseとのデータの受け渡しがスムーズにいかない場合が多かったので、それぞれのデータの受け渡し時にClockを使って時間的余裕(約1秒:500ms x 2)を作るため。何の役に立つの?という疑問が湧いてくるかもしれないが、このようにすると割とうまくデータの受け渡しができるようになったのも事実。今回はやたらと使った。

全てのデータを受け取るので、?shallow=true の設定はなし。

データ取得に成功すれば、データを抽出してMessage, Name, Dateのアイテムごとの変数にリスト形式で格納。

                       *************** 以下 makeNameList、makeDateListの各関数が同様に定義。省略。 *******************

それら抽出されたデータをListViewに表示するため、関数makeFinalDataを実行し、同関数により統合されたデータ(finalData)をListViewに表示させている。なお、extensionを利用して、表示の順番を新しいものから古いものへとdescending order(降順)に変更している

関数makeFinalDataの内容:

Message, Name, Dateごとにデータを抽出し、適宜体裁を整えて変数finalDataへ追加している。Nameについては、現在ログイン中のメンバーであれば、「赤丸+Me」 を、出なければ Youを頭に付加している。

メッセージをポストする「send」ボタンをタップした時の動作:

現在の時刻、ニックネーム、メッセージをDictionary形式で所定のFirebase URL + 所定のdirectory.jsonにPOST。

「サーバーと交信中...」のメッセージが表示され、若干時間(約1秒:500ms x 2)をおいて関数reloadを実行。関数reloadは、データ取得(GETリクエスト)=>データのListViewへの表示を行う。

なお、Realtime Databaseにまだメッセージがない場合は、Firebaseの所定のproject URL + /<アプリ用の任意のDirectory名> + .jsonに対し、dictionary形式のデータと共にPOSTすると、自動的に<アプリ用のDirectory名>を作成してくれる。(今回のDirectory名は、MySecretMemo)

ListViewのアイテムをタップして選択=>削除の可否を聞くメッセージが表示 =>削除の対象となるメッセージのID(tageList)を取得

「削除する」を選択=> 所定のFirebase の project URL + 所定のdirectory + /ID + .jsonに対しDeleteを実行

若干時間(約1秒:500ms x 2)をおいて、再度関数getTagList、関数getDataを実行する。(関数reloadを実行しても同じ)

Firebaseとのデータのやり取りがなかなかうまくいかない時もあるので、そのような時は、この「Reload」ボタンをタップ。

postするメッセージを書き込むmessageTextBoxに書き込んだテキストを削除する「delete」ボタン(X)の動作

「Log out」ボタン:ニックネームを入力する最初の画面に戻るボタン

 

 

<課題>

1. 誰でも誰のpostでも削除できるようになっているが、ログインした人の自分のpostしか削除できないようにしたい。

2. まだうまくデータを取得できないことがまれにあるので、Firebaseとの間のデータの受け渡しを100%安定させたい。

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

データベースに対するCRUD操作に関する以前のブログ:

MIT App Inventorで遊ぶ (Journal アプリ4 D / REST API)

MIT App Inventorで遊ぶ (Journal アプリ3 U / REST API)

MIT App Inventorで遊ぶ (Journal アプリ2)

MIT App Inventorで遊ぶ (Journal アプリ1C & R / REST API)

 


MIT App Inventor 2で遊ぶ (YouTube より動画削除通知を受け取る)

2024-08-02 15:58:27 | 日記

先ほど、YouTubeより以下のような連絡を受け取った。

Movie World 9は、MIT App Inventor 2で遊ぶ (THE MOVIE DB 9) にアップした動画。

***** Quote ***** (rcvd 2024/8/2 13:11)

Movie World 9 はコミュニティ ガイドラインに準拠していないようです。コミュニティの安全を確保するため、このコンテンツを YouTube から削除しました。

問題の内容
 
お客様のコンテンツは YouTube の有害で危険なコンテンツに関するポリシーに準拠していないと判断されました。

本来は有料の音声コンテンツ、映像と音声のコンテンツ、ソフトウェア、サブスクリプション サービス、ゲームに、不正に、または無料でアクセスする方法を説明するコンテンツは、YouTube で許可されていません。

***** Unquote *****

そして、再審査のリクエストをしたところ、

***** Quote ***** (rcvd 2024/8/2 15:04)

以下に対する再審査請求の審査が完了しました。
 
動画: Movie World 9

YouTube チームによる慎重な審査の結果、お客様のコンテンツは有害で危険なコンテンツに関するポリシーに違反していると判断されました。この度の措置にご満足いただけない点があることは重々承知しております。しかしながら、YouTube をすべてのユーザーにとって安全な場所にするために必要な対策を講じるのが私たちの責務です。

***** Unquote *****

の返事を受け取った。

 

ビデオのどの部分が「有害で危険なコンテンツに関するポリシーに違反している」か不明だが、映画のポスターとかあらすじとか俳優の写真などが表示されているので、危なっかしい(言い換えれば誤解を与えやすい)内容であったことは事実。

まあ、こんなこともあるでしょう。

 


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

2024-07-31 18:28:48 | 日記

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

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

これも、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のマスを誤ってタップした時は、スコアが2点以上の時に限り1点減点する。

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

 

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