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

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

MIT App Inventorで遊ぶ (THE MOVIE DB 2)

2024-05-21 07:49:36 | 日記

The Movie DBは、全世界の俳優、監督他の映画・TV関係者のID/名前リスト(JSON形式)を提供しているが、リストが膨大な量であるためMIT App Inventorで利用することはできない。(2024年5月15日付けJSON fileだと245MB)

とりあえず、約400人程度のショートリストを作成して、今回はそのリストを使用した。

実行画面:

スクリーンのデザイン:

関係者リストを読み込み、リスト表示する「人のアイコン」を追加。Test Labelは、関係者リストのアイテムをタップした時に取得する、名前とID番号を確認用に表示するもの。

                                         

ブロック・コード:

1. アプリにインポート(同梱)したJSON形式の関係者データを読み込む。

2. 読み込んだデータをデコードしたものを格納する変数JSONを設定。

3. 人マークのselectStarButtonをタップした時の動作を設定。

ListView1 (映画データを表示するListView)を非表示。関係者を表示するListView2を内包するVSAForActors (いわゆるcontainer)を表示。

関数makeStarsList及びmakeStarsIDListを実行。ListView2に関数makeStarsListの実行結果(starsList)を表示。

なお、各関係者に関するデータを取得するためにはそれぞれに付されたIDが必要なので、このリストもついでに作成。

4. 変数starsListおよびidListを設定。

5. 関数makeStarsListおよびmakeStarsIDListの実装内容:

それぞれ "name" および "id" とペアーとなっている値をリストに書き出す。今回のショートリストの人数は447人。

6. ListView2よりタップして関係者を選択後、そのタップした映画人の名前およびIDをtestLabelに表示。

 

<後書き>

なお、実行画面のビデオに出てくる吉永小百合と二木てるみは、後からショートリストに特別に追加したもの。

ちなみに、2024年5月15日付けJSON fileの最初の部分は以下の通り。

Yves Montand, Quentin Tarantinoなどの名前も見える。映画のみならずTV、ビデオ、音楽関係なども含まれているようだ。

チェックしたところ、リストアップされている人数は3,416,019人。(もちろんなのだが)日々増加しているようだ。

 


MIT App Inventorで遊ぶ (THE MOVIE DB 1-2)

2024-05-18 08:29:06 | 日記

ページ送りとページ戻りのボタンを作成したのに実装していなかったので、動作するように設定した。また、現在のページと全体のページを表示。数日前の総ページ数は44,192頁。(以下実行画面をキャプチャーした時は、44,202頁に増えていた。)

44,192頁目を見たかったが、最大検索件数は500頁まで(44,192頁を指定して検索したら、以下の通りのリターン。)となっており、データを取得することはできなかった。地域を日本、言語を日本語で検索したが、映画の本数合計は、 883,838本。

{"success": false,"status_code": 22,"status_message": "Invalid page: Pages start at 1 and max at 500. They are expected to be an integer."}

実行画面:

背景をダークモードにしてみた。また、リストの検索ウインドウを追加したが、検索ウインドウの背景色までダークとなってしまった(MIT AppInventorのバグ?)。=> この試みは失敗。Designerでは、背景色は白色なのだが。

このビデオはダークモードをやめて元のカラーモードでキャプチャーしたもの。

スクリーンのデザイン:

検索ウインドウが追加された程度。

              

ブロック・コード:追加部分のみ。

1. 現在見ているページおよび総ページ数を格納する変数。

2. FetchボタンをタップしてGETリクエストを行う関数makeGETRequestを実行。

3. makeGETRequest関数:

所定のURLにGETリクエストを行うと同時にProgress Viewを表示。

4. 全ての変数を初期値に戻す関数resetVariables

5. GETリクエストの結果返ってくるデータをDictionary形式でデコードして、必要なデータなどを抽出する関数 (getTotalPages, getListLength, getTitleList, getReleaseDateList, getOverviewList, getPosterPath) を実行。全てのデータを一つのリスト(dataList) に束ねてListViewで表示。また、現在のページおよび総ページ数も表示。

6. 頁送りボタンをタップした時の動作を設定。ページ数が500未満(500頁まで検索可能なので、ここは「以下<=」でもOKだった)の場合、ページ数を1加算し、変数を初期化後、再度GETリクエストを行う。

7. 頁を戻るボタンをタップした時の動作を設定。ページ数が1超の場合に、ページ数を1減少し、変数を初期化後、再度GETリクエストを行う。

 

