Udemy 新コース: 作って学ぶPower Automate !

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

MEMO

この内容はYouTubeでも紹介しております。

小さくアプリを始めるということで、最初はやっぱり電卓アプリなんかが良いんじゃないかなと思います。

ちなみに

昔、C#を本を買って学んだ時、最初に作ってみたのは電卓アプリでした。

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

学べること

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

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

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

以下のような関数を学べます。

取り扱う関数
  • Set
  • Collect
  • If

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

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

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

電卓アプリを作ってみる

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

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

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

以下より上記の流れで作成していきます。

初期値の設定

変数の初期値を設定します。初期値はApp という項目のOnStartに設定することでアプリの起動時にこの関数を実行することが出来ます。

MEMO

Set関数はグローバル変数(画面をまたいでも有効な変数)を宣言する事ができる関数です。よく使います。

 

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

 

画面の作成

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

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

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

 

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

 

同じく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という計算結果を格納する関数を書いていきます。ちょっと長いので以下の通り解説のためコメントを書きました。

コード

# 足し算して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)

 

イコールボタンのDisplayModeは、XとYの値のどちらかが0の場合まだ数字ボタンが2回押されていないということになります。したがって言い換えるとXとYで掛け算すると0になってしまうとまだイコールボタンを押せないようにする必要があります。

MEMO

もし数字ボタンを押す前にイコールボタンを押せてしまうと、「0の数字ボタン」を押してもいないのに初期化した0を使って計算してしまうことになります。

 

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

 

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

 

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

 

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

 

 

PowerPointと同じように、文字の大きさや場所、太字の太さを変更します。あとで数式を入れるようにするため、X、Y、Zの順で並ばせるようにしてください。

MEMO

ギャラリーのレイアウトを調整するテスト用に数字を変数に格納するため、数字ボタン、プラスボタン、数字ボタンの順で押すようにしてください。私の例では、1、プラス、2という順で押しています。

 

以下のようにギャラリー内の計算式と計算履歴というラベルを追加します。

 

計算履歴というラベルは以下のように挿入>ラベルから追加できます。

 

デザイン性の必要に応じて、太字にしたりフォントサイズを調整してください。

 

これで完成です。

ご参考になれば幸いです。

関連記事

次はこちらをどうぞ。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です