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

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

MIT App Inventor 2で遊ぶ (Calculator 2 JavaScript)

2025-03-10 07:33:21 | 日記

前回の問題点の解決と「べき乗」および「平方根」の追加も行った。

ほぼ期待した通りの計算結果を表示してくれるようになった。

残る改善点としては、式の途中でも「べき乗」および「平方根」を使用できるようにすることだが、これはちょっと難しそう。また、「べき乗」の式の表示も一工夫が必要なようだ。

アプリ実行のビデオ:

スクリーン・デザイン:

式を表示、計算結果を表示の部分は前回、今回とも同じ。

               今回の画面                   前回の画面

                                                                            

ブロック・コード:

主な追加点は、Xʸ と √  のボタンがタップされた時の処理。ボタン操作のブロックは以下の通り。

<最初の赤黄点線で囲んだ部分>

1. Xʸ ボタンをタップした時は、他の数字、演算子と同様、変数calculationListにJavaScriptのべき乗の演算子である「**」を追加する。

2. √  ボタンをタップした時は、まず、変数rootSymbolに「√ 」と入力済みの数字を結合させ(例えば √ 2)、equationLabelにセットして画面に表示する。

3. 同時に、入力した数字をJavaScriptのメソッドMath.sqrt()のパラメーターとして挿入し、変数formulaにセットの上、メソッド自体をJavaScriptのファイルに送り計算させている。(上記の例だと、画面の表示は √ 2 だが、実際に送られるのは Math.sqrt(2)。)

<2番目の赤黄点線で囲んだ部分>

1.  数字のボタンをタップした時に、statusがtrueの場合は 「=」 ボタンをタップして計算結果を取得しているので、その計算結果をもって改めて計算を始める。

すなわち、10+10= のようにボタンをタップすると、20という計算結果が返される。次はその計算結果である 20 から引き続き計算を行うことができるようにしている。

 

「=」 ボタンをタップして計算結果を取得済みかどうかを監視するために変数statusを設定。

JavaScriptのオブジェクトが値を返した時に変数statusにtrueをセット。

 

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (Calculator 1 JavaScript)

 


MIT App Inventor 2で遊ぶ (Calculator 1 JavaScript)

2025-03-05 14:32:10 | 日記

Code with Ania KubówのYouTube アカウントに「Learn JavaScript by building the EASIEST Calculator! - Super easy!」というTutorialがあったので早速MIT App Inventor 2 でもできるかやってみた。JavaScriptのeval関数を使ったものだが、closedの環境でちょこっと楽しむ程度だったらいいだろう。

画面作成に時間を要したが、コード自体はいたって簡単なお手軽アプリ。

ただし、ビデオの通り、ちょっと期待通りには動いてくれない場合があるようなので、次回改善予定。 

たとえば、100/2+50 まで計算してその結果 100 が表示されるが、続けて /2 をタップすると、50を期待したが、75となってしまうなど。               

アプリ実行のビデオ:

スクリーン・デザイン:

tabletサイズでのスクリーンショット。この画面ではわからないが、JavaScriptを利用するために、WebViewerのブロックを配置してある。画面デザインについては、YouTubeの「Calculator App in MIT App inventor | MIT App Inventor Calculator | MIT App Inventor Tutorial」とiPhoneに同梱のcalculatorを参考にした。

                                           

ブロック・コード:

変数calculationList:計算の過程をリスト形式で格納(例えば、["5", "+", "3"])

変数formula:calculationListの値をスペースなしで結合した結果を格納("5+3")

Screen1の初期化:answerLabelを0で初期化

ボタンをタップした時の動作を設定

=>「AC」をタップした時は、calculationListをempty listで初期化、equationLabelおよびanswerLabelを初期化

=>「=」をタップした時は、関数connectWebViewerを実行

=>それ以外のボタンをタプした時は、ボタンのテキスト(数字または演算子)をタップした順序でcalculationListに追加していき、スペースなしで結合の上、結果を変数formulaに格納

すなわち、"2"をタップ=>["2"]  "+"をタップ=> ["2", "+"]、  "2"をタップ=> ["2", "+", "2"]、 "="タップ=> "2+2" =>変数formulaに設定し、connectWebViewerを実行。

関数connectWebViewer:WebViewStringに変数formulaの内容をセットの上、calculationResultJavaScript.htmlを実行する。

変数returnedValue:JavaScriptが返してくれる値と格納

JavaScriptが返してくれる値を受け取り、answerLabelに表示する。

なお、calculationResultJavaScript.htmlの内容は以下の通り。単にeval関数で評価させているだけ。

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

JavaScriptはもう少し活用できるかもしれない。アイデアが出てくるかどうか、がポイント?