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)


MIT App Inventor 2であのアプリを作ってみる (KanooPizza 1)

2024-06-09 09:36:09 | 日記

ド○ノ・ピザのスマホアプリに似たようなものを作ってみる。機能がたくさんあるので、少しずつ追加していきたい。途中で投げ出すかもしれないが。最初で最後?でも、まずは、トライ!(東京都世田谷区に限定したアプリ)

MIT App InventorのアプリにJavaScriptを組み込む(連携させる)ことができるので、今回は、初めての試みとして、ネット上にもサンプルが豊富にある携帯電話番号のチェックに使ってみた。関数と変数の名前、そして返り値を変えただけで、ほぼそのまま使わせてもらった(と言ってもいい)ウエッブサイト、YouTubeのチュートリアルなどは以下の通り。

1.  Integrate a JavaScript code in an App Inventor Application

2. MIT App Inventor Help : Javascript, not working

3. 携帯電話番号の正規表現

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

アプリ実行のビデオ:

スクリーンのデザイン:

メインの画面、右2つの画面は配達を選んだ際に届け先を指定する画面。

一番右のaddressDetailScreenには、下部にJavaScriptとの仲を取り持ってくれるWebViewerが設定されている。表示はされない。

            

ブロック・コード:

<メイン画面Screen1>

CornerRadiusというextensionを使って下部にある2つのボタンのコンテナーVerticalArrangement4の4隅を丸角に設定。

最初に、VerticalArrangement4の背景色を「なし」(0)に設定しているが、これは、Designerの画面でBackgroundcolorをNoneに設定しても同じ。CornerRadiusのextensionはVerticalArrangement4に言わばoverlayのように上から丸角の背景色を設定するので、もし、すでに背景色が白の角のあるVerticalArrangement4が設定されていたら、丸角が表示されないので。

教えてもらったウエッブサイトはここ

こういうことらしい。エフェクトは、適用する順番が重要ということか。

「配達」ボタンをタップしたら、selectDeliveryScreenへ遷移。

<selectDeliveryScreen>

1. 1〜42 (丁目)までのリストを作成する関数。(この種のアプリでは、通常、郵便番号で地域を特定すれば、その地域での丁目の候補がリスト形式で表示されているので、その可能性について検討する予定。そのようなAPIサービスがなければ無理だが。)

2. chomeListPickerに関数makeOneToFortyTwoで作成したリストを設定する。

3. 「戻る」ボタンをタップすれば、メインのScreen1に戻る。

4. ハイフンなしで入力する郵便番号の桁数が7であればOKで、その場合は、ポストくんの所定のURLに郵便番号と共にGETリクエストを行う。もし、7桁で出なければ、再入力を促すメッセージを表示。

5. 取得するデータの例(赤字、下線は当方にて追加):

{
   "postcode_type":"area",
   "jis":"13112",
   "old":"156",
   "new":"1560051",
   "prefecture_kana":"トウキョウト",
   "city_kana":"セタガヤク",
   "suburb_kana":"ミヤサカ",
   "prefecture":"東京都",
   "city":"世田谷区",
   "suburb":"宮坂",
   "street_address":null,
   "office":null,
   "office_kana":null,
   "office_roman":null,
   "post_type":null,
   "is_separated_suburb":0,
   "is_koaza":0,
   "is_chome":1,
   "is_include_area":0,
   "status":0,
   "reason":0,
   "prefecture_roman":"Toukyouto",
   "city_roman":"Setagayaku",
   "suburb_roman":"Miyasaka",
   "handling_post_office":null,
   "multiple_numbers":null,
   "created_at":"2024-06-01T15:52:52.000Z",
   "updated_at":"2024-06-01T15:52:52.000Z"
}

prefecture, city, suburbの各データを抽出しshowAddressLabelに表示する。取得に失敗した場合は、再入力を促すメッセージを表示。

6. chomeListPickerより何丁目であるかの数字を取得して、「丁目」を付加してchomeLabelに表示。また次のscreenに移るボタン「>>」を表示する。

7. AddressDetailScreenへ遷移する際、郵便番号、丁目も含む住所を渡す。

<addressDetailScreen>

1. 受け取った郵便番号を変数zipCodeに格納。addressLabelに郵便番号+住所を変数receivedAddressに格納し表示。

 

2. 戻るボタンの動作設定。戻り先はselectDeliveryScreen。

3. 「お届け先の確認」ボタンをタップすると、キーボードを隠し、変数checkPhoneNumberを実行。

訂正がある場合。訂正後「訂正する」ボタンをタップした時は、一旦address1Labelを削除の上、関数checkPhoneNumberを実行。

4. 関数checkPhoneNumberの内容。

WebViewStringに携帯電話の番号を設定し、JavaScriptが記述されているcheckPhoneJavaScript.htmlをコールする。

あとは、WebViewStringを受け取ったJavaScriptが実行され、OKの場合は1、そうでなければ2をWebViewStringに設定する。(内容は、下のJavaScriptコード)

