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桁の計算はできますが、桁上がりなどは考慮していません。

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

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （５）ボタンの配置

次は数値や演算子などを入力するためのボタンを配置してみましょう。

上から三つ目のHorizontalレイアウトにボタン7,8,9,÷,ACの5つのボタンを配置します。

それぞれのボタンのプロパティは共通で、以下のようにしました。

・FontBold　☑

・FontSize　20

・Width　　60 pixcels

・Text    ボタンに表示させる文字列

ボタンの名前も分かりやすいように変更しておきました。

同様に他のボタンも配置しましょう。

上の例では、スクリーン上で右端のボタン表示がおかしいですが、私のスマホで表示させてみると問題ありませんでした。（画面のインチ数のせいかな？？）

補足（Screen1のプロパティで表示アライメントをCenterにするとうまく表示できました。）

ボタンのテキスト、色、ボタン形状等はある程度変更できます。

最後にエミュレータで確認しましょう。

ボタンの配置の設定は数が多いだけに面倒な作業でしたね。なぜコピー/ペースト機能がないんだろう・・

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （４）表示ラベルの配置

レイアウトが終了したら、いよいよ表示用のラベルやボタンをを配置して行きましょう。

まずは結果などを表示するための画面を作ります。

電卓の液晶画面ですね。

左側のメニューからLabelをドラッグして、表示用のレイアウトにドロップします。

このLabelはテキストや数値を表示する場合に使うものです。のちのち分かりやすいように、Componentsにて、Label1を選択→Rename→で名前を付け替えておきましょう。ここではHyoujiにしました。

ラベルHyoujiのプロパティは、

・BackgroundColor　Light Gray

・FontBold 　☑

・FontSize　40

・Width　　250 pixcels

・Text　　　０

・TextAligment　right

としました。

同様に、Label2を先ほどのHyoujiの右隣に配置します。配置がやりにくいかもしれませんが、表示用のHorizontalレイアウトの中に配置します。

Label2をHyouji_Opeに名前を変更しました。これは四則演算でどの演算子が選択されているかを表示するためのラベルです。

Hyouji_Opeのプロパティは、

・FontBold　☑

・FontSize　40

・Width　40 pixcels

・Text　＋

・TextAligment　center

としました。

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （３）レイアウト

Projects→New Project→お好きなアプリ名でプロジェクトを開始して、まず最初に電卓のデザインを行いましょう.

ボタンや結果表示画面を何も考えずに配置することもできますが、見た目が綺麗ではないのでLayoutを使用します。

このLayoutであらかじめ大まかな配置領域を決めてしまおうというわけです。

Layoutには3種類あります。

・HorizontalArrangement　水平方向にブロックを並べる

・TableArrangement　Excelみたいに碁盤上に並べる

・VerticalArrangement　縦方向にブロックを並べる

TabelArrangementが使いやすいんでしょうが、私の場合どういうわけかうまく表示されなかったので、HorizontalとVerticalを組み合わせてレイアウトを決めました。

この辺りは個人の趣味やセンスが生かされるので好きなようにアレンジしましょう。

私の場合は、まずHorizontal２個とVertical1を配置しました。

余白調整用のHorizontalのプロパティは

　Hight（高さ）10 pixcels

　Width（幅）315 pixcels

表示用のHorizontalのプロパティは

　Hight（高さ）Automatic　（自動調整）

　Width（幅）Automatic　（自動調整）

ボタン配置用Verticalのプロパティは

　Hight　Automatic

　Width　Automatic

としました。

ボタン配置用のレイアウトは、先ほど配置したVerticalにHorizontalを4つ組み合わせました。

4個のHorizontalのHight、WidthともAutomaticにしました。

最終的に、下図のようなレイアウトにしました。

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （２）Gallery

AI2で作成してみた電卓をAI2のGalleryにて公開してみましたｗ

AI2を立ち上げた最初の画面の上部メニューにある

”Gallery”をクリックし、下図の様にdentakuで検索してください。dentakuで登録してあるのはまだ私のだけみたいですねｗ　画像をクリックして、”Open The App"でロードできます。

よろしければ試してください。まだちょっとおかしなところがあることが判明・・・そのうち直します。

 電卓って意外にややこしかった。なんども紙に動作を書いて作りました。

もし他の人が作った電卓の中身を見たい場合は、上述のGalleryでCalculatorで検索するとたくさん出てきます。

色んなのがあって参考になりますよ！

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる （１）外観

簡単な電卓を作ってみました。

・四則演算　（＋　－　×　÷）

・小数点

・ルート

・+－の変換

・結果のオールクリア

ができるようにしてみました。

例えば、

１＋２とキーを打ち込んだあと、＝を押せば３が表示されますが、＋を打つと同じように３が表示される一般的なよくある電卓です。

電卓はボタンが多いので、思いのほか多くの動作処理ブロックを記述することになりました。

次回から数回に分けてこの電卓のデザインとブロックについて書いていこうと思います。

このアプリに広告を表示させることも考えています。

App Inventor2 でAndroidのアプリを作ってみる 6. とりあえず動かそう（２）

前回でアプリの画面ができましたので、今回から動作を実行させるための手順を。

1.　AI2でアプリのボタン配置などを行っていたデザイン画面の右上に、"Blocks"ボタンがあるので、クリックします。これにより、動作の記述を行う画面に移動します。

2．下図画面が動作記述をするブロック画面です。デザイン画面と同じようにドラッグ＆ドロップでブロックを配置して動作を組み立てていきます。

3．さっそくやってみましょう。

まず最初に左側のメニューから先ほど配置したボタンをクリックします。すると新たにいくつかのブロックが表示されるので、”when ボタン名 Click"をドラッグして、中央の画面にドロップします。

4.ドラッグすると下図のようになります。

5.　同じように、先ほど配置したラベルを選択して、

"set ラベル名.Text to "をドラッグ＆ドロップします。

6.　すると下図のようになるので、緑色のset ブロックをドラッグしてwhenブロックにはめ込みます。

はめ込むとき"カチッ"と音がします。

　　　　　

7.　次に左メニューで”TEXT"をクリックして一番上にある、"  "ブロックをドラッグして配置します。

8. 配置したTEXTブロックの”　”部分をクリックすると文字列が入力できるので、Helloと入力します。

9.入力後、TEXTボックスを先ほどのsetボックスに接続します。

これで、ブロックは組みあがりました！

このブロックの意味は、

という動作を表しています。

10.　エミュレータで動作を確認してみましょう。

aistaterを起動して、上部メニューのConnectからEmulatorを選択します。”Push!”ボタンをクリックすると”Hello"が表示されればOKです。

どうですか？正常に動作が確認できましたか？

もし動作がおかしければ、もう一度ボタンなどの配置や動作ブロックの内容を確認しましょう。

基本的にこれらの操作の繰り返しを行うことで、さらに複雑なアプリを作成することができます。