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

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

MIT App Inventor 2で遊ぶ (Slot Machine 1)

2025-02-07 16:18:26 | 日記

まずはスロット・マシンを動かすだけの単純なもの。賭け金の設定など、次回はもう少し「賭け事」らしくしたい。

アプリ実行のビデオ:

スクリーン・デザイン:

tabletサイズでのスクリーンショット。

                         

ブロック・コード:

変数images:使用するimageのファイル・リストを格納。

3つのスロットにそれぞれシャッフルされたimageリストをセットするための変数

変数lengthOfImagesList:imageの個数を格納

画面初期化時に使用する3つのClockのintervalを100ミリ秒に念のため設定するとともにimageの個数を変数lengthOfImagesListにセット。(intervalはあらかじめデザイナーパネルの属性設定欄で設定ずみではあるが)

関数clearSymbolImages:imageブロックの画像の初期化

「Spin」ボタンをタップした時の動作:

関数clearSymbolImagesを実行してimageブロックを初期化=>3つのClockを有効に=>各スロットごとにimageリストをシャッフルしてそれぞれの変数にセット (Clockを有効にしたので3つのスロットが動き始めるが、シャッフルを先に実行するべきであった。)

各スロットごとにシャッフルされたimageを順番に表示させる。

各スロットの下に配置された「Stop1~3」ボタンをタップしたら、当該のClockを無効にしてimageを表示させる。

なお、3番目の「Stop」ボタンをタップした時は、関数checkImagesを実行して表示されている図柄から勝ち・負けを判定して結果を表示する。3つとも同じ図柄の場合は、「Perfect!」でそのほかは「Try again!」

関数checkImages:単にすべての図柄が同じかどうかをチェックしている。

 いまのところ、Stopボタンは、左から右へ順番にタップする必要があるので、任意の順番でタップできるようにしたい。また、冒頭でも触れた通り、「賭け事」の「賭ける」部分が欠如しているので追加を検討したい。

 


MIT App Inventor 2でもできるかやってみた (Small Apps 3 じゃんけんゲーム1)

2025-02-02 07:24:50 | 日記

今回は、「9 HOURS of Python Projects - From Beginner to Advanced」#3 - Rock, Paper, Scissors (Easy)。プログラミング初心者向けTutorialsには必ずあると言ってもよい「じゃんけんゲーム」。

これもシンプルなゲーム。

アプリ実行のビデオ:

スクリーン・デザイン:

左端の初期画面の中で下部に配置されているボタンのうち「3」をタップすれば右側の画面に遷移する。

                               

ブロック・コード:

初期画面で「3」をタップした時に関係するブロックのみ。

「3」をタップしたら、関数makeVAVisibleがパラメーターとして「1VA3」を受け取り実行。また、関数initButtonImageを実行して、関係のButton、Image、Labelを初期化。

3つのボタン(グー、チョキ、パー)のリストを変数buttonListに格納。

変数userPickにプレイヤーがタップしたボタンのindex (上記 buttonList) を格納。

generic componentである「when any Button.Click」eventを利用。

関数initButtonImageを実行し、関係のボタンimage、Labelなどを初期化。=>タップ(Click)されたボタンが、rockButton, scissorsButton, paperButtonのいずれかの場合、以下の通り当該ボタンのimageの背景を色付きのimageに設定する。

 >>>>> 

=>関数makecomputerChoiceを実行して、1、2、3の中から取り出したランダムな数字をindexとして変数gameImageList(下記)よりimageをcomputerChoiceImageにセットする=>関数judgeWinOrLoseを実行し勝ち負けを判定して、その判定に応じてwinOrLoseLabelに結果を表示する。

関数initButtonImageの内容

変数gameImageListに「グー、チョキ、パー」の画像ファイル名のリストを格納。

変数computerChoiceImage:コンピューターがピックアップした任意の数字にマッチする画像ファイルを格納。

変数computerPick:コンピューターがピックアップした任意の数字を格納。

関数makeComputerChoice:

1〜3の中の任意の数字を取得して変数computerPickに格納。gameImageListよりindexが変数computerPickの数字の画像ファイルを変数computerChoiceImageにセットし、同画像をcomputerChoiceImageに表示。

関数judgeWinOrLose:

以下のブロックの通り、ユーザーの選択とコンピューターの手を比較して、その結果に応じてwinOrLoseLabelに勝敗を表示。

「リセット」ボタンをタップした時の動作=>関係するButton、Image、Labelを初期化する関数initButtonImageを実行。

 

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