WebViewStringに変更があった場合は、受け取る値により処理を行う。1の場合は、そのままaddress1Labelに住所(前のscreenより受け取った住所にこのscreenで入力した住所を加えたもの)と携帯電話番号を表示する。それ以外の場合は(この場合は2)、携帯電話番号の再入力を促すメッセージを表示する。

checkPhoneJavaScript.htmlの内容は以下の通り。(他の方が作成したコードを表示するのは抵抗があるが、関数名、変数名、返り値を変更し、余分な箇所を削除しているので、ここにコードを表示しても特に問題はないだろう。)

ポイントは赤枠で囲んだ部分。

このアプリ作成はいばらの道のような感じがする!次の段階に進めるのか???

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

Background Image of the main screen : Photo by The Nix Company on Unsplash.

 

 


MIT App Inventor 2であのアプリを作ってみる (SpeakByWriting 2)

2024-06-08 08:03:15 | 日記

前回は、メッセージの表示を上下逆さまにするボタンを設置した、今回はボタンを取り除き、スマホを前後に傾けることにより表示の方向を変える方法に変更した。「MIT App Inventorで遊ぶ (Treasure Hunt App 1)」で使ったAccelerometerSensorを利用。

デジタル・ペイのアプリなんかにも、お店側の人が見やすいように、スマホを前後に傾けると表示が逆になるものがありますが、ちょうどそのようなもの。

アプリ実行のビデオ:

スクリーンのデザイン:

今回もTablet sizeでキャプチャーした。右端の黒色の縦長長方形は、実行ビデオの通り、傾きをボールの移動で示すためのもの。白いボールが上の方向に移動している時は、スマホの上部を下に傾けた時。下の方向の場合は、スマホの下部を下に傾けた時。

ブロック・コード:

追加したブロック。

yAccelは、スマホの上部が下に傾くと負の数が大きく(小さく?)なり、下部を下に傾けると正の数が大きくなる。(この記述は、たぶん不正確な素人の表現ではあるが)

実験した結果、yAccelが-2よりさらに大きくなる(小さくなる?)と表示を逆に、3より大きくなると表示を元に戻すように設定。

前回のおまけのようなもの。

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

前回までのブログ:

MIT App Inventorであのアプリを作ってみる (SpeakByWriting 1)

 


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

2024-06-07 07:16:19 | 日記

映画の批評を見ることができるようにした。メインページ(Screen1)で選択した言語で批評を検索するべきだが、英語以外の言語の場合、批評がほとんどないため、英語の批評を表示することとした。

なお、批評を書いた批評家の名前をクリックするとThe Movie DBのウエッブサイトに飛ぶことができる。さらに、同ウエッブサイトで、批評家の名前をクリックすると、その批評家の活動について知ることができる。

アプリ実行のビデオ:

スクリーンのデザイン:

追加したReview Screenのみ。Tablet sizeでキャプチャー。

                                              

ブロック・コード:

追加ブロックのみ。

<Screen1>

映画一覧のListViewの列をクリックすると、映画のID、ポスター画のパス、映画のタイトルをreviewScreenへ渡し、reviewScreenへ遷移する。

<reviewScreen>

1. メインスクリーン(Screen1)へ戻るボタンの動作設定。

2. Screen1より受け取った映画のID、ポスター画のURLパス、映画のタイトルを変数に格納。

映画のIDを使って、所定のURLに対しGETリクエストを行う。

3. データを取得できたら(responseCodeでのチェックが抜けているが)、関係する変数をリセットの上、各データを抽出する関数を実行する。最後にそれらをリスト形式で統合し、ListViewで表示する。

4. 批評家のリスト(results => author)を作成。以下同様に、批評本文(results => content)、批評を作成した日付(results => created_at)、URL (results => url) の各リストを作成。(赤字は当方で変更した)

取得するJSONデータの例。

