コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

PowerAppsで少しお洒落なホーム画面を作成する


スポンサードリンク

PowerAppsでは少し工夫するだけで簡単に少しだけお洒落なホーム画面を作成することができます。

今回は以前Twitterにて紹介したこちら2つの画面の作成方法について説明していこうと思います。

 

それでは作成していきましょう!

 

 

点滅する文字

まずは1つ目の文字が点滅している画面から作成していこうと思います。

まずは「ラベル」を配置し、サイズを最大まで大きくしてください。

なぜ最大まで大きくするかについては後程説明します。

次にテキストのアラインメントを左右中央揃えにし、文字を適宜見やすい大きさに設定してください。

続いて表示する文字列の設定です。

今回は例と同じように「-Please Tap Screen-」と設定し、フォントスタイルを斜体とすることにします。

 

上記のように作成すると設定値は以下のようになっているかと思います。

タブレットレイアウトを使用しています。

Text = "-Please Tap Screen-"
Align = Align.Center
Height = 768
Width = 1366
Size = 100

 

続いて文字を点滅させるための設定を行っていくのですが、その前に文字が点滅するための仕組みについておさらいしましょう。

 

今回文字が点滅しているようにみせかけるために文字カラーのアルファ値(透明度)を0から1に緩やかに変化させています。

この緩やかに変化させるために、sin関数を用います。

 

sin関数を用いることにより-1から1まで値を変化させることができますね。

そのsin関数に0.5をかけて0.5を足してあげれば値は0から1の間で遷移することになります。

実際にグラフを表示させてみたい方は下記より表示させてご確認ください。

数の帝国 - 数学ツール様に直リンクとなります。

グラフ計算
プロットする関数を入力してください。:


X 軸, 下端: 上端:
Y 軸, 下端: 上端:

これにより滑らかに0から1の値を変化させる方法がわかりました。

 

それではPowerAppsの設定に戻りましょう。

上述の説明からlabelのColorのアルファ値に"sin(x) * 0.5 + 0.5"といった式を記述すればいいということが分かったと思います。

次にxの設定方法を説明します。

 

xの値を可変に取らせるために今回は「タイマー」を用います。

「タイマー」を適当なところに設置し、繰り返しと自動開始をオンにしてください。

これによりタイマーが自動で開始し、タイマーが止まっても自動で開始するようになりました。

 

続いてxの値を作成していきます。

 

タイマーコントロールのDurationを以下のように設定します。

Duration = 20000 * Pi()

 20000[ms] * πとすることにより10周期分の値をとることができます。

これによりタイマーがリスタートしても値の変動を少なくしているわけです。

 

最後にlabelのColorを以下のように設定します。

Color = RGBA(0, 0, 0, Sin(Timer1.Value / 1000) * 0.5 + 0.5)

Timer1.Value / 10000 としているのは値がミリ秒なので秒に換算しているからです。

 

これで点滅する文字の完成です!

 

続いて画面のどこを触っても次の画面に遷移するようにしましょう。

 

タイマーは見えないほうが良いので、visibleをオフにしてください。

次にツリービューよりラベルを最前面に持ってきます。

最後にラベルのOnSelectにて次に遷移する画面を設定したら完成です!

 

画面への遷移は、例えばScreen1に切り替えアニメーションなしで行うのであれば以下のように設定します。

OnSelect = Navigate(Screen1, ScreenTransition.None)

詳しくは公式のリファレンスをお読みください。

docs.microsoft.com

 

以上で1つめに紹介した画面の作成が完成です!

お疲れさまでしたっ。

 

 マウスホバーで反応するラベル

 それでは、2つ目に紹介したマウスホバーすると選択されている項目が変化する画面の作成方法についてご紹介します。

 

こちらの作り方は非常に簡単で、「ラベル」を2つ重ねて表示しているだけです!

それでは設定値についてご紹介します。

 

まずは「ラベル」を1つ設置してください。

こちらは特に特別な設定は要らないのでお好きなように設置してください。

 

次にもう1つ「ラベル」を配置します。

こちらがマウスがホバーしたときに反応するラベルとなります。

 

先ほど配置した「ラベル」と同じ位置にラベルを配置してください。

サイズはマウスがホバーしたときに表示してもらいたいサイズにします。

続いて文字の色"Color"と背景色"Fill"を以下のように設定します。

Color = RGBA(0, 0, 0, 0)
Fill = RGBA(0, 0, 0, 0)

このように設定することで透明なラベルを作成することができたと思います。

 

マウスがホバーしたときの処理を設定していきます。

マウスがホバーした時の処理は、HoverXXXになります。

HoverColor = RGBA(0, 0, 0, 1)
HoverFill = RGBA(50, 86, 160, 1)

今回はgifの例の色の設定値を記述しています。

ここで1点注意していただきたいのが、" HoverFill"のアルファ値を1より小さくした場合、下にあるラベルの色とミックスされた色になるため注意が必要です。

 

最後に下にあるラベルの"Text"を上にあるラベルと同じ値を表示するようにします。

こうすることにより、文字の変更が1ヶ所で済むようになりコンポーネント化した場合も利用しやすくなるかと思います。

Text = Label2.Text

 

これでマウスホバーすると選択されている項目が変化する画面は完成です!

 

 現状、PowerAppsではマウスホバーした場合の処理は対象の項目の色を変える程度しかできないです。

※間違っていましたらコメントなどで指摘頂けると助かります。

なのでこのような設定を行っています。

 

いかがでしたでしょうか?

PowerAppsではちょっとした工夫次第でこんなにも簡単に画面や項目が作成することができてしまうのです!!

凄いですねっ。

 

今後もPowerPlatformでなにか発見がありましたらブログに更新していこうかと思いますー。


スポンサードリンク