Power Appsのススメ 〜その４〜 アラーム機能追加（１）
前回は時計をキャンバス型アプリで作成してみました。
今回は、その時計アプリをベースにして、アラーム機能を追加してみたいと思います。
１．アプリケーションの初期化とグローバル変数
今回追加するアラーム機能では、アラームの時刻を設定する画面を追加します。
複数の画面をまたがって値を扱うには、グローバル変数を使う必要があります。
コンテキスト変数は画面が表示された際に評価されるOnVisibleプロパティで初期化を行いました。
グローバル変数も同様に初期化を行う必要があるのですが、その初期化はAppオブジェクトのOnStartプロパティで行います。
１−１．アプリケーションの初期化に利用できるApp.OnStartプロパティ
Power AppsのアプリケーションオブジェクトであるAppには、OnStartというプロパティがあります。
このプロパティはアプリケーションが起動した際に１度だけ評価されます。
ここに関数を記述しておくと、起動時に１回だけ呼び出されることになるので、アプリケーションの初期化をしたい場合に利用します。
今回はグローバル変数AlarmTimeの定義と初期化に利用します。
AppオブジェクトのOnStartプロパティに、次の様にSet関数を記述します。
１−２．グローバル変数の定義を行うSet関数
Set関数で定義した変数は、全てグローバル変数となります。
Set(AlarmTime, Blank());このように関数を記述すると、AlarmTimeという名称でグローバル変数が定義されます。
なお、ここで使用しているBlank関数は、空白値を返します。
これでアラームが設定されているかは、AlarmTimeが空白か否か、で判断できるようになります。
また、後ほど解説しますが、空白か否かを調べるには、If関数とIsBlank関数を使用します。
２．ボタンコントロールとアラーム時刻表示
次に、アラームを設定するための設定画面に遷移するボタンを追加します。
また、設定したアラーム時刻の表示部をテキストラベルで用意します。
２−１．Textプロパティの設定
２つのテキストラベルはそれぞれlblAlarmTitle、lblAlarm、ボタンはbtnAlarmSetと名付け、テキストプロパティを以下のように設定します。
lblAlarmのTextプロパティだけ定数ではなく関数を使ってますが、これはアラーム時刻が未設定時に対応するためです。
２−２．If関数とIsBlank関数
lblAlarmのTextプロパティは以下の通りです。
If(IsBlank(AlarmTime),"--時--分",Text(AlarmTime,DateTimeFormat.ShortDateTime24,"ja"))If関数は、評価式の結果によって評価する処理を選択できます。
If関数の書式は複数あり、そのうちの１つが以下の書式です。
If(評価式,評価の結果が真の場合の値[,評価の結果が偽の場合の値]）１つ目の引数が評価式で、その結果が真（true）の場合は２つ目の引数が評価されます。
評価式の結果が偽（false）の場合、２つ目の引数は評価されず、３つ目の引数が存在する場合に限り評価されます。
また、IsBlank関数は、引数で渡した値が空白値かどうかで真偽を返します。
なお、Blank関数の値と別に、""（空文字列）も空白値として認識されます。
先のTextプロパティのIf関数は、AlarmTimeが空白値であれば"--時--分"と表示し、そうでなければAlarmTimeを時刻として表示します。
３．アラーム設定画面の追加
次にアラームの設定画面を追加します。
画面の追加は、ツリービューの「＋新しい画面の追加」から行います。
今回は空のレイアウトで追加します。
画面の名称は、scrAlarmSettingとします。
この画面では、テキストラベルを３つ、ドロップダウンコントロールを２つ（drpHour、drpMin）、ボタンを３つ（btnAlarmSetting、btnAlarmCancel、btnBack）使って機能を構築します。
３−１．ドロップダウンコントロール
時刻の設定には、時と分を別々にドロップダウンコントロールで行います。
それぞれ、drpHourとdrpMinとし 、drpHourは００〜２３まで、drpMinは００〜５５までの５分刻みで選択肢を用意します。
ドロップダウンコントロールの選択肢は、Itemsプロパティで指定します。
例えばdrpHourの場合、次のように指定します。
ここでは「文字列」で設定しておきます。
これには理由があり、後で時刻変換する際に、時分秒の指定は2桁の文字列がそれぞれ必要となるためです。
[ ]は配列を表します。
こうすることでdrpHourでは０〜２３を選択出来るようになります。
なお、Defaultプロパティは０を指定しておきます
３−２．コントロールの配置
コントロールは選択して右クリックすると、いくつかのポップアップメニューが表示されます。
その中の「配置」サブメニューでコントロールの位置を自動調整出来ます。
２つ目以降のコントロールを挿入する際には、他のコントロールを基準にしたガイドラインも表示されるので、自分の好きなUIデザインを構築することが可能です。
（センスがモノを言いますよね・・・あせあせ）
先ほどのアラーム設定画面はこのようにして作成しました。
４．画面遷移
アラーム設定画面ができたところで、画面遷移を実装してみましょう。
画面遷移を行うには、Navigateという関数を利用します。
引数には、遷移先の画面名を指定します。
４−１．時計画面からアラーム設定画面へ遷移する
それでは時計画面からアラーム設定画面へ遷移させてみましょう。
scrClockのbtnAlarmSet.OnSelectプロパティに、先ほどのNavigate関数を記述します。
OnSelectプロパティは、コントロールがクリック、タップされた際に評価されます。
４−１．アラーム設定画面から戻る
同様に、アラーム設定画面から時計画面に戻る遷移も実装してみます。
scrAlarmSettingのbtnBack.OnSelectプロパティに、Navigate関数を記述します。
これで相互の画面を行き来できるようになりました。
お疲れ様でした。
今回はここまでとしましょう。
次回はいよいよアラームを設定し、アラーム（音）を鳴らしてみましょう。
この記事が気に入ったらサポートをしてみませんか？