{
   "id":823464,
   "page":1,
   "results":[
      {
         "author":"Manuel São Bento",
         "author_details":{
            "name":"Manuel São Bento",
            "username":"msbreviews",
            "avatar_path":null,
            "rating":7
         },
         "content":"FULL SPOILER-FREE REVIEW @ https://fandomwire.com/godzilla-x-kong-the-new-empire-review/\r\n\r\n\"Godzilla x Kong: The New Empire is a “more” version of the previous installment. More Hollow Earth, more Titans, more gloriously giant fights filled with fantastic visual effects… and much more nonsense too.\r\n\r\nThrough an openly absurd narrative, Adam Wingard takes the charm and chemistry of his cast to help focus the film’s main spotlight on the titanic protagonists, Godzilla and Kong, delivering two hours of pure, unadulterated entertainment.\r\n\r\nIt won’t convert the most skeptical, but it will certainly solidify the unashamed passion of MonsterVerse fans.\"\r\n\r\nRating: B",
         "created_at":"2024-03-28T18:01:31.827Z",
         "id":"6605b07b3fe797017bcb584b",
         "updated_at":"2024-03-28T18:01:31.973Z",
         "url":"https://www.themoviedb.org/review/6605b07b3fe797017bcb584b"
      },

......

}

            ******************* キーのみ異なる(上記例ではauthor)だけなので関数の内容は省略 **********************

5. 上記関数実行により得たデータに見出しも追加して、ListViewに表示するためのリストを作成する。

6. ListViewの列をタップしたら、WebViewer(ブラウザー)を表示し、URLに指定されたウエッブサイトを開く。

LIstViewなどが設定されているVerticalArrangement1/HorizontalArrangement1を非表示に。

WebViwerはVerticalArrangement2の中に設定してあるので、同propertyのVisibleをtrueにし、表示。

7. ブラウザーを閉じるボタン。

WebViwerはVerticalArrangement2の中に設定してあるので、同propertyのVisibleをfalseにし、非表示に。

 

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

<余談・顛末記>

以前、The Movie DBより同サイトが把握している全映画関係者のID一覧表をダウンロードした際 (JSONファイル)、件数が1,999,624件(名)でcsvファイルに転換できなかった、というようなことを書いたと思うが(?)。ネット上のフリーの変換サイトでは全くダメで、そのままにしておいた。。。

先日YouTubeを見ていたら、ボリュームがかなり大きくても、Pythonであれば3行のコードで簡単にJSONファイルをcsvファイルに変換できるとのビデオを見つけた。(単にYouTuberのコードの中のファイル名を変えただけ+ 意味はわからないが 、エラー対応のためネット上のアドバイスに従い lines=True を追加したものが以下)

import pandas as pd
dataframe = pd.read_json("person_ids_05_15_2024.json", lines=True)
dataframe.to_csv("person_ids_05_15_2024_data.csv")

一瞬で変換完了。驚いた、と言うより衝撃!問題は、このcsvファイルは1,999,624行で、Macのスプレッドシート(numbers)では、1,000,000行しか扱えないため、結局全て読み込むことはできなかった。でも、ここまで来れば、ファイルを2つ又は3つに分ければこのデータ自体は扱えるので一応問題解決ということ。

ただ、そのYouTuberが使っていたjupyterなるonline editor(?) の使い方がわからず、使い方をYouTubeでいろいろ検索し、上記コードを実行したが、何故かエラー (ValueError: Trailing data) が出力され続け、たった3行のコードを実行させるまでにか〜なりの時間を要した。。。

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

前回までのブログ:

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)


MIT App Inventor 2であのアプリを作ってみる (SpeakByWriting 1)

2024-06-06 08:28:43 | 日記

YouTubeには、人気のあるアプリのUI (User Interface) を真似て、種々のプログラミング言語で似たようなアプリを作って、その言語やアプリの作り方を教えてくれるチュートリアルがたくさんある。

MIT App Inventorでも、どれだけできるのか、やってみようと思う。まずは、比較的簡単なもと思われるものから。

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

iOSのアプリに「しゃべって筆談」というアプリがある。

話しをすると、画面に文字として表示されるという簡単なアプリだが、結構役に立つアプリ。iPadにインストールして使っていた。

MIT App Inventorでこのアプリを再現できるかやってみた。

コード的には非常にシンプルで、わざわざこのブログにアップするようなものではないかもしれないが。。。

アプリ実行のビデオ:

テキストが上下逆に表示されれば、もっと実際のニーズに合ったアプリになるのだが。。。と思いつつ作っていると、ちょうどニーズにぴったりのextensionが合ったので使ってみた。このテキスト部分を見る人は、通常、アプリを操作している人のトイメンに位置しているはずなので。

私が話しかけている音声が録音できなかったのが残念。何か方法があるのでしょう。ということで、いろいろググってみた結果、マイクをONにしておけば画面キャプチャーをしながら録音ができることは確認できた。しかし、GoogleのSpeechToTextを使っている時は、マイクからの音声は録音できなかった。うまく行かない!

スクリーンのデザイン:

横幅があったので、Tablet sizeで画面キャプチャー。右上端のアイコンは表示の上下を逆にするボタン。

                                               

ブロック・コード:

non-visible componentとしてSpeechRecognizerを使用。

1. 上下方向を逆にするボタンをタップすれば、textBoxStatusがtrue, falseのいずれかに変更され、それに応じて、メッセージを表示するmesageLabelを180度回転または、元の0度の向きに戻す。

2. 「タップしてから話してください」のボタンをタップするとSpeechRecognizerが実行され、音声からテキストを取得。

3. メッセージ欄が空白の場合は、音声から得られたテキストをそのままmessageLabelに表示する。

メッセージ欄が空白でない場合は、すでに表示されているメッセージに改行と新たに取得したテキストを表示する。

4. 一番右端にあるclearボタン(消しゴムアイコン)をタップしたら、メッセージ欄は空白に。

smileyButton1をタップした時は、音声から得たメッセージのテキストに絵文字を追加し、表示する。(以下同じ)

genericのイベント・ハンドラーを使ってもいいが、いずれにしてもボタンの数だけのケースに対応する必要がある。

自動的に改行はされるが、さらに改行をしたい場合、2〜3行あけたいとか、そんな場合に使う「改行」ボタン。)

コードは以上。