外出チェックアプリを作る
テレビやエアコン、給湯器など、外出する前にチェックをしたのかどうか気になることってありますよね。今回は外出をする際の部屋のチェックアプリを Power Apps で作成してみようと思います。
Power Apps の開発環境がわからない方はこちらの記事を参考にしてくださいね。
１．スクリーンを用意する
Power Apps を起動して「キャンパスアプリを一から作成」をするを選択します。アプリ名は「外出チェック」。アプリのサイズは「電話」とします。
２．スイッチの画像をアップする
開発画面が表示されたら、メディアボタンから「アップロード」を選択し、チェックをする箇所の画像ファイルをアップロードします。今回アップロードする画像は、エアコン、テレビ、給湯器、照明です。
３．画像がアップロードされた状態
画像がアップされるとこのようになります。
４．画像を挿入する
スクリーンにアップロードした画像を表示させてみましょう。「＋」ボタンからメディアを選択し、続いて「画像」を選択します。すると、スクリーンにサンプル画像が表示されます。
挿入した画像のプロパティ「Image」の内容をアップロードした画像のファイル名に変更します。例えばファイル名が「エアコン.jpg」ならエアコンと入力します。すると、サンプル画像がエアコンの画像に変わるはずです。
残りの画像も同じ手順でスクリーンに表示してみましょう。画面右にあるプロパティからサイズを320×320にすると下図のように綺麗にスクリーンに収まると思います。縦横に出来る隙間が気になる場合は、「画像の位置」を「拡大して表示」とすると画像サイズいっぱいに拡大され、綺麗に見えると思います。
５．画像を押したときのアクションを設定する
画像をタップしたときに、チェック済みとなるようにフラグを設定します。
フラグは変数を使って作成します。
①ツリーを表示します。
②Appを選択します。
③プロパティ「OnStart」を選択します。
④変数をセットします。
Set(Check1,false);
Set(Check2,false);
Set(Check3,false);
Set(Check4,false);
ここで、Setというものが出てきました。Setは変数を作成する関数です。変数というのは、一時的に文字や数値を記録する箱のようなものと考えて下さい。ここでは"Check1～4"の４つの変数が作成されます。Setの中にある「false」は変数に入れる値です。Setを再び宣言すれば、変数の内容は何度でも変更することが出来ます。
６．アプリ起動時の設定をする
③の「OnStart」にアクションを入れておくと、アプリを起動した際に1回だけ最初に自動的に実行されます。ここでは４つの変数が作成されるということになります。
７．画像を押した時に変数Checkをtrueにする
例えば、エアコンの画像をタップすると変数Check1の値がtrueになるようにします。画像のプロパティ「OnSelect」の値にSet関数を入れれば、タップした時にSet関数が実行されます。
①画像を選択する。
②プロパティ「OnSelect」を選択する。
③Set(Check1,true)をセットする。
他3枚の画像も同様に設定します。今回の例では下記のようにしています。
（エアコン：Check1、給湯器：Check2、テレビ：Check3、照明：Check4）
８．変数Checkがtrueの時、アイコンが表示されるようにする
挿入から「アイコン」を選択して、「チェック（バッジ）」を選択します。
アイコンを画像に重ねて、プロパティ「Visible」の値を設定します。プロパティ「Visible」ではtrueがセットされていると表示、falseがセットされていると、非表示という動きになります。今回は画像をタップしたときだけアイコンを表示させたいので、「If文」を使って条件式も入れてみます。Power Apps でのIf文の書き方は以下のようになります。
If（条件式 , 条件に一致する場合の処理 , 条件に不一致の場合の処理）
なので、アイコンのVisibleの値は「If(Check1=true,true,false)」となります。
アイコンだけだと見にくいと思いますので、背景色を半透明にしてみました。
アイコンの色はプロパティの色で変更出来ます。
Check1の設定が出来たら、アイコンを追加して、同様に他の画像にも同じ設定をしましょう。
９．チェックをやり直すためのクリアボタンを追加する。
「＋」または挿入からボタンを選択してスクリーンに置きます。
ボタンのテキストは「クリア」とします。プロパティ「OnSelect」にはSet関数でそれぞれのCheck変数の値をfalseにするよう設定します。下図を参考にして下さい。
１０．完了メッセージを設定する。
チェックが表示されたときに、完了メッセージが表示されるようにします。
これはラベルを追加してIf文で設定します。Ifの条件式は「&&」で繋げると「かつ」
という意味になります。「||」で繋げると「または」という意味になります。
以下にラベルの条件式の内容を載せておりますので、同じように入力をしてみて
ください。
If(Check1=true && Check2=true && Check3=true && Check4=true,
"チェック完了。いってらっしゃい！","")
ここまで出来たら、アプリを保存して実行してみて下さい。画像を全てタップしたときに、チェックが全て表示され、完了メッセージが表示されていれば今回のアプリ作りは成功です。非常にシンプルなアプリですが、色々な機能が学べるアプリだと思いますので、これから Power Apps を学ばれるという方はぜひトライをしてみてください。
それではまたー。
