【Power Apps 入門】簡単！作って動かして学ぶ電卓アプリ

[memo title=”MEMO”]この内容はYouTubeでも紹介しております。[youtube]
[/youtube][/memo]

小さくアプリを始めるということで、最初はやっぱり電卓アプリなんかが良いんじゃないかなと思います。
[memo title=”ちなみに”]昔、C#を本を買って学んだ時、最初に作ってみたのは電卓アプリでした。

中古ならもう１円で売ってますね。まずC#を触って見るにはコレで十分だと思います。[/memo]

学べること

こんなアプリを作ります。

このシナリオを通して、以下のようなことが学べると思います。

[box class=”box26″ title=”シナリオのポイント”][list class=”li-check li-mainbdr main-c-before”]

よく使う関数を学べる
予めデータを準備する必要がなく、Power Apps 自体をすぐに学び始められる
シナリオが現実にあるもので理解しやすい。処理の結果が成功しているかどうかが見極めやすい
一画面で作成するシンプルなアプリの割に、学べる関数の範囲が広い
オブジェクトのアクティブ/非アクティブの切り替えをする
ギャラリーに計算履歴を記録する
OnStartでアプリ開始時の処理を実装する

[/list][/box]

以下のような関数を学べます。
[box class=”box26″ title=”取り扱う関数”][list class=”li-check li-mainbdr main-c-before”]

Set
Collect
If

[/list][/box]

このテーマは意外と考えられてます、と言って良いんじゃないかと思っております。

そもそもPower Apps ってなんだ？という方や、まだライセンスがないという方はトライアルできますので、以下ご参考ください。

【Power Apps 入門講座】Power Apps とは？ & Power Apps トライアル開始方法Power Apps とは一体何なのか。非常に説明するのは難しいです。試して触ってみるとやっと「つかめるようになる」サービスかなと思います。ですので、Power Apps のト…2021.04.08

Power Apps の開発画面に馴染みがない方はこちらもご覧ください。

【Power Apps 入門講座】開発画面へのアクセス方法と画面説明今回はPower Apps の開発画面の紹介をします。開発画面はPower Point のようになっていて、Office ユーザであればわかりやすいUIかなと思います。こういう…2021.04.08

電卓アプリを作ってみる

それでは簡単に電卓を作ってみようと思います。

タスク／機能を分解していきます。

[timeline]
[tl label=’手順1′ title=’初期値の設定’]
アプリの起動時に変数の初期化を行います。
X, Y, Zともに0とします。Plusはfalseとします。
[/tl]
[tl label=’手順2′ title=’画面の作成’]
電卓的なレイアウトで数字ボタン（1〜9）、プラスボタン、イコールボタンを設置します。
[/tl]
[tl label=’手順3′ title=’プラスボタンのコントロール’]
プラスボタンを押した時には変数 Plus がtrueとなるようにします。
また誤操作防止のため、Plus = trueのときにプラスボタンは押せないようにします。
[/tl]
[tl label=’手順4′ title=’数字のコントロール’]
一回目にクリックした数字は変数Xに代入されるようにします。
これを実現するため、Plus = falseのときに数字をクリックしたらその数字は変数Xに格納するようにします。
一方で、プラスボタンを押した後（二回目）にクリックした数字は変数Yに代入するようにします。
これを実現するため、Plus = trueのときに数字をクリックしたらその数字は変数Yに格納するようにします。
[/tl]
[tl label=’手順5′ title=’計算結果表示’]
イコールボタンを押した時に計算結果が出るようにします。
また計算結果は計算式とともに結果が残るようにします。
同時にイコールボタンをクリックすると変数はリセットされるようにします。
誤操作防止のため、変数がどちらかでも0の時はイコールボタンは押せないようにします。
[/tl]
[/timeline]
以下より上記の流れで作成していきます。

初期値の設定

変数の初期値を設定します。初期値はApp という項目のOnStartに設定することでアプリの起動時にこの関数を実行することが出来ます。
[memo title=”MEMO”]Set関数はグローバル変数（画面をまたいでも有効な変数）を宣言する事ができる関数です。よく使います。[/memo]

擬似的にアプリがスタートしたときの状態にするためにOnStartを以下のように実行します。

画面の作成

PowerPointのようにコントロールをどんどん追加していきます。

今回は押したときの見た目の変化もあったほうが良いためボタンコントロールを利用します。

挿入＞ボタンを選択します。

一個配置してみて、ボタンをダブルクリックすることで表示テキストを変更できます。ここでは一旦１とします。

同じくPowerPointと同じようにコピー＆ペーストが可能ですので、Control + C （Macの場合は Command + C）でコピー、Control + V （Macの場合は Command + V）でペーストを行ってボタンを複製してください。

後続の開発で画面の右側を使うため、若干左にボタン達を寄せつつ、表示テキストを以下のように変更します。

ボタンのコントロール名称を意味合いを持たせるため以下のように変更します。

プラスボタンのコントロール

プラスボタンを押した時に初期値falseからtrueとなるように設定します。

Plus が押されてtrueとなったときはボタンが押せないようにします。その時は以下のようにDisplayMode = Disabled とします。

数字のコントロール

数字のボタンを押した時の処理を書いていきます。OnSelect プロパティにて、Plus がtrue なら Yに、 false なら X にボタンに応じた数字が入るようにします。

これを各ボタン繰り返します。9Buttonのときは以下のとおりです。

計算結果表示

イコールボタンを押した際に、XとYを使ってZという計算結果を格納する関数を書いていきます。ちょっと長いので以下の通り解説のためコメントを書きました。
[codebox title=”コード”]

# 足し算してZに答えを格納する。
Set(Z, X+Y); 

# コレクションを宣言＆新しい項目をアペンドしていく。
# X, Y, ZというカラムにX, Y, Zを格納する。
Collect(CalculatedData, {X:X, Y:Y, Z:Z}); 

# 変数を初期化して、次の計算に備える。
Set(X, 0); 
Set(Y, 0); 
Set(Plus, false)

[/codebox]

イコールボタンのDisplayModeは、XとYの値のどちらかが0の場合まだ数字ボタンが２回押されていないということになります。したがって言い換えるとXとYで掛け算すると0になってしまうとまだイコールボタンを押せないようにする必要があります。
[memo title=”MEMO”]もし数字ボタンを押す前にイコールボタンを押せてしまうと、「0の数字ボタン」を押してもいないのに初期化した0を使って計算してしまうことになります。[/memo]

コレクションを表示するギャラリーコントロールを挿入します。

レイアウトは縦を選択します。

データソースは先程宣言したCalculatedDataを設定します。

今回は画像を利用しないため、ギャラリーのレイアウトを文字だけのものに変更します。

PowerPointと同じように、文字の大きさや場所、太字の太さを変更します。あとで数式を入れるようにするため、X、Y、Zの順で並ばせるようにしてください。
[memo title=”MEMO”]ギャラリーのレイアウトを調整するテスト用に数字を変数に格納するため、数字ボタン、プラスボタン、数字ボタンの順で押すようにしてください。私の例では、１、プラス、２という順で押しています。[/memo]