前回までのブログ:

MIT App Inventor 2でもできるかやってみた  (Small Apps 2 数当てゲーム)

MIT App Inventor 2でもできるかやってみた  (Small Apps 1 略語クイズ)

 


MIT App Inventor 2でもできるかやってみた  (Small Apps 2 数当てゲーム)

2025-01-28 11:38:54 | 日記

今回は、数当てゲーム。「9 HOURS of Python Projects - From Beginner to Advanced」#2 - Number Guessing Game (Easy)

シンプルなアプリなので特に問題となるような点はなかった。

アプリ実行のビデオ:

スクリーン・デザイン:

左端:アプリの初期画面  中央・右端:初期画面で2をタップしたときに表示されるアプリの画面

     .   

       

ブロック・コード:

上限 (topOfrange) をインプットする=>0〜上限の間の数字から無作為に選択された数字を当てるゲーム。

上限の数字を格納する変数topOfRange、無作為に選択された数字を格納する変数randomNumber2を0で初期化。

関数clearVarsVA2:変数の初期化とTextBoxを空白で初期化。testLabelVA2はテスト用のLabelで、アプリ実行時には非表示とした。

アプリの初期画面で「2」のボタンをタップした時の動作を設定。

変数makeVAVisibleにパラメーター「1VA2」を渡して実行。=>explanationTextboxVA2に「Computer picks up a number between 0 and top of range number」を割り当てる。=>whatToDoTextBoxVA2に「Please input a number you think the computer has picked up from between 0 and top of the range you've specified」を割り当てる。 画面への表示は以下の通り。

                                                      .

既に前回紹介済みの部分。

パラメーターとして「1VA2」を渡し、関数makeVAVisibleを実行し、subScreen1VA2を表示する。他の画面については、初期画面も含め非表示とする。

「Let Computer Pick」ボタン (pickButtonVA2) をタップした時の動作を設定。

topOfRangeTextBoxが空白ではなければ、0〜上限(topOfRange)の間で無作為に選ばれた数字を変数randomNumber2にセット。

「Check」ボタン (checkVA2Button)をタップした時の動作を設定。=>コンピューターが生成し任意の数字 (randomNumber2)とmyGuessTextBoxに入力した数字が同じであれば、「You got it!」のやったね!メッセージを表示。=>入力した数字が任意の数字より大きい場合は、「Your guess is bigger than the computer-picked number. Make a guess again!」を表示。=>入力した数字が任意の数字より小さい場合は、「Your guess is smaller than the computer-picked number. Make a guess again!」を表示。

「Reset」ボタン (resetVA2Button) をタップした場合の動作。関数clearVarsVA2 (変数の初期化とTextBoxを空白で初期化)を実行し、topOfRangeTextBoxにカーソルを戻す。

 

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

前回までのブログ:

MIT App Inventor 2でもできるかやってみた  (Small Apps 1 略語クイズ)

 


MIT App Inventor 2で遊ぶ -番外編1- (私の道具箱)

2025-01-28 11:38:27 | 日記

以前、MIT App Inventor 2でアプリを作成していく際に参考にしたウエッブサイト、YouTubeなどをアップしたことがある。

今回はハードも含めて「私の道具箱」というタイトルで再度まとめてみた。

1. パソコン:

    1-1 MacBook Pro 13-inch M1 2020 メモリ : 16GB(メイン)

    1-2 MacBook Pro (Mid 2012) 2.3 GHz クアッドコアIntel Core i7 メモリ:16GB (古い古いCanon printer MP470専用)

    (2012年以前は、一時期Macを使った以外は主にNEC、Gateway、Dell、日立などのWindows PCを使用。)

2. スマホ:

 2-1 モトローラmoto g53y 5G(MIT App Inventor2で作成したアプリのシミュレーション用およびアプリのインストール先) 

    2-2 アップルiPhone XR(普段使いのスマホ)

3. パソコンのアプリ:

 3-1 Affinity Designer 2(アイコンその他画像の作成・修正・追加)

 3-2 Affinity Photo(背景削除、画像の修正など)

 3-3 Numbers(Macのスプレッドシート、csvファイルの作成など-無料-)

 3-4 画面のビデオ・静止画キャプチャ(Mac同梱のアプリ-無料-)

 3-5 Davinci Resolve 19(ビデオの編集-無料-)

 3-6 テキストエディット(JSONファイルも含めテキストファイルの内容確認他-無料-)

    3-7 X-Mirage (スマホ画面をパソコンに映してくれるミラリング・アプリ。最近調子が悪い)

