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

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

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

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

アプリ実行のビデオ：

スクリーン・デザイン：

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

　　　　　　　　       今回の画面　　　　　　　　　　　　　　　　　　　前回の画面

                                                                            

ブロック・コード：

主な追加点は、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）

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を０で初期化

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

＝＞「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はもう少し活用できるかもしれない。アイデアが出てくるかどうか、がポイント？

 

MIT App Inventor 2で遊ぶ (じゃんけん特別編 3 JavaScript）

前回、switch statementの代わりにif statementを使用したが。switch statementを代替するものがMIT App Inventor2 にないかググっていたら、MIT App Inventor Helpに「Is there a switch case extension instead of numerous if/then/else?」という記事があり、webviwerブロックを使ってJavaScriptで判定させてはどうかとのアドバイスがあった。

以前にも電話番号をチェックするのにJavaScriptを使ったことがあるので早速やってみた。

アプリ実行のビデオ：

ビデオは内容的に前回のブログと全く同じですが。。。

スクリーン・デザイン：

JavaScriptを実行させて、リターン値を受け取るためWebViewerブロック（地球儀のアイコン）を追加した。

                         

ブロック・コード：

JavaScriptとの連携部分のみ。

関数showResultsの代わりに関数fetchResults実行。

この変数はなくてもいいが、JavaScriptが返してくる値を格納。

関数fetchresults：WebViewのJavaScriptが受け取るWebViewStringに「ユーザーのピック＋コンピューターのピック」をセットし、同梱のcheckRPSJavaScript.htmlを実行する。

上記実行の結果である返り値valueをresultLabelに表示する。

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

「checkRPSJavaScript.html」の内容は以下の通り。このファイルはアプリに同梱。

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

前回までのブログ：

MIT App Inventor 2で遊ぶ　(じゃんけん特別編 2）

MIT App Inventor 2で遊ぶ　(じゃんけん特別編 1）

 

MIT App Inventor 2で遊ぶ (じゃんけん特別編 2）

前回に引き続き、YouTuber 「Ania Kubów」 の 3 ways to code Rock Paper Scissors in JavaScript (Beginner to Intermediate to Advanced!) のIntermediate levelをMIT App Invwentor 2でどこまでやれるかやってみた。「Ania Kubów」 のコード（JavaScript + HTML）はこちら。

MIT App Inventor 2では、User InterfaceはあらかじめDesigner Panel上に配置しておく必要がある。したがって、チュートリアルのように、コードで各画面要素を生成して配置していくことはできない、と思う。

しかし、とりあえず要素だけを素の状態で配置して、背景色、サイズとかの属性はブロック・コードで指定していくということはできるので、今回はその方法をとった。

アプリ実行のビデオ：

前回とあまり変わらない簡単なビデオですが。

スクリーン・デザイン：

最初は何も画面に表示されていないが、スマホをシェイクするとボタンが表示されるようにした。

                                 

ブロック・コード：

今回のポイントは、Ania Kubów のお手本に従い、コンピューターの手とユーザーの手を個別に照合するのではなく、二つの手を結合して勝ち負けを判定することとした点。

変数choices、buttons、buttonColorsを初期化

スマホをシェイクした時の動作を設定：

「rock, scissors,paper」の３つの選択肢をchoicesに格納。「Button1、Button2、Button3」の３つのボタンをbuttonsに格納。buttonの背景色となる３つの色をbuttonColorsに格納。関数initbuttonsを実行

関数initButtons：各ボタンの背景色、表示テキストを設定し、FontBoldとFontSizeを指定。

変数userChoiceを初期化

タップされたボタンのテキスト（rock, scissors, paperの内の一つ）を変数userChoiceにセットし、userChoiceLabelに表示した後、関数generateConputerchoiceおよびgetResultsを実行。（generateConputerchoiceはスペルが間違っているが）

変数computerChoiceはコンピューターが選んだ手を格納

変数resultは、勝負の勝ち負けを格納

関数generateConputerchoice：１〜３からランダムにピックされた数字をローカル変数randomNumberに格納。３つの手を格納している変数choicesのリストより同数字をindexとして手を選択し、computerChoiceLabelに表示。

関数getResultsは横に長く伸びているため見にくいが。。。

最初の部分のみを拡大すると以下の通り。

まずユーザーが勝つ場合（３つのケースがあるが）の最初のケースを見てみると。userChoice+computerChoice = scissorspaperであるとユーザーが勝つことになる。そしてあと２つのケースも同様にチェックする。

一方、まずコンピューターが勝つ場合（これも３つのケースがあるが）の最初のケースを見てみると。userChoice+computerChoice = paperscissorsであるとコンピューターが勝つことになる。そしてあと２つのケースも同様にチェックする。

それ以外の場合は、引き分け（It's a draw!）となる。とてもシンプル。

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

前回までのブログ：

MIT App Inventor 2で遊ぶ　(じゃんけん特別編 1）

 

MIT App Inventor 2で遊ぶ (じゃんけん特別編 1）

YouTuber 「Ania Kubów」 のチャネルに 3 ways to code Rock Paper Scissors in JavaScript (Beginner to Intermediate to Advanced!) というJavaScriptのチュートリアルがあったので、MIT App Inventor 2で同じようにできるのかやってみた。

今回は、初心者向けの一番簡単なコード。「Ania Kubów」のコード（JavaScript + HTML）はこちらに。

アプリ実行のビデオ：

TitleVisibleのチェックを外すのを忘れたので「Screen1」が表示されてしまった。

スクリーン・デザイン：

                             

ブロック・コード：

コンピューターが選択した手、ユーザーが選んだ手、勝負の結果をそれぞれ格納する変数を設定

タップしたボタンの表示名を小文字に変更した上で、userChoiceに格納し、userChoiceLabelに表示。＝＞関数generateConputerchoice（スペルが間違っている！）そして関数showResultを順番に実行

関数generateConputerchoice：１〜３の中からランダムに数字を取得し、１であればcomputerChoiceを「rock」に、２であれば「scissors」、３であれば「paper」に設定。そして、それをcomputerChoiceLabelに表示。

関数showResult：コンピューターとユーザーの手を照合し、その結果に応じて「It's a draw!」「You won!」「You lost!」をresultLabelに表示。