App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （６）数値の入力

さて、ボタン配置等をしてデザインができたのでだいぶ電卓らしくなってきました。でもエミュレータでボタンをポチポチしても何も起こりませんね。

これからボタンを押したときに何らかの動作ができるようにします。

AI2の右上にあるBlocksのボタンを押します。

すると、動作ブロックを構築する画面に切り替わります。

さきほど配置したラベルやボタンなどが左側のメニューに表示されていればOKです。

このBlocks画面はDesign画面に連動しています。

もしDesign画面であらたなパーツが追加されたり、不要なパーツを削除するとその内容がこちらのBlocks画面に反映されます。

まず最初に、具体的な動作を構築する前に、

１＋２＝３の足し算を考えて見ましょう。

入力は、１　＋　２　＝　で　4つの入力があり

結果は　３　です。

入力された数値や演算子を入れておく複数の箱（変数）を用意して、箱の中身を足した結果を表示すれば良いようです。

順序を考えると

１．起動時　何も入力されていない

２．１のボタンを押す　箱Aに１を入れる　箱Aの表示

３．＋のボタンを押す　箱Bに＋を入れる　箱Bの表示

４．２のボタンを押す　箱Cに２を入れる　箱Cの表示

５．＝のボタンを押す　箱Aと箱Cの値を箱Bの演算子に従って計算して箱Dに結果をいれ、箱Dの中身を表示する。

これらの動作を行うには４つの箱と、箱Bの中身に何が入っているかを判定して計算させ、結果を表示する必要があります。

これをBlocks画面で作ってみましょう。

１）まず箱A,B,C,Dを用意します。

左側のVariablesをクリックし、　を

選択します。nameをクリックしてAに変更します。

２）次にTextからを選択して先ほどのInitialize ブロックに接続します。するとこんな形になります。

これでAという名前の箱ができました。中身はからっぽです。同様に他の箱も用意します。

３）次に、１のボタンの記述は、

左のメニューからB1を選択し、Whenボタン名Click　to　を下図のようにドラッグ＆ドロップします。

４）次にVariablesのを選択してset とtoの間のメニューで、global Aを選択し、先ほどのB1のブロックに組み合わせます。

５）次にTextからを選択し、Set global to のブロックに組み合わせて、中身を１とします。

こんな形になるはずです。

これで、B1（1のボタン）をクリックすると、箱Aに１がセットされることになります。

６）1のボタンをクリックしたら、１が表示されるようにするには、表示用のラベルHyoujiからSet Hyouji toとVariablesのget to を選択し組み合わせます。

これを先ほどのB1のブロックに組み入れます。

するとこんな形になるはずです。

さっそくエミュレータで１のボタンを押してみましょう。

正常にブロックが組みあがっているなら、１が表示されるはずです。

７）同様に２のボタンも作ります。1のボタンの記述をコピーしてしまいましょう。1のボタンのブロック上でマウスの右ボタンをクリックし、Duplicateを選択するとコピーできます。

コピーしたら、ボタンの名前、箱の名前、箱にいれる数値を変更

します。

このような手順で同様に、＋も作ってしまいましょう。

８）ここまでの全体図は下図のようになります。

９）最後に＝を押してら計算して結果を表示させます。

＝をおして、箱Bの中に入っている演算子が＋だったら、箱Aと箱Cの値を足し算するには、下記のようにブロックを組み合わせます。

これは、

＝ボタン（例ではB_Eql）が押されたら、

箱Bの中身が＋であれば、箱Aと箱Bの値を足し算し、箱Dに入れ、

箱Dの中身をHyoujiラベルに表示させる

という動作を記述しています。

１０）ここまでの全体図は下図になります。

エミュレータで動作確認しましょう。

正常に計算できましたか？

今までの話は、単純なケースを考えました。

しかし実際には100や12345といった複数桁がある値の計算や、小数点を表示させなければなりません。

上記の動作記述は基本的に1桁の計算はできますが、桁上がりなどは考慮していません。

ですので、もっと良い方法を考える必要があります。