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

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

要するに、「モグラ叩き」ゲーム。動物をハンマーで叩くなんて、ゲームとは言え、あまり好きなタイプではないゲームですが。。。でも、小さい時（？半世紀以上前）に旅館などで、よくバンバンと叩いていた記憶あるが。これも、YouTubeにはたくさん作り方のチュートリアルがある。MITAppInventorだとどの程度できるのか、作ってみた。アプリ実行のビデオ：スクリーンのデザイン：ブロック・コード：1.「遊び方」を表示。2.「Start」ボタンをタップするとClock1が有効となる。mole2.pngmole3.png全体で56マスあり、ランダムにそのうちの一つを選び、選ばれた当該のマスの背景画をmole2.pngに置き換える（モグラが顔を出し=>タップすることになる）。56マス全ての表示が終わると終了のメッセージが...MITAppInventor2であのアプリを作ってみる(Whack-a-Mole1）

2024/07/31 18:28

MIT App Inventor 2で遊ぶ (World News 2 -追加-）

データをGNewsより直接取得。詳細情報をみることができるメディアのウエッブサイトを追加。アプリ実行のビデオ：スクリーン・デザイン：メインスクリーンは変更なし。右図がウエッブサイトを表示するために追加したarticleScreen。ブロック・コード：追加部分のみ。1.今回は、同梱のファイルからデータを読み込む代わりに、直接所定のURLに対しGETリクエストを行い、データを取得。「fetchUSDataButton」（ボタンの表示は「US」）をタップした時の動作。言語：英語、国：米国、対象カテゴリー：「全て」で設定。日本語（「JP」）、中国語（「CN」）、フランス語（「FR」）も同様。2.データ取得に成功したら、必要なデータを抽出(extractData)、日付のフォーマット変更(makeDateAndTi...MITAppInventor2で遊ぶ(WorldNews2-追加-）

2024/07/29 15:26

MIT App Inventor 2で遊ぶ (World News 1）

世界のニュースを提供しているPublicAPIがいくつかある。今回は、そのうちの一つGNewsを利用。***********************************************ListViewを使用する時（画像＋MainText＋DetailText）に、デフォルトの設定のまま使用すると以下の通り、画像とテキスト部分の間が余白なしで表示される。（赤点線部分）ネット上でいろいろ調べたところ、extensionを使うadviceが多かったので試してみたが、期待通りの動作を得ることはできなかった。その後、Designerで設定をいろいろ変更して試行錯誤を重ねた結果、ListViewの画像のサイズを以下の通り変更すれば、期待通りの動作に「近い結果」を得ることができた。200pxX200px=>...MITAppInventor2で遊ぶ(WorldNews1）

2024/07/27 07:37

MIT App Inventor 2で遊ぶ (Audiobook 1/2）

電子書籍とオーディオブックを合体させたようなもの。日本語、英語、フランス語、ドイツ語の誰でも知ってる書籍のごくごく一部を読んで聞く。あまり実用的なアプリではないが。。。どの言語の発音も及第点というところか？アプリ実行のビデオ：=>選択した書籍のテキストをtextLabelに表示させた場合。単語の選択などは不可。=>選択した書籍のテキストをTextBoxに表示させた場合。この場合は、単語の選択が可能で、翻訳を参照したり、コピー機能なども使える。TextBoxは、通常は、文字、数字などを入力する機能を提供。なお、フランス語とドイツ語の場合、単語に赤の下線が表示されているものもあるが、理由はわからない。スクリーンのデザイン：ブロック・コード：1.イソップ童話の名前をリスト形式の変数aesopに格納。この名前に....MITAppInventor2で遊ぶ(Audiobook1/2）

2024/07/25 08:34

MIT App Inventor 2で遊ぶ (Sudoku 3 -追加-）

＜Sudoku2への追加＞PublicAPI(DOSUKU)より数独の問題と解答を取得した際、問題のレベルに関する情報も得ることができる。アプリ実行のビデオ：スクリーンのデザイン：「Start」ボタンの右側にレベルを表示するLabel(Level)を追加。ブロック・コード：1.取得したJSONデータよりレベルのデータ（キーは、difficulty）を抽出し、levelLabelに内容を表示する関数getDifficutyData。2.関数getdifficultyDataの実行*******************************************************************前回までのブログ：MITAppInventor2で遊ぶ(Sudoku2）MITAppInvento...MITAppInventor2で遊ぶ(Sudoku3-追加-）

2024/07/22 17:31

MIT App Inventor 2で遊ぶ (Sudoku 2）

ListViewとLabelをTextBoxに統合。データはPublicAPIより直接取得。Nextボタンをタップすれば次の新しいSudokuを楽しむことができる。ブロックはSudoku1と比べると随分とシンプルなものとなった。（まだ、コピー＆ペーストのブロックは多いが）PublicAPIは、前回と同様こちらを利用。アプリ実行のビデオ：Sudokuのやり方があまりわかっていないので、解答を見ながらやってみたデモのためのビデオです。スクリーンのデザイン：「CheatSheet」ボタンの下に解答が表示されるスペースがある（最初は非表示）ブロック・コード：1.「Start」ボタンをタップ＝＞表示を「Next」に変更＝＞背景色を橙色系に変更＝＞「FetchingData...」を画面に表示＝＞所定のURLに対しG...MITAppInventor2で遊ぶ(Sudoku2）

2024/07/21 07:14

MIT App Inventor 2で遊ぶ (Sudoku 1）

最近アプリ作成の基本的な考え方、作り方などで大変参考にしているYouTuber「CodewithAniaKubów」の「5APIProjectsin5hours」というのを視聴していたら、（JavaScriptではあるが、あまり言語は関係ない）「数独」のアプリ作成が紹介されていた。面白そうなので、MITAppInventorで可能なのかチャレンジしてみた。私自身、数独はやったことがないので、これでいいのか、よくわからない。。。PublicAPIが公開されているので、ネット経由データを取得しても良いが、今回は、あらかじめダウンロードしたJSONファイルをアプリに同梱して、そのファイルからデータを読み込んだ。したがって、1種類のみ。ネット経由だと、GETリクエスト毎に異なった数独を取得できる。アプリ自体はとて...MITAppInventor2で遊ぶ(Sudoku1）

2024/07/18 12:06

MIT App Inventor 2であのアプリを作ってみる (Pacman 4）

左右上下のボタンをタップすると、その方向にpacmanが一コマずつ動く仕様になっていた。これを変更し、ボタンをタップすると、その方向に行けるところまで自動で動くようにした。もちろん、分岐点で方向の違うボタンをタップすれば、今度はその方向に動いていくことになる。アプリ実行のビデオ：スクリーンのデザイン：画面の下部に、一コマずつ動かすボタンを新設した。（右側の図）ブロック・コード：Pacmanが動く部分と追加した部分のみ。1.Clockのintervalを格納する変数clockTimeIntervalを設定した。今後、レベル設定などにも使えるかもしれない。2.上下左右のボタンがあるが、たとえば左矢印ボタンをタップした場合、前回と異なり、新たに設定したleftClockを有効にさせる。3.leftClockが有...MITAppInventor2であのアプリを作ってみる(Pacman4）

2024/07/16 07:36

MIT App Inventorであのアプリを作ってみる (KanooPizza 5）

今回は、支払い関係の部分を追加した。前回の課題はそのまま。無理矢理アプリを終了させたような感じが否めないが。。。機能的には、配達時刻の選択とか、客の囲み込みの一つの手段である「顧客の登録」とか、まだまだ重要な部分が欠落しているが、このアプリ自体はここまでかもしれない、という感じもする。でも、この注文情報をネット経由（Firebaseなどの外部DB経由）で受け取る店側のアプリを作っても面白いかもしれない。アプリ実行のビデオ：スクリーンのデザイン：赤点線内の部分。（非表示の部分も多い）ブロック・コード：1.支払い方法のうち、クレジットカードにチェックを入れた場合、クレジットカードの詳細を入力する項目が表示される。（実際にはVerticalArrangement18というコンテナー内に設定されている）また、同時...MITAppInventorであのアプリを作ってみる(KanooPizza5）

2024/07/14 07:14

MIT App Inventorであのアプリを作ってみる (Pacman 3）

ゴーストを若干動かしてみる。アプリ実行のビデオ：スクリーンのデザイン：赤線枠内のゴーストを動かす。ブロック：コード：1.スクリーンの初期化の際に、ghost1Clockおよびghost3Clockを有効にする。2.ghost1Clockが有効となったら、関数animationGhostSprite1を実行。ghost1をY軸方向に上下に移動させる。y:60〜y:180の間を30pxずつ移動させる。3.ghost3Clockが有効となったら、関数aninationGhostSprite3を実行。ghost3をX軸方向に左右に移動させる。x:30〜x:90の間を30pxずつ移動させる。4.3つのバナナのいずれかを食べたらパワーレベルを5加算。（ちょっと画像が見にくいが、赤線枠内）なお、Ghostと衝突したら2...MITAppInventorであのアプリを作ってみる(Pacman3）

2024/07/12 07:07

MIT App Inventorで遊ぶ (Analog Clock 2）

前回のAnalogClock1で課題としてあげた「秒針が1秒毎にカクカク動くのではなく、スムースに動かせる」件について、その後、ネット上でいろいろ検索してみた。1番のポイントは、MITAppInventorでミリ秒単位で時間を取得できるかどうかという点。この点については、StackOverflowの記事に「HowcanIgetthecurrentmillisecondsfromthecurrenttime」というのがあって、その記事に対する回答(longmillis=System.currentTimeMillis()%1000;)を参考に、MITAppInventorに当てはめて色々（回答の意味がわからないままで）やってみたら1秒のミリ秒単位での時間の取得ができた。以下ブロック・コードの赤点線部分。He...MITAppInventorで遊ぶ(AnalogClock2）

2024/07/10 07:40

MIT App Inventorについて (Release Note July 7, 2024 and February 19, 2024）

MITAppInventor2も常にアップデートされているようだ。最新のアップデートは、July7,2024だが、一つ前のアップデート(February19,2024)で、日本語版も追加されたようだ。＜英語版＞「English」をクリックするとドロップダウンメニューが表示されるので「日本語」を選択すると下の日本語版に変わる。＜日本語版＞なお、最新のアップデート(July7,2024)では、MITappInventor2のUserInterfaceに「Neo」が追加された。（追加と言っても、従来版とNeoの2種類だけだが）NeoのUserInterfaceは以下の通り。全体に今風のUIになっている。今後のアップデートに期待！😀MITAppInventorについて(ReleaseNoteJuly7,2024andFebruary19,2024）

2024/07/08 08:52

MIT App Inventorであのアプリを作ってみる (KanooPizza 4）

今回も、メニュー選択画面。メニューと個数の選択と合計金額算出まで。個数選択はextensionを利用して、ドロップダウンメニュー形式を採用。アプリ実行のビデオ：スクリーンのデザイン：前回と若干重複があるが。。。スクロールの順に画面展開を表示。赤点線部分は、このスクリーンに遷移した時は非表示。TableArrangementを初めて利用（赤点線内）>途中若干省略>ブロック・コード：メニュー選択部分のみ。1.スクリーンの初期化時に、関数setPopUpを実行して、個数選択のドロップダウン・メニューを生成するextension(UrsAI2Popup)のメニューアイテムをセットする。また、関数setInitialOrderLabelを実行して、各商品名の下に価格を表示する。（各「個数選択」ボタン毎にドロップダウ...MITAppInventorであのアプリを作ってみる(KanooPizza4）

2024/07/06 08:18

MIT App Inventorで遊ぶ (Analog Clock 1）

今回はアナログ型の時計。これもよくYouTubeの初心者用チュートリアルで見かけるアプリ。シンプルなアプリで、意外と簡単に作ることができた。ただし、秒針、分針、時針の画像を作成するのにはかなりの時間を費やした。イメージを回転させる時の回転の中心はその画像の中心点になるので、以下のように文字盤と同じ大きさの300pxX300pxのシンプルなイラストを作成。いずれもpngファイルで、白い部分はくり抜いて透明にした。こう言ってしまえば、いたって簡単なんだが。。。意外とてこずった。アプリ実行のビデオ：スクリーンのデザイン：位置については、ブロック・コードにて設定。ブロック・コード：1.スクリーンの初期化時に秒針、分針、時針、文字盤、文字盤の枠をキャンバスの中央に配置し、Clockを有効に。2.秒針は1秒毎に6度回...MITAppInventorで遊ぶ(AnalogClock1）

2024/07/04 06:41

MIT App Inventorで遊ぶ (THE MOVIE DB 9）

バットマンって映画、何本あったっけ。。。という時がある。今回は、「Batman」で検索すると、過去に上映されたその名前の映画のリストを表示する画面を追加した。アプリ実行のビデオ：スクリーンのデザイン：従来。家のアイコンがあった場所に今回の画面へのボタンを設置。（拡大鏡のアイコン）右図は、新しいsearchMovieScreenの画面デザイン。ブロック・コード：searchMovieScreenのみ。1.searchButtonをタップしたら、もしsearchTextboxが空白ではない場合、所定のURLに対しGETリクエスト行う関数makeGETRequestを実行する。searchTextboxが空白の場合は、映画の名前を入力するように促す。2.関数makeGETRequest：所定のURLを生成し、G...MITAppInventorで遊ぶ(THEMOVIEDB9）

2024/07/02 08:36