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

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

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

2024-06-11 07:46:44 | 日記

映画のカテゴリー別(複数選択可能)の情報が取得できるようにした。通常、どの映画も複数のカテゴリーに属している。

以前にも利用したが、チェックボックスの処理を行うのにgeneric (Any Component)のイベント・ハンドラー(この言い方が正しいかどうかはわからぬが?)を使用した。

アプリ実行のビデオ:

「Movie List By Country」で、By release dateで検索している画面があるが、前回だったか、トップは2115年に封切予定の映画がリストアップされていた。現在、その映画はリストアップより外されたようである。

 なお、ビデオを撮り忘れたが、どのカテゴリーにもチェックを入れない場合は、全てが対象となる。この時は下図の通りAll checked が表示される。(赤枠内)

              

スクリーンのデザイン:

新たに追加したgenresScreenのみ。

                                         

ブロック・コード:

映画の分類の意味でgenresを使ってしまったのでちょっと分かりにくいかもしれないが。。。categoriesの方がよかったかもしれない。

1. 分類リストの取得:

変数genresJSON:分類リストのJSONデータを格納

変数genresNameList:分類リストの分類名のみを取り出したリストを格納

変数genresIDList:分類リストのIDのみをとりだいたリストを格納

リストのアイテム数を格納するlengthOfList。

genresScreenの初期化時に、分類リストを取得するために所定のURLに対しGETリクエストを行う。

取得した分類リストのJSONデータより、分類名リストおよび分類IDリストを作成。

分類リストのオリジナルのJSONデータ(一部)は以下の通り。

{
   "genres":[
      {
         "id":28,
         "name":"Action"
      },
      {
         "id":12,
         "name":"Adventure"
      },
      {
         "id":16,
         "name":"Animation"
      },
      {
         "id":35,
         "name":"Comedy"
      },

.......

]

2. チェックボックスの「チェックを入れる」および「チェックをはずす」を処理するブロック:

チェックが入った分類のIDを格納する変数selectedGenresを設定。

今回は、チェックボックス毎に動作を設定するのではなく、genericのイベントハンドラーを使って。

「チェックを入れる」と「チェックをはずす」は全く同等に扱われるので、チェックボックスをタップした時、そのチェックボックスにチェックが入っていれば、チェックを入れたとしてselectedGenresにIDを追加する。もし、チェックボックスをタップした時、チェックが入っていなければ、チェックを外したことになり、selectedGenresより当該のIDを削除する。

この結果、selectedGenresには常に現在チェックが入っている分類のIDのみが格納されていることになる。

3. testLabelExtraは、現時点のselectedGenresのリスト(ID)を表示させ、これらIDに相当する分類にチェックボックスが本当に入っているかを確認するためのもの。アプリ実行のビデオの中でも、非表示とはせずに表示させている。

4. チェックした分類に属する映画データを得るために、所定のURLに対しGETリクエストを行う。

URLのパラメータとしては、with_genres= の後にコンマ区切りで分類IDを入力することになる。selectedGenresはリスト形式なので、改めて「 , 」区切りの文字列を作成して with_genres= に挿入する。

5. 映画のデータを取得したら、いくつかの関数を実行し、必要なデータを抽出し、統合の上ListViewに渡し表示する。

6. 前ページに戻るボタンの動作を設定。

7. 次のページに進むボタンの動作を設定。

8. メイン画面であるSCreen1へ戻るボタンの動作を設定。

9. 以下必要なデータ抽出のための関数の内容。

関数getMaxPage (キー「total_pages」を抽出)

関数makeTitleList (キー「results」=> listの該当index =>「title」を抽出)

関数makeReleaseDateList (キー「results」=> listの該当index =>「release_date」を抽出)

関数makeOverviewList (キー「results」=> listの該当index =>「overview」を抽出)

関数makePosterPathList (キー「results」=> listの該当index =>「poster_path」を抽出)

上記関数の実行により必要なデータをリスト形式で抽出し、それらを統合したリストを作成する関数makeDataListForListView。

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

なお、with_genre=28 (Action)でリクエストした場合に返ってくるJSONデータ(最初の2つのみ)は以下。

{
   "page":1,
   "results":[
      {
         "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":"Several generations in the future following Caesar's reign, apes are now the dominant species and live harmoniously while humans have been reduced to living in the shadows. As a new tyrannical ape leader builds his empire, one young ape undertakes a harrowing journey that will cause him to question all that he has known about the past and to make choices that will define a future for apes and humans alike.",
         "popularity":5120.32,
         "poster_path":"/gKkl37BQuKTanygYQG1pyYgLVgf.jpg",
         "release_date":"2024-05-08",
         "title":"Kingdom of the Planet of the Apes",
         "video":false,
         "vote_average":6.9,
         "vote_count":834
      },
      {
         "adult":false,
         "backdrop_path":"/z121dSTR7PY9KxKuvwiIFSYW8cf.jpg",
         "genre_ids":[
            10752,
            28,
            18
         ],
         "id":929590,
         "original_language":"en",
         "original_title":"Civil War",
         "overview":"In the near future, a group of war journalists attempt to survive while reporting the truth as the United States stands on the brink of civil war.",
         "popularity":2378.848,
         "poster_path":"/sh7Rg8Er3tFcN9BpKIPOMvALgZd.jpg",
         "release_date":"2024-04-10",
         "title":"Civil War",
         "video":false,
         "vote_average":7.1,
         "vote_count":1363
      },

.......

}

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

前回までのブログ:

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

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

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

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

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

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

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