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

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

MIT App Inventorで遊ぶ (ひとりビンゴ その1)

2024-04-09 07:47:20 | 日記

ビンゴを作ってみた。ビンゴ・マシンがちょっと変だけど、感じは出しているつもり。ビンゴカードは、100均で売っているものを使用する前提。。。

このアプリは、正に「力づく」で無理やり作ったという感じが強いもの。まず、75個のボールを作り、後はひたすらブロックを作っていった。もう少し効率的に作る方法があったのではないかと思う。「骨折り損のくたびれ儲け」とは、このアプリのことを言うのではないかと思う。

今回は、基本的な動作の確認。と言っても、これ以上どうしたいと言うアイデアは、今のところない。

実行画面:

スクリーンのデザイン:

右側のcomponents リストに赤枠で囲んだ「HorizontalArrangement」があるが、これが、7つあり、それぞれのHorizontalArrangementには、12個のLabel(最後は3個で計75個)が設定されている。最初のLabelである selectedLabel1 が見える。

non-visible component として Clockがある。Clock1 は、ビンゴマシンの内側を回転させるために使用、Clock2 はビンゴのボールを上から下に移動させる際に使用。

           

 

ブロック・コード:

1. 変数allNumbersList => ビンゴもの全数字(1〜75)を格納しておく変数。関数make75numbersで数字のリストを作成。

2. ビンゴマシンの内側と外側のリングのサイズ、位置を設定。selectedBallSprite(ビンゴの番号が付されたボール)の初期位置を設定。z座標値(0.9)により内側のリングの裏に設置(z座標値はDesigner画面で設定=>下図。デフォルト値は当然1.0)。

3. 初期画面で上記関数を実行。(selectedBallSpriteのY座標値の設定がダブっていた)

4. Startボタンをタップすると、Clock1を実行。selectedBallSpriteのY座標値を初期値(ビンゴマシンの裏側の見えない位置)に戻す。

5. Clock1の動作内容。内側のリングをClock1のTimeInterval (50ミリ秒) に合わせて10度ずつ時計回り(-10)に回転させる。-360まできたら、0に戻し反復させる。

6. selectedNum => ビンゴの番号、selectedNumList => 出た番号を格納。

7. 全ての番号(初期は1から75)が入っている allNumbersList よりランダムに番号を選択し、selectedNumに割り当てる。

選択された番号を allNumbersList より削除し、この番号をselectedNumListに追加する。

ボール(selectedBallSprite)の画像のファイル名を作成する(例えば、その番号が 6 なら、6.png のように)。

Clock2 を実行し、ボールのY座標300から360へ20ずつ下方へ下げていく。(下のClock2の component )

関数makeSelectedDimを実行し、当該Labelの文字色を薄グレーに変更する。

selectedNumListに格納されている数字の数が75個であれば、ゲームは終了。Notifier1を表示し、ゲームオーバーを告げる。

8. リセットボタンの動作設定。各 component及び変数をブランク、又は初期値に戻す。

9. <以下は、画面下半分に配置した数字のLabelに関する関数(ちょっと順序が逆転しているが)>

数字のLabelの文字色を元の黒色に戻す関数 makeSelectedBlack。リセットボタンをタップした時に実行。

selectedLabel75まであり。(以下同じ)

       ====== 以下省略 ======

該当の数字が出れば、数字の文字色を薄グレーに変える関数 makeSelectedDim                       

                     ====== 以下省略 ======

数字Labelの幅、高さを設定する関数 setLabels。画面の初期化時に実行。

                        ====== 以下省略 ======

 


MIT App Inventorで遊ぶ (YouTube Channel)

2024-04-07 07:52:42 | 日記

MIT App Inventorではあるが、アプリらしいものを作り始めて思ったことは、アプリに完成品というのはないということかな。常にアップデートして、体裁を変更したり、機能を増やしたり。。。作ったままだと、すぐにアプリが陳腐化してしまう。結構怖い世界だなあ、と実感している。

とは言え、いくつかアプリもできてきたので、それらアプリの実行画面ビデオをYouTube Channel(随分昔に設定したアカウント)にアップすることにした。第一の目的は、アプリ(実行画面ビデオ)を整理しておくため。ビデオのファイルはパソコンの中にあることはあるが、整理されていないし、なかなか整理も難しいので。

YouTube Channelはこちら

基本的に、このブログにアップした実行画面のビデオをアップしていく予定だが、若干体裁を整えたり、ブロック・コードも見直したりしたい。(まさか、急遽インストールした映像編集ソフトDaVinci Resolveが活躍する時が来るとは思っていなかった。)

それと、英語版も作成しておきたい。いつまで続くかわからないが。。。

 

 

 


MIT App Inventorで遊ぶ (Count Numbers App 2)

2024-04-06 07:08:51 | 日記

前回は、1から99までの数字から連続する16個の数字を1ずつ数え上げていった。今回は、1から99、1から999、1から9999のいずれかの範囲から連続する16個の数字を取り出し、1ずつ、2ずつ、3ずつのいずれかで数え上げていくが、どの組み合わせになるかはランダムに選択されるように設定した。例えば、1から999の範囲から3ずつの連続した16個の数字が取り出されるとか。

実行画面:

4桁の数字だと、頭がイライラしてきた。あまりやりたくないアプリになってしまった。録画中も早く終わりたい、と初めて思った。

スクリーンのデザイン:

特に変更はなし。

                             

ブロック・コード:

1. ランダムな値を設定:

