2023年11月に75歳になり、後期高齢者の仲間入りをしました。高齢となってもできるプログラミングとしてMIT App Inventorをやってみることにしました。かなり色々なことができますよ！
MIT App Inventorであのアプリを作ってみる (Pacman 1）
パックマンというゲームはあまりよく知らないのだが、ネット情報を見て、こんな感じなのかなというパックマンを作ってみることにした。まずは、パックマンが動き、パワーエサを食べ、ゴーストと会う（衝突する？）程度まで。これで終わってしまうかもしれないが。。。理想的には、GoogleDoodleのようなものを作成できたらなあ〜と思うが。。。なかなか難しそう！アプリ実行のビデオ：スクリーンのデザイン：右側画面の下部の右向きと左向き矢印はブロック・コードにて、それぞれ上向き、下向き矢印に回転させている。ブロック・コード：1.extensionを使って右向き矢印と左向き矢印をそれぞれ時計回りと反対に90度回転させて、上向き矢印、下向き矢印に変更している。変数powerLevelの数値をpowerLevelLabelに表示。...MITAppInventorであのアプリを作ってみる(Pacman1）
MIT App Inventorで遊ぶ (色と描画4-ColorPicker2-）
お絵描き帳の中にカラーピッカーを追加する。もうすでにどちらのアプリも作成済みなので、新しい要素は特にない。アプリ実行のビデオ：スクリーンのデザイン：右2つは、描画モードとカラーピッカーモードの画面。.ブロック・コード：カラーピッカーの表示の部分のみ。（前回までと重複部分が多いので、かなり省略。）1.背景色がグラデーションの「カラーピッカー」ボタンをタップした時の動作。描画用キャンバス(Canvas1)が表示されている時は、カラーピッカー用キャンバスが設定されているVerticalArrangement3を表示。カラーピッカー用キャンバス(Canvas2)に配置されているBall1（黒色の丸）の位置をx=120,y=120にセットする。（ほぼ中心）「カラーピッカー」ボタンの表示文字を「キャンバスへ戻る」に変...MITAppInventorで遊ぶ(色と描画4-ColorPicker2-）
MIT App Inventorで遊ぶ (THE MOVIE DB 8）
俳優の出演作品を検索。人気順。ページ送り機能はつけず、また、1ページ目のみ表示の簡素型とした。アプリ実行のビデオ：スクリーンのデザイン：「Starringfilms」ボタンをタップすると、右図の赤点線部分が非表示となり、緑点線部分が全面表示される。ブロック・コード：1.変数pageに1を設定。今回は1ページのみ表示。URLに埋め込むパラメーターを日本語の場合と英語の場合にわけて変数parameterListに設定。2.関数setParameters：parmeterListより日本語(index2)あるいは英語(index1)いずれを選択するかにより、language,region,countryの変数に値を設定する。3.日本語を選択した場合、関数setParametersのパラメーターindexとして2...MITAppInventorで遊ぶ(THEMOVIEDB8）
MIT App Inventorで遊ぶ (色と描画3-ColorPicker1-）
MITAppInventorのチュートリアルの定番として、カラーピッカーがある。最初に見た時は、えっえっ。。。どうしてできるの？と不思議に思った。タネを明かせば、簡単。componentの中に、キャンバス内の特定ポイントの色をRGBで取得できるもの（以下）が用意されている。それだけのことなのだが。アプリ実行のビデオ：（ビデオの撮影がうまくいきませんでしたが。。。）スクリーンのデザイン：アプリに同梱した3枚の写真の他に、写真ライブラリーからまたは撮影した写真からも色を取得できる。ブロック・コード：変数color：取得した色のRGBの値をリスト形式で格納変数photoList：同梱の画像名のリストを格納変数colorIndex（photoIndexとすべきか？）：現在表示している同梱画像のindexを格納「N...MITAppInventorで遊ぶ(色と描画3-ColorPicker1-）
MIT App Inventorで遊ぶ (色と描画2-お絵描き帳2-）
今回は、少しお絵描き帳のアプリらしく。。。基本的な機能を整えた。データの保存については、お手軽にTinyDBというMITAppInventorが用意してるものを使用。データはスマホ内部に保存される。TinyDBは小さな容量のファイル保存には適しているが、画像ファイルのような大きな容量の場合は適当なDBとは言えないようだ。アプリ実行のビデオ：やっぱり絵はどうしようもないくらいヘタ。スクリーンのデザイン：Tabletsizeでキャプチャー。ブロック・コード：1.描画の部分：前回と同じ。2.「全消去」ボタン：キャンバス（描画）を消去すると共に、背景画像（写真ライブラリーより取り込んだ画像）も消去。3.「画像消去」ボタン：キャンバス（描画）を消去。3.写真ライブラリーより画像を取得するImagePickerの動作...MITAppInventorで遊ぶ(色と描画2-お絵描き帳2-）
MIT App Inventorであのアプリを作ってみる (KanooPizza 3）
メニューの選択画面を追加。と言っても、メニュー選択機能を付加するのではなく、担当店舗の詳細を表示できるようにした。（半熟アプリだが、前に進むためにアップ）アプリ実行のビデオ：スクリーンのデザイン：メニュー選択画面のみ。左図の赤点線内のボタンをタップすれば右図のように非表示としていたcomponentが開く。今回、地図を使っているが、MITAppInventorのMapcomponentを利用。GoogleMapより古臭い感じはするが、マーカーなどが簡単に追加することができるので。このMapcomponentの反応は悪く、うまく指定した緯度経度の場所を表示しないことがある。やり直すとうまく表示するのでOK。ブロック・コード：1.「戻る」ボタン：二つ前のスクリーン（郵便番号を入力して住所を取得するスクリーン）...MITAppInventorであのアプリを作ってみる(KanooPizza3）
MIT App Inventorと失敗、勘違い等諸々 1（JSONファイルのデコード）
MITAppInventorなら、比較的簡単にPublicAPIからデータを取得して、様々なアプリを作ることができる。でも、このブログを始めた頃は、JSONファイルをデコードするメソッドを間違えてたというか、適当にメソッドを使ったため随分苦労した。以前のブログでも触れたことがあるが。。。MITAppInventorでは、通常以下のようなブロック・コードでJSONファイルを取得。スクリーンの初期化時に所定のURLに対し、GETリクエストを行う。取得したオリジナルのJSONファイル：今回は、フェイク・データを提供してくれているhttps://dummyjson.com/よりデータ個数を1つに限定してデータを取得。赤字、下線は当方にて加えたもので、例として後でこのデータを抽出する。{"users":[{"id"...MITAppInventorと失敗、勘違い等諸々1（JSONファイルのデコード）
MIT App Inventorで遊ぶ (色と描画1-お絵描き帳1-）
モバイルアプリ作成の初心者なら一度は作る、、、、、、お絵描きアプリ。一度はやってみないと。指でスクリーンをなぞると線が描けるんですから！私のような素人にとってはちょっとした感動の瞬間。（イーロン・マスク氏が、初めてのStarship打ち上げの際に、"Successisnotguaranteed,butexcitementisguaranteed."と言ったのを思い出した。）今まで見たこともないようなアプリではなく、今までに何度も何度も出くわした、平凡なアプリだが。YouTubeにもMITAppInventorのみならず、色々なプログラミング言語で作られたお絵描きアプリの紹介がたくさんある。まずは、線を描く。アプリ実行のビデオ：絵は下手だが、ここは恥を忍んで。。。NewDrawingApp1とNewがついて...MITAppInventorで遊ぶ(色と描画1-お絵描き帳1-）
MIT App Inventorであのアプリを作ってみる (KanooPizza 2）
前回、郵便番号を入力すると、その地域に対する丁目の候補が表示され、選択できるようにしたいと書いたが、解決方法は意外と簡単に見つかった。全国の市区町村に存在する丁目を提供してくれるAPIがあった。Geoloniablogというサイト。以下は東京都世田谷区の丁目を検索した結果の冒頭部分。他の都道府県の市区町村も検索してみたら、データが取得できた。今回は、とりあえず、東京都世田谷区に絞ってアプリを作成している。もし、全国のピザ販売店の位置情報などが取得できるのであれば、世田谷区に限ることはないが。。。無理な相談！また、そんな膨大なデータを作ることは不可能。[{"town":"赤堤一丁目","koaza":"","lat":35.655245,"lng":139.641523},{"town":"赤堤二丁目","...MITAppInventorであのアプリを作ってみる(KanooPizza2）
MIT App Inventorで遊ぶ (THE MOVIE DB 7）
映画のカテゴリー別（複数選択可能）の情報が取得できるようにした。通常、どの映画も複数のカテゴリーに属している。以前にも利用したが、チェックボックスの処理を行うのにgeneric(AnyComponent)のイベント・ハンドラー（この言い方が正しいかどうかはわからぬが？）を使用した。アプリ実行のビデオ：「MovieListByCountry」で、Byreleasedateで検索している画面があるが、前回だったか、トップは2115年に封切予定の映画がリストアップされていた。現在、その映画はリストアップより外されたようである。なお、ビデオを撮り忘れたが、どのカテゴリーにもチェックを入れない場合は、全てが対象となる。この時は下図の通りAllcheckedが表示される。（赤枠内）スクリーンのデザイン：新たに追加した...MITAppInventorで遊ぶ(THEMOVIEDB7）
MIT App Inventorであのアプリを作ってみる (KanooPizza 1）
ド○ノ・ピザのスマホアプリに似たようなものを作ってみる。機能がたくさんあるので、少しずつ追加していきたい。途中で投げ出すかもしれないが。最初で最後？でも、まずは、トライ！（東京都世田谷区に限定したアプリ）MITAppInventorのアプリにJavaScriptを組み込む（連携させる）ことができるので、今回は、初めての試みとして、ネット上にもサンプルが豊富にある携帯電話番号のチェックに使ってみた。関数と変数の名前、そして返り値を変えただけで、ほぼそのまま使わせてもらった（と言ってもいい）ウエッブサイト、YouTubeのチュートリアルなどは以下の通り。1.IntegrateaJavaScriptcodeinanAppInventorApplication2.MITAppInventorHelp:Javasc...MITAppInventorであのアプリを作ってみる(KanooPizza1）
MIT App Inventorであのアプリを作ってみる (SpeakByWriting 2）
前回は、メッセージの表示を上下逆さまにするボタンを設置した、今回はボタンを取り除き、スマホを前後に傾けることにより表示の方向を変える方法に変更した。「MITAppInventorで遊ぶ(TreasureHuntApp1）」で使ったAccelerometerSensorを利用。デジタル・ペイのアプリなんかにも、お店側の人が見やすいように、スマホを前後に傾けると表示が逆になるものがありますが、ちょうどそのようなもの。アプリ実行のビデオ：スクリーンのデザイン：今回もTabletsizeでキャプチャーした。右端の黒色の縦長長方形は、実行ビデオの通り、傾きをボールの移動で示すためのもの。白いボールが上の方向に移動している時は、スマホの上部を下に傾けた時。下の方向の場合は、スマホの下部を下に傾けた時。ブロック・コード...MITAppInventorであのアプリを作ってみる(SpeakByWriting2）
MIT App Inventorで遊ぶ (THE MOVIE DB 6）
映画の批評を見ることができるようにした。メインページ(Screen1)で選択した言語で批評を検索するべきだが、英語以外の言語の場合、批評がほとんどないため、英語の批評を表示することとした。なお、批評を書いた批評家の名前をクリックするとTheMovieDBのウエッブサイトに飛ぶことができる。さらに、同ウエッブサイトで、批評家の名前をクリックすると、その批評家の活動について知ることができる。アプリ実行のビデオ：スクリーンのデザイン：追加したReviewScreenのみ。Tabletsizeでキャプチャー。ブロック・コード：追加ブロックのみ。＜Screen1＞映画一覧のListViewの列をクリックすると、映画のID、ポスター画のパス、映画のタイトルをreviewScreenへ渡し、reviewScreenへ遷...MITAppInventorで遊ぶ(THEMOVIEDB6）
MIT App Inventorであのアプリを作ってみる (SpeakByWriting 1）
YouTubeには、人気のあるアプリのUI(UserInterface)を真似て、種々のプログラミング言語で似たようなアプリを作って、その言語やアプリの作り方を教えてくれるチュートリアルがたくさんある。MITAppInventorでも、どれだけできるのか、やってみようと思う。まずは、比較的簡単なもと思われるものから。********************************************************iOSのアプリに「しゃべって筆談」というアプリがある。話しをすると、画面に文字として表示されるという簡単なアプリだが、結構役に立つアプリ。iPadにインストールして使っていた。MITAppInventorでこのアプリを再現できるかやってみた。コード的には非常にシンプルで、わざわざこの...MITAppInventorであのアプリを作ってみる(SpeakByWriting1）
MIT App Inventorで遊ぶ (Expenses Memo 3）
カテゴリー(item)別の合計額を円グラフで表示するようにした。文字のサイズを変更できず見にくいグラフとなってしまった。このあたりがグラフの限界？extensionを使えばもう少しマシなグラフを描けるのか？アプリ実行のビデオ：FirebaseRealtimeDBからのデータの取得が時々うまくいかない。スムースにいく時もあるのに。スクリーンのデザイン：左から、メインのScreen1には円グラフのScreenに遷移するためのボタンを追加。円グラフを表示するpieChartScreenは見ての通り。棒グラフと同様、Chart1の中にChartData2D1を組み込んでいる。ブロック・コード：1.円グラフの各扇形の背景色は、緑系のランダムな色に設定。RGBの値をリスト形式で保存する変数colorsを作成。なお、緑...MITAppInventorで遊ぶ(ExpensesMemo3）
MIT App Inventorで遊ぶ (The Movie DB 5）
言語、地域を増やした。これまでは、bypopularity（人気投票？順）でソートしていたが、byreleasedate（封切日、公開日）でソートしたリストも見ることができるようにした。byreleasedateは、これから先に封切られる映画も含まれるということで、これからどんな映画が制作されようとしているのか、または制作途中なのかがわかる。USA/byreleasedateで検索したら、2115年封切予定の映画がトップに来た。下記アプリ実行のビデオで確認できる。アプリ実行のビデオ：スクリーンのデザイン：左がメイン画面Screen1。スマホサイズでは全体を見通せないので、タブレットサイズでキャプチャーした。右がfreeSearchScreen。.ブロック・コード：＜Screen1＞下段タブの一番右側のアイ...MITAppInventorで遊ぶ(TheMovieDB5）
MIT App Inventorで遊ぶ (Expenses Memo 2-1 追加訂正部分のみ）
＜追加訂正＞0,0の位置が上にずれている問題は、単にグラフの初期設定が適切になされていなかったためと判明。初期設定後は以下の通りとなった。ExpensesMemo2は、訂正追加済み。グラフの初期設定とは以下の部分で、XFromZeroにチェックが入っていた。チェックを外すと期待通りに表示された。なお、YFromZeroのチェックを外すと、縦棒が左によってしまって、最初の縦棒の表示幅が半分になってしまった、問題だった点：以下のように0,0の位置が上にずれていた。*************************************************************************前回までのブログ：MITAppInventorで遊ぶ（ExpensesMemo2）MITAppInven...MITAppInventorで遊ぶ(ExpensesMemo2-1追加訂正部分のみ）
MIT App Inventorで遊ぶ (Expenses Memo 2）
＜追加訂正あり＞費用の推移を見るためのグラフを追加してみたが、グラフに関する知識不足のためこれが精一杯というところ。今回は棒グラフ。円グラフにも挑戦予定。なお、削除機能も追加した。アプリ実行のビデオ：（データ取得がうまくいかず、何度もRefreshボタンをタップしている場面がある。基本的にデータ取得のブロック・コードに欠陥があるかもしれない。）スクリーンのデザイン：グラフを表示するスクリーンに遷移するためのボタンを追加。componentとしては、Char1およびChartData2D1を追加。ChartData2D1はデータまわりに関係するcomponentで、Chart1の中に組み込む必要がある。真ん中のcomponentsリストを見ると、Chart1の中にChartData2D1が組み込まれているの...MITAppInventorで遊ぶ(ExpensesMemo2）
MIT App Inventorで遊ぶ (THE MOVIE DB 4）
映画関係者の一覧リストを表示するボタンの位置の座りが良くなかったので、全体のレイアウトを若干変更するとともに、地域と言語（要するに、言語の選択？）を選択できるようにした。デフォルトは、英語(USA)にした。アプリ実行のビデオ：スクリーンのデザイン：言語（地域）選択のボタンおよびスター検索ボタンを下部に移動（タブ形式に変更）言語（地域）選択ボタンは、左側の画像では4つしかないが、実際には右側のcomponentsパネルの通り5つある。(JP=日本,USA=米国,FR=フランス,KR=韓国,CN=中国)ブロック・コード：追加部分のみ。1.TheMovieDBのサンプルURL何度を見ると、region,country,language(lang)の3つのパラメーターが使われているので、それに倣って作っているもの...MITAppInventorで遊ぶ(THEMOVIEDB4）
「ブログリーダー」を活用して、kanooさんをフォローしませんか？
MITAppInventor2を使ったアプリ作成は続けていくが、この機会に、Python,JavaScript,Swiftなどの言語を使ったアプリ作成も勉強しようかな、と考えている。Pythonは顔認識、データの扱いあたりから始めてAIの分野に足を踏み入れることができたらなあ〜と、JavaScriptやSwiftはMITAppInventor2で作っていたようなアプリの作成ができたらいいなあ〜と、漠然と、でもワクワクしながら考えている。まあ、あとは寿命との戦いとなるかな？今年で喜寿を迎えるし！いずれにせよ、gooblogサービスの終了が良い引き金となってくれたように思う。完追記：それから、このブログをそのまま他のブログに引っ越すことは全く考えていない。ブログを始める時は、また、1からやりたいと思っている。MITAppInventor2で遊ぶ閉鎖その2
本ブログは、2025年4月15日をもって閉鎖する予定です。また、適当なツールあるいはSNSがあれば、同じような内容で再開したいと考えています。ありがとうございました。**************************************************MITAppInventor2で遊ぶ閉鎖
genericのブロックは便利だが、気をつけないといけない、と言うことを再認識させられた。ボタンの画像を表示する動作（flip)はもう少し改善の余地があるようだ。絵柄を変更、あるいは選択できるようにするのも面白いかも。アプリ実行のビデオ：スクリーン・デザイン：test用のLabelは非表示とし、新たに「Showtips」ボタンを設定した。このボタンをタップすると、左上端からの画像ファイル名が表示される。対となる画像を簡単に見つけられる「禁断のボタン」。ブロック・コード：大きな変更点と言うか、唯一の変更点は以下の通り。genericのブロック「whenanyButton.Click」の適用を16個のボタンに限定。これにより、「Flip」「Reset」のいずれのボタンもこのブロックの影響を受けることは無くなっ...MITAppInventor2で遊ぶ(MemoryGame2）
YouTubeで見つけたこのビデオ（BuildAMemoryCardGameinHTMLCSS&JavaScript）に触発されて作り出したのが約1ヶ月前。アプリ自体は基本的に思った通りに動作するのだが、いかんせんエラー表示(RuntimeError)が出てしまう。Listより存在しないindex0の値を取り出そうとしている、とのエラーメッセージ。MITAppInventor2の場合、Listのindexは1から始まるが、index0の値を取り出そうとしているらしい。う〜ん、わからん。今回、とりあえずできたところまででアップすることとした。なお、今回のアプリ実行のビデオでは、エラー部分は見苦しいのでカットした。エラーの内容は以下の通り。エラーが出るのは、「Flip」および「Reset」ボタンをタップした時...MITAppInventor2で遊ぶ(MemoryGame1）
各種お天気情報の表示および対象都市の変更ボタンを実装。ちょっとは、お天気アプリらしくなった。現在、日付の変更、選択にListPickerを利用しているが、前回のブログでも触れた通り、次回以降に「＜」「＞」のようなボタンで変更可能にしたい。それとも良い別の方法が見つかればその方法を採用したい。まだ、検討中の段階。アプリ実行のビデオ：スクリーン・デザイン：testlabelを非表示に。その他のお天気情報表示labelも初期段階でTextは全て空白に変更。お天気アイコンのみ初期画像を表示。ブロック・コード：変更および追加のブロック・コードのみ。前回、対象都市名の頭文字を大文字に変更する関数を作成したが、対象都市名に限らず一般的に頭文字を大文字にできるような関数に変更した。考え方はいたってシンプルで、「tokyo...MITAppInventor2で遊ぶ(PinpointWeather2）
またまた、お天気アプリ。ブロック・コーディングの練習にもってこいの素材なので。今回は、都市名をインプットしてお天気情報をゲットして、当日のデータを表示。その後は日付を選択してそれぞれの日付のデータを表示するというもの。「+」ボタンをタップすれば、他の都市名をインプットし当該都市のお天気情報をゲットできるもの。ほとんど目新しいものはなし。今回はとりあえず、日付をゲット。これが問題なければ、次から日付をキーにお天気情報を抽出し、画面にレイアウトする予定。日付を変更する場合は、ListView（リスト形式で日付を表示し、その中から該当の日付をタップして選択）で日付を選択しているが、これを「＜」「＞」のようなボタンで日付を変更するようにしたい。アプリ実行のビデオ：スクリーン・デザイン：ブロッック・コード：変数ta...MITAppInventor2で遊ぶ(PinpointWeather1）
Firebaseのデータベースを利用したり、PublicAPIを使う、いわゆるネットを介したアプリはMITAppInventor2にとって難しい。うまくいく時は非常にうまくいく。当たり前だけど！前回は、口座を持っているKanooKanaのみのアプリ操作を録画したが、kanooKanaに加えKanooKeiのアプリ操作も録画し2人で使っているところをビデオに録画してみた。スクリーン・デザインとブロック・コードは同じなので省略。どうしても、（1回だけだけど）Warningが表示されてしまう。まあ、「Reload」ボタンをタップすれば正常に表示してくれるので、OKというところか。アプリ実行のビデオ：（ビデオの中で「KanooKen」と表示あるのは「KanooKei」の間違い）KanooKanaとKanooKei...MITAppInventor2で遊ぶ(銀行屋さんごっこ1-おまけ-）
Firebaseを利用して金融機関のスマホ・アプリのシンプルなものを作ってみることにした。ヒントを与えてくれたのは、このYouTubeビデオ。Let'scodeabeginnerPythonBANKINGPROGRAM今回の設定は、1.KanooBankという架空の銀行2.同銀行に2人が口座を保有3.それぞれの入金、出金およびその2人の間での送金をトレースするこのアプリでは、データベースを扱うときの基本CRUD(Create/Read/Update/Delete)の内、CRを実装。アプリ実行のビデオの通り、「取引実行」ボタンをタップするとWarningが表示されたり、残高がリアルタイムに変更されないなどまだまだ、問題多いが、このアプリを作り始めて随分時間も経過したので、この段階で一旦アップするもの。引き続...MITAppInventor2で遊ぶ(銀行屋さんごっこ1）
前回の問題点の解決と「べき乗」および「平方根」の追加も行った。ほぼ期待した通りの計算結果を表示してくれるようになった。残る改善点としては、式の途中でも「べき乗」および「平方根」を使用できるようにすることだが、これはちょっと難しそう。また、「べき乗」の式の表示も一工夫が必要なようだ。アプリ実行のビデオ：スクリーン・デザイン：式を表示、計算結果を表示の部分は前回、今回とも同じ。今回の画面前回の画面ブロック・コード：主な追加点は、Xʸと√のボタンがタップされた時の処理。ボタン操作のブロックは以下の通り。＜最初の赤黄点線で囲んだ部分＞1.Xʸボタンをタップした時は、他の数字、演算子と同様、変数calculationListにJavaScriptのべき乗の演算子である「**」を追加する。2.√ボタンをタップした時は...MITAppInventor2で遊ぶ(Calculator2JavaScript）
CodewithAniaKubówのYouTubeアカウントに「LearnJavaScriptbybuildingtheEASIESTCalculator!-Supereasy!」というTutorialがあったので早速MITAppInventor2でもできるかやってみた。JavaScriptのeval関数を使ったものだが、closedの環境でちょこっと楽しむ程度だったらいいだろう。画面作成に時間を要したが、コード自体はいたって簡単なお手軽アプリ。ただし、ビデオの通り、ちょっと期待通りには動いてくれない場合があるようなので、次回改善予定。たとえば、100/2+50まで計算してその結果100が表示されるが、続けて/2をタップすると、50を期待したが、75となってしまうなど。アプリ実行のビデオ：スクリーン・デザ...MITAppInventor2で遊ぶ(Calculator1JavaScript）
前回、switchstatementの代わりにifstatementを使用したが。switchstatementを代替するものがMITAppInventor2にないかググっていたら、MITAppInventorHelpに「Isthereaswitchcaseextensioninsteadofnumerousif/then/else?」という記事があり、webviwerブロックを使ってJavaScriptで判定させてはどうかとのアドバイスがあった。以前にも電話番号をチェックするのにJavaScriptを使ったことがあるので早速やってみた。アプリ実行のビデオ：ビデオは内容的に前回のブログと全く同じですが。。。スクリーン・デザイン：JavaScriptを実行させて、リターン値を受け取るためWebViewerブ...MITAppInventor2で遊ぶ(じゃんけん特別編3JavaScript）
前回に引き続き、YouTuber「AniaKubów」の3waystocodeRockPaperScissorsinJavaScript(BeginnertoIntermediatetoAdvanced!)のIntermediatelevelをMITAppInvwentor2でどこまでやれるかやってみた。「AniaKubów」のコード（JavaScript+HTML）はこちら。MITAppInventor2では、UserInterfaceはあらかじめDesignerPanel上に配置しておく必要がある。したがって、チュートリアルのように、コードで各画面要素を生成して配置していくことはできない、と思う。しかし、とりあえず要素だけを素の状態で配置して、背景色、サイズとかの属性はブロック・コードで指定していくと...MITAppInventor2で遊ぶ(じゃんけん特別編2）
YouTuber「AniaKubów」のアカウントに3waystocodeRockPaperScissorsinJavaScript(BeginnertoIntermediatetoAdvanced!)というJavaScriptのチュートリアルがあったので、MITAppInventor2で同じようにできるのかやってみた。今回は、初心者向けの一番簡単なコード。「AniaKubów」のコード（JavaScript+HTML）はこちらに。アプリ実行のビデオ：TitleVisibleのチェックを外すのを忘れたので「Screen1」が表示されてしまった。スクリーン・デザイン：ブロック・コード：コンピューターが選択した手、ユーザーが選んだ手、勝負の結果をそれぞれ格納する変数を設定タップしたボタンの表示名を小文字に変更...MITAppInventor2で遊ぶ(じゃんけん特別編1）
賭け金の設定ができるようにした。アプリ実行のビデオ：3つの絵柄が揃う大当たりを出して録画しようと思って何度も回してみたが、ビデオの通りダメだった。スクリーン・デザイン：Tabletサイズのスクリーンショットを表示ブロック・コード：以下3つの変数を追加変数yourInitialFund：最初の手持ち金を格納変数yourRemainingBetAmount：賭けた後の手持ち金を格納（yourRemainingFundAmountとすべきだったかも）変数yourBetAmount：賭けたお金を格納画面の初期化時に最初の手持ち金を表示「Spin」ボタンをタップした時の動作で追加した主な部分（赤黄点線部分）：手持ち金より入力した賭け金が多い場合には、「手持ち金を超過している」旨のポップアップを表示「Stop3」ボタ...MITAppInventor2で遊ぶ(SlotMachine2）
まずはスロット・マシンを動かすだけの単純なもの。賭け金の設定など、次回はもう少し「賭け事」らしくしたい。アプリ実行のビデオ：スクリーン・デザイン：tabletサイズでのスクリーンショット。ブロック・コード：変数images：使用するimageのファイル・リストを格納。3つのスロットにそれぞれシャッフルされたimageリストをセットするための変数変数lengthOfImagesList：imageの個数を格納画面初期化時に使用する3つのClockのintervalを100ミリ秒に念のため設定するとともにimageの個数を変数lengthOfImagesListにセット。（intervalはあらかじめデザイナーパネルの属性設定欄で設定ずみではあるが）関数clearSymbolImages：imageブロックの...MITAppInventor2で遊ぶ(SlotMachine1）
今回は、「9HOURSofPythonProjects-FromBeginnertoAdvanced」#3-Rock,Paper,Scissors(Easy)。プログラミング初心者向けTutorialsには必ずあると言ってもよい「じゃんけんゲーム」。これもシンプルなゲーム。アプリ実行のビデオ：スクリーン・デザイン：左端の初期画面の中で下部に配置されているボタンのうち「3」をタップすれば右側の画面に遷移する。ブロック・コード：初期画面で「3」をタップした時に関係するブロックのみ。「3」をタップしたら、関数makeVAVisibleがパラメーターとして「1VA3」を受け取り実行。また、関数initButtonImageを実行して、関係のButton、Image、Labelを初期化。3つのボタン（グー、チョキ、...MITAppInventor2でもできるかやってみた(SmallApps3じゃんけんゲーム1）
今回は、数当てゲーム。「9HOURSofPythonProjects-FromBeginnertoAdvanced」#2-NumberGuessingGame(Easy)シンプルなアプリなので特に問題となるような点はなかった。アプリ実行のビデオ：スクリーン・デザイン：左端：アプリの初期画面中央・右端：初期画面で2をタップしたときに表示されるアプリの画面.ブロック・コード：上限(topOfrange)をインプットする＝＞0〜上限の間の数字から無作為に選択された数字を当てるゲーム。上限の数字を格納する変数topOfRange、無作為に選択された数字を格納する変数randomNumber2を0で初期化。関数clearVarsVA2：変数の初期化とTextBoxを空白で初期化。testLabelVA2はテスト用の...MITAppInventor2でもできるかやってみた(CollectionofSmallApps2）
以前、MITAppInventor2でアプリを作成していく際に参考にしたウエッブサイト、YouTubeなどをアップしたことがある。今回はハードも含めて「私の道具箱」というタイトルで再度まとめてみた。1.パソコン：1-1MacBookPro13-inchM12020メモリ:16GB（メイン）1-2MacBookPro(Mid2012)2.3GHzクアッドコアIntelCorei7メモリ：16GB（古い古いCanonprinterMP470専用）（2012年以前は、一時期Macを使った以外は主にNEC、Gateway、Dell、日立などのWindowsPCを使用。）2.スマホ：2-1モトローラmotog53y5G（MITAppInventor2で作成したアプリのシミュレーション用およびアプリのインストール先）...MITAppInventor2で遊ぶ-番外編1-(私の道具箱）
インディアン・ポーカーとは？このYouTubeを見るのが早いと思う。＝＞「IndianPokerCardGameRules」スマホのアプリもあるらしいが、今回は、MITAppInventor2で簡単なアプリを作ってみたい。以前「ポーカー・ゲーム1」でも使用したDeckofCardsAPIを利用。アプリ実行のビデオ：スクリーン・デザイン：縦に長い画面なので2つに分けて表示。ブロック・コード：1.Screen1の初期化時に「カードを配る」ボタンを無効に設定まず、「カードを受取る」ボタンをタップして、52枚のカードのIDを取得する必要があるため。IDが取得できたら、「カードを配る」ボタンをタップして、取得したIDをキーにして具体的なカード（今回の場合4枚ずつ）データを取得することになる。したがって、「カードを配...MITAppInventorで遊ぶ(インディアンポーカー1）
YouTubeにあった「9HOURSofPythonProjects-FromBeginnertoAdvanced」をMITAppInventor2でできるのかやってみた。今回は、略語が何を表しているのかを答える簡単なアプリと、思いきや、ちょっと手こずった。アプリ実行のビデオ：スクリーン・デザイン：左端：初期画面中央：初期画面で「1」をタップした時に遷移する画面右端：中央の画面を上方向にスクロールした画面今回は、「1」をタプした時が対象。ブロック・コード：スクリーン・デザインで表示している初期画面の部分＝＞今回は、5つのVerticalArrangements(mainScreenVA+subScreen1VA1〜subScreen1VA4)でScreen1が構成されている。mainScreenVAは上記...MITAppInventor2でもできるかやってみた(CollectionofSmallApps1）
パックマンというゲームはあまりよく知らないのだが、ネット情報を見て、こんな感じなのかなというパックマンを作ってみることにした。まずは、パックマンが動き、パワーエサを食べ、ゴーストと会う（衝突する？）程度まで。これで終わってしまうかもしれないが。。。理想的には、GoogleDoodleのようなものを作成できたらなあ〜と思うが。。。なかなか難しそう！アプリ実行のビデオ：スクリーンのデザイン：右側画面の下部の右向きと左向き矢印はブロック・コードにて、それぞれ上向き、下向き矢印に回転させている。ブロック・コード：1.extensionを使って右向き矢印と左向き矢印をそれぞれ時計回りと反対に90度回転させて、上向き矢印、下向き矢印に変更している。変数powerLevelの数値をpowerLevelLabelに表示。...MITAppInventorであのアプリを作ってみる(Pacman1）
お絵描き帳の中にカラーピッカーを追加する。もうすでにどちらのアプリも作成済みなので、新しい要素は特にない。アプリ実行のビデオ：スクリーンのデザイン：右2つは、描画モードとカラーピッカーモードの画面。.ブロック・コード：カラーピッカーの表示の部分のみ。（前回までと重複部分が多いので、かなり省略。）1.背景色がグラデーションの「カラーピッカー」ボタンをタップした時の動作。描画用キャンバス(Canvas1)が表示されている時は、カラーピッカー用キャンバスが設定されているVerticalArrangement3を表示。カラーピッカー用キャンバス(Canvas2)に配置されているBall1（黒色の丸）の位置をx=120,y=120にセットする。（ほぼ中心）「カラーピッカー」ボタンの表示文字を「キャンバスへ戻る」に変...MITAppInventorで遊ぶ(色と描画4-ColorPicker2-）
俳優の出演作品を検索。人気順。ページ送り機能はつけず、また、1ページ目のみ表示の簡素型とした。アプリ実行のビデオ：スクリーンのデザイン：「Starringfilms」ボタンをタップすると、右図の赤点線部分が非表示となり、緑点線部分が全面表示される。ブロック・コード：1.変数pageに1を設定。今回は1ページのみ表示。URLに埋め込むパラメーターを日本語の場合と英語の場合にわけて変数parameterListに設定。2.関数setParameters：parmeterListより日本語(index2)あるいは英語(index1)いずれを選択するかにより、language,region,countryの変数に値を設定する。3.日本語を選択した場合、関数setParametersのパラメーターindexとして2...MITAppInventorで遊ぶ(THEMOVIEDB8）
MITAppInventorのチュートリアルの定番として、カラーピッカーがある。最初に見た時は、えっえっ。。。どうしてできるの？と不思議に思った。タネを明かせば、簡単。componentの中に、キャンバス内の特定ポイントの色をRGBで取得できるもの（以下）が用意されている。それだけのことなのだが。アプリ実行のビデオ：（ビデオの撮影がうまくいきませんでしたが。。。）スクリーンのデザイン：アプリに同梱した3枚の写真の他に、写真ライブラリーからまたは撮影した写真からも色を取得できる。ブロック・コード：変数color：取得した色のRGBの値をリスト形式で格納変数photoList：同梱の画像名のリストを格納変数colorIndex（photoIndexとすべきか？）：現在表示している同梱画像のindexを格納「N...MITAppInventorで遊ぶ(色と描画3-ColorPicker1-）
今回は、少しお絵描き帳のアプリらしく。。。基本的な機能を整えた。データの保存については、お手軽にTinyDBというMITAppInventorが用意してるものを使用。データはスマホ内部に保存される。TinyDBは小さな容量のファイル保存には適しているが、画像ファイルのような大きな容量の場合は適当なDBとは言えないようだ。アプリ実行のビデオ：やっぱり絵はどうしようもないくらいヘタ。スクリーンのデザイン：Tabletsizeでキャプチャー。ブロック・コード：1.描画の部分：前回と同じ。2.「全消去」ボタン：キャンバス（描画）を消去すると共に、背景画像（写真ライブラリーより取り込んだ画像）も消去。3.「画像消去」ボタン：キャンバス（描画）を消去。3.写真ライブラリーより画像を取得するImagePickerの動作...MITAppInventorで遊ぶ(色と描画2-お絵描き帳2-）
メニューの選択画面を追加。と言っても、メニュー選択機能を付加するのではなく、担当店舗の詳細を表示できるようにした。（半熟アプリだが、前に進むためにアップ）アプリ実行のビデオ：スクリーンのデザイン：メニュー選択画面のみ。左図の赤点線内のボタンをタップすれば右図のように非表示としていたcomponentが開く。今回、地図を使っているが、MITAppInventorのMapcomponentを利用。GoogleMapより古臭い感じはするが、マーカーなどが簡単に追加することができるので。このMapcomponentの反応は悪く、うまく指定した緯度経度の場所を表示しないことがある。やり直すとうまく表示するのでOK。ブロック・コード：1.「戻る」ボタン：二つ前のスクリーン（郵便番号を入力して住所を取得するスクリーン）...MITAppInventorであのアプリを作ってみる(KanooPizza3）
MITAppInventorなら、比較的簡単にPublicAPIからデータを取得して、様々なアプリを作ることができる。でも、このブログを始めた頃は、JSONファイルをデコードするメソッドを間違えてたというか、適当にメソッドを使ったため随分苦労した。以前のブログでも触れたことがあるが。。。MITAppInventorでは、通常以下のようなブロック・コードでJSONファイルを取得。スクリーンの初期化時に所定のURLに対し、GETリクエストを行う。取得したオリジナルのJSONファイル：今回は、フェイク・データを提供してくれているhttps://dummyjson.com/よりデータ個数を1つに限定してデータを取得。赤字、下線は当方にて加えたもので、例として後でこのデータを抽出する。{"users":[{"id"...MITAppInventorと失敗、勘違い等諸々1（JSONファイルのデコード）
モバイルアプリ作成の初心者なら一度は作る、、、、、、お絵描きアプリ。一度はやってみないと。指でスクリーンをなぞると線が描けるんですから！私のような素人にとってはちょっとした感動の瞬間。（イーロン・マスク氏が、初めてのStarship打ち上げの際に、"Successisnotguaranteed,butexcitementisguaranteed."と言ったのを思い出した。）今まで見たこともないようなアプリではなく、今までに何度も何度も出くわした、平凡なアプリだが。YouTubeにもMITAppInventorのみならず、色々なプログラミング言語で作られたお絵描きアプリの紹介がたくさんある。まずは、線を描く。アプリ実行のビデオ：絵は下手だが、ここは恥を忍んで。。。NewDrawingApp1とNewがついて...MITAppInventorで遊ぶ(色と描画1-お絵描き帳1-）
前回、郵便番号を入力すると、その地域に対する丁目の候補が表示され、選択できるようにしたいと書いたが、解決方法は意外と簡単に見つかった。全国の市区町村に存在する丁目を提供してくれるAPIがあった。Geoloniablogというサイト。以下は東京都世田谷区の丁目を検索した結果の冒頭部分。他の都道府県の市区町村も検索してみたら、データが取得できた。今回は、とりあえず、東京都世田谷区に絞ってアプリを作成している。もし、全国のピザ販売店の位置情報などが取得できるのであれば、世田谷区に限ることはないが。。。無理な相談！また、そんな膨大なデータを作ることは不可能。[{"town":"赤堤一丁目","koaza":"","lat":35.655245,"lng":139.641523},{"town":"赤堤二丁目","...MITAppInventorであのアプリを作ってみる(KanooPizza2）
映画のカテゴリー別（複数選択可能）の情報が取得できるようにした。通常、どの映画も複数のカテゴリーに属している。以前にも利用したが、チェックボックスの処理を行うのにgeneric(AnyComponent)のイベント・ハンドラー（この言い方が正しいかどうかはわからぬが？）を使用した。アプリ実行のビデオ：「MovieListByCountry」で、Byreleasedateで検索している画面があるが、前回だったか、トップは2115年に封切予定の映画がリストアップされていた。現在、その映画はリストアップより外されたようである。なお、ビデオを撮り忘れたが、どのカテゴリーにもチェックを入れない場合は、全てが対象となる。この時は下図の通りAllcheckedが表示される。（赤枠内）スクリーンのデザイン：新たに追加した...MITAppInventorで遊ぶ(THEMOVIEDB7）
ド○ノ・ピザのスマホアプリに似たようなものを作ってみる。機能がたくさんあるので、少しずつ追加していきたい。途中で投げ出すかもしれないが。最初で最後？でも、まずは、トライ！（東京都世田谷区に限定したアプリ）MITAppInventorのアプリにJavaScriptを組み込む（連携させる）ことができるので、今回は、初めての試みとして、ネット上にもサンプルが豊富にある携帯電話番号のチェックに使ってみた。関数と変数の名前、そして返り値を変えただけで、ほぼそのまま使わせてもらった（と言ってもいい）ウエッブサイト、YouTubeのチュートリアルなどは以下の通り。1.IntegrateaJavaScriptcodeinanAppInventorApplication2.MITAppInventorHelp:Javasc...MITAppInventorであのアプリを作ってみる(KanooPizza1）
前回は、メッセージの表示を上下逆さまにするボタンを設置した、今回はボタンを取り除き、スマホを前後に傾けることにより表示の方向を変える方法に変更した。「MITAppInventorで遊ぶ(TreasureHuntApp1）」で使ったAccelerometerSensorを利用。デジタル・ペイのアプリなんかにも、お店側の人が見やすいように、スマホを前後に傾けると表示が逆になるものがありますが、ちょうどそのようなもの。アプリ実行のビデオ：スクリーンのデザイン：今回もTabletsizeでキャプチャーした。右端の黒色の縦長長方形は、実行ビデオの通り、傾きをボールの移動で示すためのもの。白いボールが上の方向に移動している時は、スマホの上部を下に傾けた時。下の方向の場合は、スマホの下部を下に傾けた時。ブロック・コード...MITAppInventorであのアプリを作ってみる(SpeakByWriting2）
映画の批評を見ることができるようにした。メインページ(Screen1)で選択した言語で批評を検索するべきだが、英語以外の言語の場合、批評がほとんどないため、英語の批評を表示することとした。なお、批評を書いた批評家の名前をクリックするとTheMovieDBのウエッブサイトに飛ぶことができる。さらに、同ウエッブサイトで、批評家の名前をクリックすると、その批評家の活動について知ることができる。アプリ実行のビデオ：スクリーンのデザイン：追加したReviewScreenのみ。Tabletsizeでキャプチャー。ブロック・コード：追加ブロックのみ。＜Screen1＞映画一覧のListViewの列をクリックすると、映画のID、ポスター画のパス、映画のタイトルをreviewScreenへ渡し、reviewScreenへ遷...MITAppInventorで遊ぶ(THEMOVIEDB6）
YouTubeには、人気のあるアプリのUI(UserInterface)を真似て、種々のプログラミング言語で似たようなアプリを作って、その言語やアプリの作り方を教えてくれるチュートリアルがたくさんある。MITAppInventorでも、どれだけできるのか、やってみようと思う。まずは、比較的簡単なもと思われるものから。********************************************************iOSのアプリに「しゃべって筆談」というアプリがある。話しをすると、画面に文字として表示されるという簡単なアプリだが、結構役に立つアプリ。iPadにインストールして使っていた。MITAppInventorでこのアプリを再現できるかやってみた。コード的には非常にシンプルで、わざわざこの...MITAppInventorであのアプリを作ってみる(SpeakByWriting1）
カテゴリー(item)別の合計額を円グラフで表示するようにした。文字のサイズを変更できず見にくいグラフとなってしまった。このあたりがグラフの限界？extensionを使えばもう少しマシなグラフを描けるのか？アプリ実行のビデオ：FirebaseRealtimeDBからのデータの取得が時々うまくいかない。スムースにいく時もあるのに。スクリーンのデザイン：左から、メインのScreen1には円グラフのScreenに遷移するためのボタンを追加。円グラフを表示するpieChartScreenは見ての通り。棒グラフと同様、Chart1の中にChartData2D1を組み込んでいる。ブロック・コード：1.円グラフの各扇形の背景色は、緑系のランダムな色に設定。RGBの値をリスト形式で保存する変数colorsを作成。なお、緑...MITAppInventorで遊ぶ(ExpensesMemo3）
言語、地域を増やした。これまでは、bypopularity（人気投票？順）でソートしていたが、byreleasedate（封切日、公開日）でソートしたリストも見ることができるようにした。byreleasedateは、これから先に封切られる映画も含まれるということで、これからどんな映画が制作されようとしているのか、または制作途中なのかがわかる。USA/byreleasedateで検索したら、2115年封切予定の映画がトップに来た。下記アプリ実行のビデオで確認できる。アプリ実行のビデオ：スクリーンのデザイン：左がメイン画面Screen1。スマホサイズでは全体を見通せないので、タブレットサイズでキャプチャーした。右がfreeSearchScreen。.ブロック・コード：＜Screen1＞下段タブの一番右側のアイ...MITAppInventorで遊ぶ(TheMovieDB5）
＜追加訂正＞0,0の位置が上にずれている問題は、単にグラフの初期設定が適切になされていなかったためと判明。初期設定後は以下の通りとなった。ExpensesMemo2は、訂正追加済み。グラフの初期設定とは以下の部分で、XFromZeroにチェックが入っていた。チェックを外すと期待通りに表示された。なお、YFromZeroのチェックを外すと、縦棒が左によってしまって、最初の縦棒の表示幅が半分になってしまった、問題だった点：以下のように0,0の位置が上にずれていた。*************************************************************************前回までのブログ：MITAppInventorで遊ぶ（ExpensesMemo2）MITAppInven...MITAppInventorで遊ぶ(ExpensesMemo2-1追加訂正部分のみ）
＜追加訂正あり＞費用の推移を見るためのグラフを追加してみたが、グラフに関する知識不足のためこれが精一杯というところ。今回は棒グラフ。円グラフにも挑戦予定。なお、削除機能も追加した。アプリ実行のビデオ：（データ取得がうまくいかず、何度もRefreshボタンをタップしている場面がある。基本的にデータ取得のブロック・コードに欠陥があるかもしれない。）スクリーンのデザイン：グラフを表示するスクリーンに遷移するためのボタンを追加。componentとしては、Char1およびChartData2D1を追加。ChartData2D1はデータまわりに関係するcomponentで、Chart1の中に組み込む必要がある。真ん中のcomponentsリストを見ると、Chart1の中にChartData2D1が組み込まれているの...MITAppInventorで遊ぶ(ExpensesMemo2）
映画関係者の一覧リストを表示するボタンの位置の座りが良くなかったので、全体のレイアウトを若干変更するとともに、地域と言語（要するに、言語の選択？）を選択できるようにした。デフォルトは、英語(USA)にした。アプリ実行のビデオ：スクリーンのデザイン：言語（地域）選択のボタンおよびスター検索ボタンを下部に移動（タブ形式に変更）言語（地域）選択ボタンは、左側の画像では4つしかないが、実際には右側のcomponentsパネルの通り5つある。(JP=日本,USA=米国,FR=フランス,KR=韓国,CN=中国)ブロック・コード：追加部分のみ。1.TheMovieDBのサンプルURL何度を見ると、region,country,language(lang)の3つのパラメーターが使われているので、それに倣って作っているもの...MITAppInventorで遊ぶ(THEMOVIEDB4）
![【お家でADドメイン】ドメイン名を変更する(1)「再セットアップ：事前準備[1]／データ退避」](https://img.blogmura.com/sites/1280679/post-images/72420546.webp/crop/120x120)
