はじめに
今回は初学者向けの内容かと思いますが、よく皆さん作られるローディング画面について、
最近はモダンコントロールのスピナーでサクッと作れたりしますのでその辺や、従来通りSVGやGIFなどを使ってカスタム作成する内容、ギミックとして利用するような実装例などを今更ながらご紹介しようと思います。
この記事は、Microsoft Power Apps Advent Calendar 2024 12月1日担当分の記事です。
ローディング画面の必要性
ローディング（画面上にクルクル回る円が出てたりするやつ）についてですが、こちらは処理に時間がかかる際に、ユーザーに対して「今処理中です。少々おまちください。」という意図で出すものですね。
これがないとしばらく時間がかかる処理の場合に今何中？という感じになってしまいますので重要ですね。通常のWebアプリやスマホアプリでもよく目にされると思います。
また、ローディングがないとその間にもう一度押されたり別の操作されてしまう可能性があります。
どちらかというとこの後者の方がシステム的には重要で、2度押しの防止や想定外の操作を防ぐ意味が大きいかと思います。
キャンバスアプリでよく使うケースとしては以下のような感じかと。
画面表示時やリロード（リフレッシュ）時など
最初の画面表示時に処理を入れている場合やReflesh関数でデータソースをリフレッシュする場合など、データ量やネットワーク状況などにより想定より時間がかかるケースがあります。入れておいたほうが安全です。
また初期画面表示時はパラパラと表示されたりするケースもあるのでローディングで気にしないようにするという意図でも使えますね。
データの更新時や削除時（PatchやSubmitForm、Removeなど）
この場合もネットワーク状況により時間がかかるケースもありますし、特に2度押し防止や他操作（例えば画面遷移するなど）を防ぐために重要です。
実際にはパッと終わる場合の方が多いので必須ではないですが、入れておいたほうが安心ですね。
外部APIやフロー呼び出しなど時間がかかる処理
ネットワーク状況やデータ量により結構時間がかかるケースが多いと思います。フローやAI Builderなど呼び出す場合など大体数秒はかかるかと思います。
上記に限らず時間がかかるかも？なケースでは入れておいて損はないと思います。
実際、パっと完了する場合は一瞬だけ表示されたり、表示自体されない（気づかない）感じです。
モダン スピナー（Spinner）
まずは、シンプルに作れるモダンコントロールの スピナーをご紹介します。
モダンコントロールを有効にしていると「Spinner」があります。追加すると以下のように追加されます。
プロパティは掲載したような内容です。
モダンスピナーの場合、用意されている範囲で色の調整や大きさの調整などが出来ます。
またメッセージを上、下、左、右に表示することも出来ます。「・・・実行中」など付けてもいいですね。
大きさはTiny～Hugeまで選択出来ますが、Hugeにしてもそこまで大きくはありません。これより大きくしたい場合は自前のスピナーを作る感じでしょうか。
また知らぬ間にスピナーの色や軌跡の色を選べるようになっていました。カラー自体も変更できますが、この２つを指定しているとそっちが優先されるようです。
大きさやスピナーの色などを調整したサンプル
ローディング画面を作る
ひとまず上記スピナーを使ってローディング画像を作ります。
以下はサンプルの画面です。テーブルからレコードを選択してボタンを押したら処理を行う。
その際にローディングを出すというイメージで作りたいと思います。
適当なサンプル画面
コンテナーを使って中にスピナーを入れる
TIPS昔はコンテナーがなくグループ化して作る事が多かったです。コンテナーの方が親コンテナーの表示制御だけで済みますし、色々扱いやすいです。現在ではコンテナー一択かと思います。
普通のコンテナーを用意して一番上に配置します。名前はLoading用とわかる名前がいいと思います。
その中にスピナーコントロールを入れます。
TIPS一番上に配置というのは途中に配置していたらその上にある要素は触れてしまうからですね。
他の部分を操作できないように上にかぶせるイメージです。
コンテナーのX、Yは0にして、幅、高さは画面いっぱいに広げます。
レスポンシブも考慮すると、Parent.Width、Parent.Heightなどとするのがいいと思います。
スピナーの位置を調整する
真ん中に配置したい場合は以下のようにXとYを調整します。任意の数値でもOKです。
Codeコンテナーの中央に寄せたい場合
Xプロパティ：Parent.Width/2 -Self.Width/2
Yプロパティ：Parent.Height/2 -Self.Height/2 ※すきな位置にしてもよい
コンテナーを背景を半透明（オーバーレイ）にする
コンテナーのFillプロパティを調整して半透明にします。※透明の方がいい場合はそれでもOKかと。
色は任意に出来ますので白っぽいグレーや黒っぽいグレー、薄い青、緑などアプリにあった色合いにすればいいと思います。
もうひとつコンテナーを追加してドロップシャドウを付けたり加工しやすくする
上記でとりあえず出来てますが、スピナーは背景色のプロパティがないのでそのまま半透明が影響されます。中にコンテナーを追加してドロップシャドウを付けてこの部分を目立出せるなどの調整も可能です。
以下は白背景のコンテナーを追加してその中にスピナーを配置。
中のコンテナーはドロップシャドウを付けた例です。こちらの方がおしゃれな感じはあるかなーと思います。
ローディングを任意のタイミングで表示、非表示する
ローディング用の親コンテナーのVisibleプロパティに変数を指定してボタンクリックなどのタイミングでTrue、Falseとすることで表示、非表示を切り替えれます。
一旦、ローディングコンテナーはVisibleをFalseにして非表示としてボタンなどに処理をいれましょう。
最初と最後にローディング変数をTrue,Falseにする処理を入れています。
※画面が少ない場合や1画面の場合はSet関数でもいいと思います。サンプルではUpdateContextでやってます。
Code//ローディングを表示する
UpdateContext({isLoading:true});
・・・何らかの処理
//ローディングを非表示にする
UpdateContext({isLoading:false});
次にローディングの親コンテナーのVisibleプロパティに変数を指定します。
これで出来上がりです。
ボタンをクリックすると処理中はローディングが表示されます。完了するとFalseとなり非表示となります。
ローディングの役目としては上記で書いたとおり、処理中である点をユーザーに知らせる点や、その間に誤操作させないためにも重要です。
見た目にも良いのである程度時間がかかる処理や画面ロード時など組み込むことをオススメします。
色々なローディング（SVG画像など）
上記はモダンコントロールに追加されたスピナーコントロールを利用していますが、従来は用意はなかったので、Web上のサンプル（ライセンス問題のないもの）や、GifやSVGで自作できるサイトなどで作ったりしていました。
そっちの方が大きく出来たり自由度が高いですし、オリジナリティーもあるので自前で作成するケースも多くあると思います。
以前に自分も元MVPのHIROさんのブログでSVGで作れるローディングスピナーを写経して活用させて頂いたりしました。
Matthew Devaney が Power Apps でローディングスピナーを使う方法を紹介していたので、触発されてローディングスピナーをPower Appsで作る方法を考えてみました。 Mattのブログは以下をご覧ください。 matthewdevaney.com 私が作ったものは、Power Apps内で色や丸の数を調整可能なローディングスピナーです。 ここではImageコントロールにSVGコードを書き込んでいます。SVGで円を等間隔に配置し、その透過率を animate で変化させています。 各円がすこしずつずれてアニメーションを開始するのであたかも回っているように見えるということです…
プログレスバー（進行状況）を使ったローディング
以下もモダンコントロールのプログレスバーを利用したローディングですが、プロパティの不確定をオンにすると左→右と進むバーになります。これをローディングとして利用する手もあります。
プログレスバーを使って進捗を進めつつローディングとすることも可能ですが、その辺はまた機会があれば別の記事で書こうかと思います。
待つ時間をワクワクに変えるローディングギミック！
こちらはMicrosoft エバンジェリストの倉本さんのデモですが、こちらではAIの回答を待つ間にサンタの魔法がかかるという、待ち時間を逆転の発想でワクワクに変える演出がされています！
こういった期待感を持たせたり、遊びごごろをアプリに加えるのもとても素晴らしいですね！素敵です！
倉本さんのデモンストレーションでのサンタの魔法のギミック！
おわりに
ということで今回は今更ながらローディングの実装について記事にしました。
ひとえにローディングといってもサクッと作る場合やこだわりたい場合、何かしらのギミックを持たせたい場合など、アプリの用途や想いにより色々なパターンが作れると思います。
記事には書いてませんが、結構待ちが発生する場合などはステップごとに表示する文言を変更し、進捗状況をお知らせするような実装も可能です。
とりあえずの誤操作（2重クリックなど）を防ぐためにも入れておいて損はないかと思いますので是非ご参考にしてください。それでは！
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント