Kilroy 365

Microsoft365 主にPowerPlatformについての備忘録

Power Apps で電光掲示板のようなものを作る。

 はじめに

タイマーコントロールが便利そうだったので、何か作れないかな？と考えたときに、ふと、ラベル動かして電光掲示板みたいなの作れそう、と思ったのがきっかけです。時間の変化が値として取得できるので、これを色々なプロパティやらに当てはめてやれば、動きのあるものを作るのにもってこいです。便利～♪

作ってみたもの

では、作ってみたものです。
スクリーン上に黒い帯(四角形)をバックグラウンドとして配置、その上をテキストラベルがタイマーコントロールの時間経過とともに右から左に動いていく感じです。
テキストのカラーをオレンジにすると電光掲示板チックに見えます。
ただ流れていくだけでは物足りないので、テキストを点滅させてみました。
警報っぽい見た目になったので、テキストもそれっぽい内容のものにw

材料

解説用にあとから付け足したラベルとかもありますが、メインのコントロールは以下の4つ。

①テキスト表示用のラベル

  • これが電光掲示板に表示されるテキストになります。

②バックグラウンド用の四角形

  • 電光掲示板の背景ですね。四角形のFillをBlackにしているだけです。

③テキストを動かす用のタイマーコントロール

  • テキストを動かす時間を設定しています。
  • Durationの設定で、テキストの動く速さが決まります。
  • 解説のため表示していますが、タイマーコントロール自体は表示の必要がないので、Visibleをfalseにするか、XまたはYのプロパティの設定でスクリーン外に表示し、デザイナーでいじるときだけ見えるようにしておけばいいかと思います。

④テキスト点滅用のタイマーコントロール

  • テキスト点滅の時間を設定しています。
  • Durationの設定で、テキストの点滅周期が決まります。

f:id:KilroyWaaasHere:20210725013923p:plain


詳細

まずは、③テキスト移動用のタイマーコントロールの設定です。

f:id:KilroyWaaasHere:20210725020035p:plain

AutoStartでタイマーを自動スタートさせ、Repeatで自動的にリスタート。
これで、表示がエンドレスに流せるようになります。
Durationを変えることで、テキスト移動の速さが変わります（仕組みは後述）。
単位はミリ秒になっているので、タイマーの設定時間をを1秒にしたいなら1000を設定。12秒がちょうどよい感じだったので、12000としています。

 

 次に④テキスト点滅用のタイマーコントロールの設定。

f:id:KilroyWaaasHere:20210725021502p:plain

テキスト移動用のタイマーと同じですね。点滅の速さ的に2000ぐらいがちょうどよかったですが、この辺りは好みによるところ。

 
ここから、➀テキストラベルの設定です。動き・点滅ともに仕組みはここの設定で成り立っています。

f:id:KilroyWaaasHere:20210725145130p:plain

表示する文字列

まずは実際に表示する文字列。電光掲示板なので、アプリ上で自由に表示を変えられるよう、どこかに入力コントロール仕込むなり、変数使うなり、文字列を可変にする運用がよさそうですね。
WidthにLen関数（文字列の長さを返す関数）を仕込んでおけば、ラベルの長さも文字列に見合った幅になります。使っているフォントサイズ×22でちょうどよい感じだったので22をかけていますが、ここは使用しているフォントやサイズが変われば調整の必要アリです。


文字を動かす

次に、文字を動かす仕組みです。ラベルのXプロパティを時間変化に伴って変化させるとラベルが横方向に動きます。

一定の速度で動かし、タイマーの開始とともに移動がスタート、タイマーの終了と同時に移動も終了するようにするためには、時間経過の割合を使います。

時間経過の割合は、タイマーの時間経過(タイマー名.Value)をタイマーの長さ(タイマー名.Duration)で割ってやると求まります。
このアプリでの場合、以下のように設定をしています。

 

f:id:KilroyWaaasHere:20210727062329p:plain

テキストの点滅

次にColorプロパティを使ってテキストの点滅を表現します。

RGBA（255，191，0，1）がオレンジなので、ベースをこれにして、アルファ値(4番目の引数、透過度を0～1の範囲で指定）を変化させ、点滅を実現します。
時間経過に伴って0〜1の範囲で値を動かすには、文字を動かすのと同様、時間経過割合を使います。
時間経過をの割合をX、色の透過度をYととらえると、色を濃くしていく場合、Y＝X となります（0≦X≦1）。逆に、色を薄くしていく場合はY＝1-Xとなります。変数を設定して、タイマーが終了、又はスタートのタイミングでY＝XとY＝1-Xを切り替えてやれば、
点滅しますね。
グラフで表すと以下のような感じ。

f:id:KilroyWaaasHere:20210728011132p:plain

具体的には、アルファ値を

If(
varTextBlink = true,
1-timTextBlink.Value/timTextBlink.Duration,
timTextBlink.Value / timTextBlink.Duration
)

と設定したのですが、変数の切り替え処理の関係か、不安定な挙動だったので、変数を使わなくて済むよう、以下のようにしてみました。

下図実線部分がY＝|2X-1| のグラフで、タイマー開始時はオレンジ、時間経過とともに色が薄くなっていき、タイマーが半分のところで色が透明、今度は色が濃くなっていき、タイマー終点でオレンジに戻る、という感じです。

f:id:KilroyWaaasHere:20210728012219p:plain

絶対値はAbs関数を使えばよいので、アルファ値の設定は、
Abs(2*timTextBlink.Value/timTextBlink.Duration-1)

となります。

タイマーを繰り返し動くようにしておけば、点滅してくれますね。
挙動もばっちりでした。

ちょっと改善

 ブログでグラフを使った説明を書いてるうちに、2次関数でも行けるなぁと思ったので、ちょっとやってみました。
説明は省きますが、Power関数を使って、アルファ値を
Power(2*(timTextBlink.Value/timTextBlink.Duration-0.5),2)
としてみると、心持ちですが、点滅が自然な感じになったので、コンポーネント化する場合は、こちらを採用しようと思います。

 後半のVer.2が2次関数使ったバージョンです。ほんとに微々たる差だw

おわりに

タイマーコントロール、初めて使ってみましたが、アイデア次第でかなりいろいろなことが出来そう。
ネタ思いついたらまたブログに上げてみたいと思います。
しかし、頭の中ではシンプルにやってるつもりでも、いざブログにあげると説明がごたごたしすぎてる…。