(Credit : The Movie DB https://www.themoviedb.org/?language=ja)

 


MIT App Inventorで遊ぶ (THE MOVIE DB 1)

2024-05-16 09:15:28 | 日記

豊富な映画情報をデータベース化しているThe Movie Database (TMDB) のAPIを利用して、映画関係のアプリを作ってみる。

データが多岐にわたっており、またデータ量が膨大なので、少しづつアプリに取り入れていく予定。

初回の今回は、対象地域を日本、言語を日本語に特定して現在上映中映画(本当に上映中かどうか、映画を見に行かないのでわからない)を人気の高い順にデータとして取得し、ポスター画を表示する。

米国、フランス、韓国、中国など国ごとに上映中(?)の映画の情報を人気順に取得できる。また、言語も指定できる。好きな俳優の映画や生い立ちなどを検索することも可能。。。俳優だけではなく監督やいわゆる映画関係者もDBに含まれているとのこと。

実行画面:

スクリーンのデザイン:

緑地に白の大なり、小なり記号(ダブル)は、ページ送り、ページ戻りのボタンで今回はまだ実装していない。

右側のcomponents一覧の中にある「VAForImage」はポスター画(posterImage)を表示するVertical Arrangementで最初は非表示。

また、「VerticalScrollArrangement1」も非表示となっているが、ここにはデータを確認するためのLabelを配置してある。必要に応じ表示しデータを確認する。

         

ブロック・コード:

今回の取得データの一部(最初のデータ)は以下の通り。(なお、実際に使用するデコードされたデータは、キーのアルファベット順に順番が若干変更されている。)また、データの切り口を変えれば、色々な角度からのデータを取得できる。

{
   "page":1,
   "results":[
      {
         "adult":false,
         "backdrop_path":"/lLh39Th5plbrQgbQ4zyIULsd0Pp.jpg",
         "genre_ids":[
            878,
            28,
            12
         ],
         "id":823464,
         "original_language":"en",
         "original_title":"Godzilla x Kong: The New Empire",
         "overview":"",
         "popularity":3384.641,
         "poster_path":"/opqc6oie7ZIY4Xsb71b23EZelPY.jpg",
         "release_date":"2024-04-26",
         "title":"ゴジラxコング 新たなる帝国",
         "video":false,
         "vote_average":6.945,
         "vote_count":1354
      },
      {
         "adult":false,
         "backdrop_path":"/fqv8v6AycXKsivp1T5yKtLbGXce.jpg",
         "genre_ids":[
            878,
            12,
            28
         ],
         "id":653346,
         "original_language":"en",
         "original_title":"Kingdom of the Planet of the Apes",
         "overview":"今から300年後の世界、猿たちは絶対的支配を目論み、巨大な帝国<キングダム>を築こうとしていた。一方、人類は退化し、まるで野生動物のような存在となっていた。そんな世界で生きる若き猿ノアは、ある人間の女性と出会う。彼女は人間の中で“誰よりも賢い”とされ、猿たちから狙われていた。猿と人間の共存は不可能なのか。はたして、この世界で生き残るのは―。",
         "popularity":2372.67,
         "poster_path":"/na18BaJrRJXhh5XaBRHQhCB66I6.jpg",
         "release_date":"2024-05-10",
         "title":"猿の惑星/キングダム",
         "video":false,
         "vote_average":7.285,
         "vote_count":316
      },

..........

}

1. グローバル変数の設定:

JSONData: データベースより取得したデータをDictionary形式でデコードし格納

listLength: 1回で取得したデータの数を格納

dataList: 以下のデータを一つにまとめたリストを格納

overviewList: あらすじをリスト化したものを格納

posterPathList: ポスター画のパスをリスト化したものを格納

titleList: 映画の題名をリスト化したものを格納

releaseDateList: 映画の封切り日をリスト化したものを格納

2. 所定のURLにGETリクエストを行う。

3. 取得したデータをDictionary形式でデコードした後、それぞれのデータを抽出する関数を実行。

関数を実行した結果得られたデータを一つのリスト (dataList) に集約し、ListViewに表示する。

4. 関数の内容:

getListLength: 取得したデータのresultsに個々の映画データがあるが、resultsはリスト形式となっているので、そのアイテム数を数えれば映画データの件数となる。

getTitleList: キーがtitleである値を抽出しリストを作成

getReleaseDateList: キーがrelease_dateである値を抽出しリストを作成

getOverviewList: キーがoverviewである値を抽出しリストを作成。データがない場合は、「NA」を便宜的に設定。

getPosterPath: キーがposter_pathである値を抽出し、所定のURLに付け加えてパスのリストを作成

5. ListViewの項目(ここの映画のデータ)をタップした時の動作設定:

VAForImage(Vertical Arrangement)を表示し、posterImageにposterPathListより取得するURLをセットしてポスター画を表示。

6. ポスター画の右上端にある「X」をタップした時の動作設定:

VAForImage(Vertical Arrangement)を非表示にして、posterImageのポスター画を削除し、ListViewの選択状態を解除する。

 

(Credit : The Movie DB https://www.themoviedb.org/?language=ja)


MIT App Inventorで遊ぶ (Treasure Hunt App 1)

2024-05-14 12:30:12 | 日記

Accelerometer Sensorを使った簡単なゲーム。

Accelerometer Sensorを使って、スマホの左側を下に傾ければ、ボールが左に移動、右に傾ければ、右に移動させる。YouTubeなどでもよくあるもの。一度はやってみたいというだけ。

実行画面:

スクリーンのデザイン:

Android のデザイン画面                         iPhoneのデザイン画面                               障害物のcomponents

       

ブロック・コード:

1. スクリーン・デザイン(iPhone)の紫色(blackHoleSprite)に衝突した際に再生するサウンド(Bang)の登録。これに衝突すると元の位置に戻ることになる。

2. Accelerometer SensorのOn/Offステイタスを保持する変数enableAcc、経過時間(秒)を保持する変数timeCount、後記のxAccelとyAccelの値を格納する変数xおよびy。

3. startボタンをタプすると、Accelerometerが起動し、Clock1も動き始める。

4. リセット・ボタンの設定。初期値に再設定。ボールも元の位置に戻る(x: 250, y:350)。

5. 時間の経過(timeCount)に1(秒)加算する。その値をshowElapsedTimeに表示。

6. xAccel: スマホを右に傾ければ、正数(incremental)、左に傾ければ、負数(decremental)。yAccel: スマホの下が持ち上がれば、正数(incremental)、上を持ち上げれば負数(decremental)。スマホが水平に保たれれば、いずれも0。

傾きが大きければボールの移動スピードも大きくなる。

7. ボールが障害物(茶色)と衝突した時に上方向、下方向、右方向、左方向に3pixels障害物より離れさせる関数を設定。

障害物に衝突した際に決められた値だけ障害物より離れることにより、障害物を通過してしまうことを防ぎ、バウンスしたように見せる。(実際は、スピードが速いと、障害物を通過してしまうので、どのように対応すべきか検討を要する。)

8. ボールがそれぞれの障害物(周りの壁も含めた茶色の部分)と衝突した際のボールの動きを設定。

周りの壁の場合は、上部の壁だと、下方向にバウンスさせる等々。他の障害物(縦長)の場合は、右から衝突したのか、左から衝突したのかをチェックして、それにより、左へバウンスさせるか、右へバウンスさせるかを決定している。横長の場合は、上か下かにバウンスさせることになる。

ただし、現段階では、例えば縦長の障害物の場合、上辺に上から衝突した場合などは想定しておらず、この場合はバウンスせず突っ切ってしまうことになる。(対応検討中。実際、上記実行画面のビデオでも最初の方で縦長の障害物の上辺を突き破っている。)

                               ========== 途中省略 ==========

金塊(最終ゴール)に辿り着いた時の設定。金塊まで要した時間(秒)を表示。

紫色のblackHoleSpriteに衝突した場合は、ボールは元の位置に戻されてしまう設定になっている。

ボールのスピードが速くなっても、障害物を突き破ってしまわないような方法があるのだろうか?

 


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

2024-05-11 23:33:46 | 日記

お宝を動かし、新たな障害物である穴を追加したくらいだが、少しゲームの雰囲気が出てきた。ゲームオーバーをどのようにしたら良いか思案中。現在のところ、得点が0未満になるとゲームオーバー。

実行画面:

スクリーンデザイン:

穴に落ちた時に表示するイラストを追加。サイズ、位置はブロック・コードで設定。

                                       

ブロック・コード(ちょっと順番が前後しているが):

追加部分のみ。

mario が 穴 (holeSprite1)と衝突した時(穴に落ちた時)は、サウンドを鳴らす。得点は2点減点。マリオは非表示。叫びのイラストを表示。穴のイラストを50pixels右へ移動させる。marioHoleClockを作動させる(1秒)

             

                                                                        ======= 途中省略 =======

marioHoleClockが1秒作動する間に、叫びのイラストは非表示し、マリオは表示。そして、marioHoleClockの動作を止める。

舞台装置・小道具のサイズ、位置を設定する関数inScreenに、holesprite1とyellingSpriteを追加する。yellingSpriteは非表示。穴に落ちた時のサウンド(whistlesound1)をSound5に割り当てる。

                                            ======= 途中省略 =======

舞台小道具の動きをコントロールする関数platformProcedureに、holeSprite1を追加する。(青地にクェスチョンマーク)

                                            ======= 途中省略 =======

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

前回までのブログ:

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

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

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