前回はPower Appsのモダンコントロール「テーブル」の設定項目と機能についての解説、そしてタブ一覧とテーブルを組み合わせた簡易アプリの完成までを解説しました。
今回は前回告知した通りスピナーについての解説を行おうと思います。
スピナーの利用場面としては「画面ロード中の処理状態を示す」「ボタン操作で処理を行った際の処理中を表す」等いろいろな場面が想定されます、また「スピナーを表示中はアプリ上の操作をさせたくない」というのも一つの利用ケースでしょう。そんな際に少しでもお役に立てる記事になれれば幸いです。
スピナー
サンプルプログラム
サンプルプログラムをGitHubにて配布しています。
ForkまたはDownloadしてご自身の開発環境にインポートしてください。
ファイル形式はzipでフォルダ階層はpowerapps/Spinner_Sample/SpinnerSample.zipとなっています。
設置方法
スピナーは、コントロールの分類として「ディスプレイ」に分類されています。
以下2通りの方法で設置することが可能です。
- リボンメニュー(✚挿入) > ディスプレイ > Spinner
- アイコンメニュー(✚) > ディスプレイ > Spinner
表示
Z-Index(配列)
コントロールの設定値には存在しませんが、Z-Indexは重要度の高い設定値となります。
設定は画面上の配列で行います。
下の画像ではRectangle1が最も背面(Z-Index = 0)
TextCanvas1が最も前面(Z-Index = 4)に配置されています。
画像ではスピナーを中心に二つの四角形を配置しています。【TextCanvas】は四角形の配列を表すために配置しました。スピナーよりも前面に配置された【Rectangle2】はスピナーの右上4分の一を覆い隠しています。また、スピナーの背面に配置された【Rectangle1】の右上4分の一はスピナーに覆い隠されています。
いずれも覆い隠された箇所は操作が出来ない箇所となってます。
画像のコントロール設定は以下のとおりです。
/* TextCanvas1 */
Text = "Z-Index = 2"
Color = RGBA(255,255,255,1)
X = Rectangle2.X
Y = Rectangle2.Y + Rectangle2.Height / 2 - Self.Height / 2
Width = Rectangle2.Width
Height = 32
Size = 16
/* Rectangle2 */
Fill = App.Theme.Colors.Lighter50
X = Spinner1.X + Self.Width / 2
Y = Spinner1.Y - Self.Height / 2
Width = 200
Height = 200
/* Spinner1 */
Label = "Is Loading ..."
LabelPosition = 'Spinner.LabelPosition'.Before
X = Parent.Width / 2 - Self.Width / 2
Y = Parent.Height / 2 - Self.Height / 2
Width = 200
Height = 200
Appearance = 'Spinner.Appearance'.Inverted
/* TextCanvas2 */
Text = "Z-Index = 0"
Color = RGBA(255,255,255,1)
X = Rectangle1.X
Y = Rectangle1.Y + Rectangle1.Height / 2 - Self.Height / 2
Width = Rectangle1.Width
Height = 32
Size = 16
/* Rectangle1 */
Fill = App.Theme.Colors.Darker50
X = Spinner1.X - Self.Width / 2
Y = Spinner1.Y + Self.Height / 2
Width = 200
Height = 200
Visible(General)
他のコントロールでは表示されていることが当たり前なのであまり気にしない設定値ですが、スピナーではこの値が最も重要な制御項目となります。
常に表示されていては他のコントロールの表示の邪魔になります。ボタンに重なっていた場合はボタンが操作できない事態を引き起こします。また、必要な時に表示されないようでは設置した意味がありません。
ここは確実に必要な時だけ表示される設定を心掛けましょう!
表示の制御
制御方法としてはいくつか考えられますが、以下の3通りの制御方法がメインではないかと思います。
- ループ処理などの終了を待つ
- タイマーを使用する
- 条件によりフラグを立てて表示・非表示を切り替える
処理に何秒かかるか見当もつかないけど処理中は操作を待ってほしい!という場合に。
確実にn秒は待ってほしい!という場合にタイマーが役立ちます。
複数の処理を同時に実行して、条件に応じてスピナーの表示を行いたい場合。
ボタンやタイマーを複数設置し起動状態を監視することで条件判断しフラグを設定します。
ラベル
テキスト
[ラベル]にはスピナー表示中に何をしているかを示すような”テキスト”を設定できます。空白も可能です。
”テキスト”には計算式や関数も利用できます。
表示位置
ラベルの表示位置は4か所選択出来ます。以下がその対応表です。
設定値 | 表示位置 | 基準 | テキストの折り返し基準幅 |
---|---|---|---|
Above | 上 | スピナー画像 | スピナー枠の幅 |
After | 右 | スピナー画像 | スピナー枠の幅 – スピナー画像の幅 |
Below | 下 | スピナー画像 | スピナー枠の幅 |
Before | 左 | スピナー画像 | スピナー枠の幅 – スピナー画像の幅 |
外観
設定値としての【外観】
スピナーの設定項目では[Stayle and potision]カテゴリに含まれず、[Style and theme]に含まれている【外観】(Appearance)が存在します。この設定値はスピナー枠内の背景色とスピナー色、ラベルテキストを反転して表示する設定となっています。
設定値 | テーマ色で表示 | 白で表示 |
---|---|---|
Primary | スピナー色 | 背景色 |
Invarted | 背景色 | スピナー色、ラベルテキスト |
スピナーレイアウトサイズ
スピナーコントロール自体のサイズです。
プロパティは幅が [Width]、高さが [Height]です。
「スピナー表示中はアプリ上の操作をさせたくない!」といった場合、幅と高さを画面いっぱいに設定し、最前面に配置すれば他のコントロールにアクセスできなくなりますので、操作を抑制することが可能です。
レスポンシブを意識したサイズ設定では、画面サイズが変化した際に追従する必要があります。
CSSでは Width: 100%; Height: 100vh で追従しますが、Power Appsでは設定できません。
代わりに変数を使って追従させます。
Width = Parent.Width
Height = Parent.Height
上のコードを[Width], [Height]に設定するだけで画面サイズが変化してもレイアウトサイズが追従します。
スピナーサイズ
スピナーサイズは7段階から選択できます、最小時と最大時で約3倍のサイズ差となります。個人の感想ですが、スマホをターゲットとしたサイズ設定なのでしょうか?もう少し大きくしたいと感じるサイズです。
まとめ
今回はスピナーについて設定例・制御例など解説を行いました。
スマホ専用アプリの場合はスピナーサイズを画面いっぱいにして操作できないようにするなどがいいかと思います。PCブラウザ対応アプリの場合ですと、水平コンテナや垂直コンテナを複数配置してレスポンシブ対応にした上で、コンテナーごとにスピナーを配置して処理中は操作を不可能にするなども可能です。
また次回紹介します「進行状況バー」との組み合わせで、より進行度合いのわかりやすいUIが作成できると思いますので、次回をお楽しみにしていただきたいと思います。