3つのグループ(1〜99、1〜999、1〜9999)の一つをランダムに選択するのだが、実際には以下の関数makeMaxNumが示すように、返すのは各グループの最大値(99又は999又は9999)。

また、関数makeStepNumで、いくつずつ数え上げるか(1又は2又は3)をランダムに選択し、その数値を返す。

2. 変数maxNumber及びstepNumを設定。初期値を与えている。いずれも0で初期化しても良いが、とりあえず99と1で初期化。

    startButtonをタップした時に、maxNumber には上記関数makeMaxNumが返してくる値(99又は999又は9999)を、stepNum には上記関数makeStepNumが返してくる値(1又は2又は3)

    数え上げる数値の最初の数値をランダムに決めるが、その選択範囲は、1から( maxNumber ー 15 * stepNum )まで。例えば、maxNumberが99の場合、1から84までの数値の中から一連の数字の最初の数字を選択する。

    最初の数字が決まったら、その数字より ( 最初の数値 + 15 * stepNum )までの範囲をstepNumずつ数え上げていく一連の数字をoriginalListに割り当てていく。

    前回と同様であるが、originalListに割り当てられた一連の数字をシャッフルし、shuffledListに格納する。

    その後は、shffledListの数字を各ボタンに順番に割り当てる。

後は、これに時間的要素(制限時間など)を加えれば、ちょっとゲームらしくなると思う。

 


MIT App Inventor について

2024-04-05 07:10:41 | 日記

goo blogでのブログの記事も50を超えたので、というわけでもないが、今一度 MIT App Inventor について。。。

1. MIT App Inventor に必要なもの:

=> インターネット(+当然だがwifiも)環境

=> ブラウザー(Googel Chromeが推奨されている)

=> アンドロイドのスマホ(iPhoneでもシミュレーションはできるが、アプリのインストールはできない)

  NYTアプリをアンドロイド(上)とiPhone XR(下)でシミュレーションした様子は以下の通り。だから、どうなんだ、ということは言えない。MIT App Inventorは、元々Googleがアンドロイド用に作っている(?)のだから。

2. MIT App Inventorのウエッブアプリは、非常にフットワークが軽快。(ブロック・コーディングのアプリは総じてそうかもしれないが)特に、スマホにアプリを簡単にダウンロード、インストールできることがMIT App Inventorを選択した最大の理由。

勿論、複雑なアプリは作成できないかもしれないが、そんなところまで求めていない。遊ぶことができれば、それで良し。時間潰しのおもちゃと言えなくはないが、そのおもちゃが随分色々なことをやってくれる。

3. 他のブロック・コードも同じだと思うが、MIT App Inventor のチュートリアルは、「変数とは」などなどから始まるものは少なく、「カメラアプリの作成方法」、「お絵描きアプリの作成方法」等々具体的なアプリから始まる。それでも何ら問題はない。ブロックだから、見れば見当がつく。

私が勝手に「100本ノック」と言っている The Coding Bus の Introduction Of MIT App Inventor & Create First App in App Inventor | Full Course 2023 から始めた。結局、30本くらい「受けた」段階で一旦ストップして、後は、必要の都度参照することになったが。(残念ながら、この歳では「忍耐」が続かなかった。)

4. アンドロイドのスマホにアプリをダウンロード、インストールは以下のような感じでシンプル且つ簡単。

MIT App Inventor のウエッブアプリよりBuild => Android App (.apk) を選択 => MITのサーバーでコンパイル => QR codeが表示されるので、インストール先のスマホで読み取り => アプリのダウンロード => アプリのインストール とタップしていくだけでOK。途中、スマホの QR code 読み取り画面が 一瞬landscape になってしまっているが。。。

(次回アップ予定のCountNumbers2をインストールした時のビデオ。画面に表示されるQR codeはこのブログを見る頃には無効になっている。)

 


MIT App Inventorで遊ぶ (New York Timesアプリ4)

2024-04-04 07:26:34 | 日記

今回は、タップした記事の見出しを日本語、フランス語、ドイツ語に翻訳してもらうようにした。

フランス語もドイツ語もはっきりとはわからないが、特に日本語が「デタラメ」の極みみたいな印象を受けた。無料なので、もちろん文句を言えるわけはない。でも、翻訳したという感じはわかる。Googleの翻訳を使うことができるようになるといいなあ〜(Google Mapも!)

翻訳の言語をリスト形式で選択できるようにしたかったが、これではやっても余り意味はなさそうだ。でも、どこまで(どの言語まで)翻訳をしてくれるのか試してみたい気はする。(これだけあるんだから

実行画面:

スクリーンのデザイン:

3ヶ国語に翻訳するので、Translator componentを3つ設定。

                     

ブロック・コード:

翻訳部分のみ

1. ListViewで当該記事をタップすると、翻訳文を表示するtranslatorVSAを表示させる。

それぞれのTranslatorが、選択した記事の内容を日本語(ja)、フランス語(fr)、ドイツ語(de)に翻訳。

2. 翻訳文(getTranslation)をそれぞれのLabelに表示。

3. 「X」ボタン(閉じる)をタップしたら、translatorVSAを非表示、元のテキストを表示、ListViewの選択を解除。

日付(「日」も含めた)の設定部分を引き続き検討。

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

前回までのブログ:

MIT App Inventorで遊ぶ (New York Timesアプリ3)

MIT App Inventorで遊ぶ (New York Timesアプリ2)

MIT App Inventorで遊ぶ (New York Timesアプリ1)