4. MIT App Inventor YouTube Tutorials(Tutorials Azaotlを除き、最近はほとんど視聴することもなくなったが):

    The Coding Bus  MIT App Inventorの使い方全般(componentsの使い方など)

 Kelas Kodular - Ahmad Nasril   6年ほど前のFirebaseの使い方など

    Obsidian Soft   MIT App Inventorを使ったシンプルなアプリ開発

    Tutorials Azaotl   MIT App Inventorを使ったゲーム開発(マリオ型ゲームならまずこのYouTuber)

    Tao Zilla  MIT App Inventor全般にわたってのチュートリアル。

5. ウエッブサイトのMIT App Inventor関連チュートリアルなど:

    5-1 METRIC RAT AI2  ウエッブサイトのチュートリアルNo1。これだけまとまったチュートリアルは他にないのでは。

    5-2 MIT App Inventor Community Site  ほぼすべての疑問に答えてくれる

    5-3 StackOverflow すべてとは言わないが、かなりの疑問に答えてくれる

    5-4 Artificial Intelligence with MIT App Inventor    

6. ウエッブサイトのツール(無料):

    6-1 Google ドライブ(Androidスマホで撮影した画像および画面キャプチャーのドロップ先。Mac側での受け取り先)

 6-2 JSON Formatter & Validator (JSONファイルの整形、書き出し)

    6-3 JSON Formatter (Chromeの拡張機能。Chrome上でのJSONファイルの整形)

 6-3 Audio Editor Online   (サウンド編集。主に効果サウンドのトリミング)

 6-4 Unsplash(フリー画像のみ利用) 

 6-5 いらすとや-かわいいフリー素材集-

    6-6 Firebase(限度はあるが基本的に無料のデータベース。MIT App Inventor2にも外部データベースが備わっているが、やはり外部データベースを使うならFirebaseが一番。ただし、私の知識・技能不足のためRealtiem Databaseしか使っていない。また、他にもGoogle Sheetなどをデータベース代わりに使えるが、やはりFirebaseの方がデータベースを使っているというような気がする。自己満足?)

7. MIT App Inventorに既存のcomponent以外の機能を追加するextension(無料):

    7-1 ListUtilz (リストのソートなど)

    7-2 CornerRadius (VerticalArrangementなどのcomponentの角丸生成。 注意点

    7-3 DecoJson (JSONファイルの整形。labelなどに表示する場合の整形)

    7-4 UrsAI2Popup (ポップアップメニューの生成)

    7-5 MakeViewUp (componentの回転以外にも、padding、margin、不透明度、枠等の設定ができる)

    7-6 pl.extension.Keyboard (キーボードの表示・非表示など)

8. Public API(今までに使った中で印象に残っている主なもの。基本的に無料。):

    8-1 DummyJSON (本格的なダミーのJSONファイルを取得できる。componentのテストなどに利用。)

    8-2 OpenWeather (何度も使わせてもらっているお天気情報API)

    8-3 The Movie DB(映画関係の情報ならこのサイト)

    8-4 Nobel Prizes & Laureates  (ノーベル賞の受賞者データのサイト)

    8-5 Deck of Cards (トランプカードを用意して、希望の枚数ごとに配ってくれる便利なAPI)

 


MIT App Inventor 2で遊ぶ (インディアンポーカー 1)

2025-01-22 06:46:24 | 日記

インディアン・ポーカーとは?

このYouTubeを見るのが早いと思う。=> 「 Indian Poker Card Game Rules

スマホのアプリもあるらしいが、今回は、MIT App Inventor 2で簡単なアプリを作ってみたい。

以前「ポーカー・ゲーム 1」でも使用した Deck of Cards API を利用。

アプリ実行のビデオ:

スクリーン・デザイン:

縦に長い画面なので2つに分けて表示。

                                                

ブロック・コード:

1. Screen1の初期化時に「カードを配る」ボタンを無効に設定

まず、「カードを受取る」ボタンをタップして、52枚のカードのIDを取得する必要があるため。IDが取得できたら、「カードを配る」ボタンをタップして、取得したIDをキーにして具体的なカード(今回の場合4枚ずつ)データを取得することになる。

したがって、「カードを配る」ボタンは、「カードを受取る」ボタンの後でタップする必要あり。

2. 1組のカードのIDを取得

変数URLForGettingCardIDに1組のカードのID等基本データを取得する先のURLを格納。

変数URLForGettingCardsに具体的なカード情報を取得する先のURLを格納。このURLに上記カードのID及び一回に受取るカードの枚数(今回の場合4枚)をパラメーターとして追加してデータを取得することになる。

カードのIDを格納する変数cardDeckIDを設定。

カードの基本データを格納する変数initialDeckDataを設定。

カードの基本データとは以下の通り。

{
   "success":true,
   "deck_id":"lcvavm0z0uma",
   "remaining":52,
   "shuffled":true
}

「カードを受取る」ボタンをタップした時の動作を設定。=>所定のURLに対しGETリクエストを実行。(なお、変数URLForGettingCardIDをすでに設定済みなので、URLの代わりに同変数をセットしてもOK。)

カードの基本データ(上記)取得に問題がなければ、デコードの上、変数initialDeckDataに格納。=>同データよりdeck_ID(1組のカードのID)を抽出して、変数cardDeckIDに格納。=>変数cardDeckIDが空白でなければ(正常にカードID取得に成功)「カードを配る」ボタンを有効に。

カードの基本データ取得に問題あれば、再度「カードを受取る」ボタンのタップを促すポップアップを表示。

 

3. 取得した1組のカードより具体的にカードを引き出す

取得したカードのデータを格納する変数obtainedCards_Dataを設定。

取得したカードのデータ(サンプル)とは以下の通り。カードは4枚ずつ引き出すが、以下は最初の1枚目のカードの内容。52枚のカードより4枚引き出したので、残りの枚数が48枚となっている("remaining":48)。

{
   "success":true,
   "deck_id":"lcvavm0z0uma",
   "cards":[
      {
         "code":"5S",
         "image":"https://deckofcardsapi.com/static/img/5S.png",
         "images":{
            "svg":"https://deckofcardsapi.com/static/img/5S.svg",
            "png":"https://deckofcardsapi.com/static/img/5S.png"
         },
         "value":"5",
         "suit":"SPADES"
      },

...            ********** 省略 **********

   ],
   "remaining":48
}

変数myCardImage:取得したカードの内、「自分」用カード(4枚目のカード)の図柄のURLを格納。

カードのIDをパラメーターとして所定のURLにセットすると共に、一度に引き出すカードの枚数を4(count=4)にセットし、GETリクエストを実行。

「カードを受取る」ボタンは無効に設定。

取得したカードのデータをデコードした上で、関数initCardsAndImagesList および 関数makeCardsList を実行する。

関数makeCardsList実行の結果取得するcardsImagesURLList(カード図柄)のindex1〜3を、相手1、相手2、相手3のカードに表示する。

ただし、「自分」については、trumpCardBack1.png(カードの裏の図柄)をセットし、カードの図柄 (index4) のURLは、変数myCardImageURLにセットしておく。(相手1〜3のカードは表示されるが、「自分」に配られたカードが何かはまだわからない)

関数initCardsAndImagesList:カード及びカードの図柄イメージが保存されているURLリストなどが格納される変数を初期化する。

関数makeCardsList:取得した4枚のカードの図柄が保存されているURLを抽出し、そのリストを変数cardsImageURLListに格納。=>カードの情報の内、 "code"をキーにしているカードの手 "5S"(スペードの5)を変数cardsListに4枚分格納。ただし、カードの数字が 10 の場合は "0S"となるので、これを "10S" に変更して格納。なお、この変数cardsListは今回のブログでは使用しない。

関数convert0To10:関数の名前がちょっと紛らわしいが、取得したカードのデータのうち"code"の値を取り出す関数

「勝負!」ボタン (showMineButton) をタップした時の動作=>ここで初めて自分のカードの図柄が表示される。

「おりる」ボタン (foldButton)をタップした時の動作=>このボタンをタップして時には、自分のカードは表示されず、現在使っているカードを引き続き使っていくか、新しいカードを受取るかの選択を促すポップアップが表示される。

「このカードで遊ぶ」が選択された時は、「カードを配る」ボタンをタップするよう促すポップアップが表示される。

「新しいカードで遊ぶ」が選択された時は、「カードを受取る」ボタンを有効にして、「カードを配る」ボタンは無効となる。

ポップアップの表示が多くUX (User eXperience) 的にはスッキリとした感じに欠ける気がする。また、52枚のカードをすべて配り終えた場合の対応がまだできていない。

なお、testLabel1〜testLabel3のcomponentsがあるが、これらは、データが正しく取得できているか確認するためのもので、アプリ実行時には非表示とした。

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

以前アップした類似ゲーム:

MIT App Inventorで遊ぶ (ポーカーゲーム 1)