APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

株式会社 エーピーコミュニケーションズの技術ブログです。

【Power Platform】Power Appsで知育アプリ:スライダーコントロールで色とサイズを変更する

はじめに

Power Platform推進チームの小野です。

このたび、UdemyでPower Platformの無料講座を公開しました。30分で概要がつかめる無料講座となっておりますので、ぜひお気軽に受講ください!

すぐに使えるローコード!Microsoft Power Platformで踏み出す、DXの第一歩

www.ap-com.co.jp

さて、Udemyの講師プロフィールにも記載したとおり、私は娘に遊ばせる知育アプリをPower Appsで作っています。ランダム要素を入れたり音を鳴らしたり、ビジネスアプリとは違った視点からPower Appsと向き合うことになり、勉強になることも多いです。

この投稿では、★マークの色・サイズを変更して遊ぶアプリを題材に、スライダーコントロールの使用例について説明します。

アプリ概要

★の色・サイズを変更して遊ぶアプリ

中央上部の★マークの色とサイズを、スライダーで変更して遊ぶアプリです。何が楽しいのか大人にはわからないんですが、3歳の長女にはわりとウケがよいアプリです。このアプリで培った色彩センスが、塗り絵や工作に活かされる…かもしれません。

Red・Green・Blueのスライダーで★マークの色を、右端のスライダーで★マークのサイズを変更できます。また、★マークをタップすると色が反転する(黄色の場合、青になる)オマケ機能もあります。

スライダーコントロール

スライダーコントロールは「ハンドルをドラッグすることによりユーザーが値を指定できるコントロール」です。

learn.microsoft.com

数値を入力することなくドラッグで操作できるため、直感的であり、子どもにも操作しやすいコントロールだと思います。また、指定している値が、取りうる範囲の中でどのような位置づけ(大きい・高い、小さい・低い)かを視覚的に把握しやすいことも特徴です。

.Valueでハンドル位置を返す

ハンドル位置は、[スライダー名].Valueとして取得できます。これがユーザーからの入力値ですね。この値をもとに、★マークの色・サイズを決定することになります。

Max=255、Min=0

ハンドル位置が返す値の範囲を、Max・Minプロパティで設定しておきます。★マークの色を設定するRGBA関数は、Red・Green・Blueの各色成分値を0~255の256段階で設定できます。スライダーコントロールの値の範囲は、RGBA関数の範囲と合わせています。

なお、★マークのサイズを変更するスライダーは、Max=620、Min=40です。これは画面を見ながら調整あるのみ。

★マークの設定

★マークは、挿入>図形>星形五角形 で作成します。円でも四角形でも、お好きなものでどうぞ。

挿入>アイコン を使用することもできますが、アイコンの場合は塗りつぶしがないもの(線画)は見た目の変化に乏しいのでイマイチです。塗りつぶしのハートとかあったらよかったのに。

アイコンの場合、塗りつぶし系がオススメ


Fill:色

RGBA関数を使って、Red・Green・Blueの値を設定します。各スライダーのValueを参照して、ハンドルの位置を取得しています。4つ目の引数は透過性を示すアルファ値で、完全な不透明にするときは1にします。

Fillプロパティ=RGBA(Slider_Red.Value, Slider_Green.Value, Slider_Blue.Value, 1)

PressedFill:タップしている時の色

色を反転させる(補色にする)ように設定します。具体的には、最大値255から、もともとの色の成分値(FillのRGB)を引くことになります。例えば、Fillが(255, 180, 0, 1)の場合、PressedFillが(0, 75, 255, 1)になるようにすればOKです。アルファ値は1のまま。

PressedFillプロパティ=RGBA(255 - Slider_Red.Value, 255 - Slider_Green.Value, 255 - Slider_Blue.Value, 1)

HoverFill:マウスオンした時の色

このアプリはスマホでのみ利用する想定で、スマホにはマウスオンの概念がないので、設定変更していません。

なお、HoverFillの値を Self.FillSelf.PressedFill とすることで、そのアイテム自身のFillプロパティやPressedFillプロパティの値を参照することも可能です。HoverFill= Self.Fill だとマウスオンしても色は変わらず、 Self.PressedFill だとタップ(クリック)した時と同じ色になります。

Width・Height:大きさ

★の大きさは、Width・Heightプロパティを指定することで変更できます。参照する値は、サイズを指定するスライダーのValueです。

Widthプロパティ= Slider_Size.Value
Heightプロパティ= Slider_Size.Value

X・Y:表示位置

Width・Heightだけを可変値にすると、左上の角が固定された状態で、右下に図形が伸びていくような挙動になります。コレジャナイ感がありますね。

左上の角が固定されている状態

図形の中心を定めて、そこから放射状に大きくなるようにするには、X・Yプロパティも可変値にする必要があります。結論、以下のように設定しました。画面上部に正方形を取り、その範囲内で★のサイズが変化するようなつくりです。

Xプロパティ= (Screen1.Width - Slider_Size.Value) / 2
Yプロパティ= (Screen1.Width - Slider_Size.Value) / 2

図形の中心位置を直接指定するプロパティはありません。指定できるのは左上の角のX・Y座標だけです。細かい説明は割愛しますが、 Slider_Size.Value が大きくなる(★が大きくなる)ほど、X・Y座標を小さくする(画面の左上方向に寄る)形です。

TIPS

スライダーコントロールは縦方向にする

新規作成時のスライダーコントロールは横方向ですが、縦方向の方がベターだと思います。変更方法は、レイアウトプロパティを縦にするだけです。

レイアウトのプロパティを縦に

縦方向のスライダーコントロールをオススメする理由は、スマホでアプリを実行した場合、右方向へのフリックが「戻る」動作と認識されることがあるためです。

右フリックでホーム画面がチラリ…

横方向のスライダーコントロールは、意図しない「戻る」動作を誘発します。これは娘のテストプレイで実証済み。スマホの操作に慣れた大人はともかく、子どもやお年寄り(脳トレアプリを作るとか…?)が操作することを考慮するなら、スライダーコントロールは縦方向にしておいた方が誤操作を防げると考えられます。もちろん、画面レイアウトとの相談になりますが。

色成分値を16段階にする

色指定のスライダーのMaxを16に変更して、★マークのFillでスライダーのValueを16倍すれば簡単に実現できます。これでも4,096色を表現できるので、実用性は十分かなと思います。

Fillプロパティ= RGBA(Slider_Red.Value * 16, Slider_Green.Value * 16, Slider_Blue.Value * 16, 1)

RGBA関数の色成分値は、0~255に調整してくれる

上記の16段階スライダーだと、Valueが16のときにRGBA関数に渡される値が16×16=256になりますが、RGBA関数に渡す値が上限である255を超えていてもエラーは出ませんでした。下図のようなイタズラをしても、(255, 255, 0, 1)として解釈してくれています。255を超える値は255に、負の値は0に調整してくれるようです。

RGBA関数のRGB成分値は、0~255の範囲に調整してくれる

255を超えないように自力で制限したい場合は、Min関数を使って上限値を決めてしまう方法があります。

Fillプロパティ= RGBA(Min(Slider_Red.Value * 16, 255), Min(Slider_Green.Value * 16, 255), Min(Slider_Blue.Value * 16, 255), 1)

おわりに

作り込めば、塗り絵アプリなんかも作れそうです。ドロップダウンリストで色を変更する対象を選択させて、スライダーコントロール側でドロップダウンリストの値を参照するようにすれば、場所を占有しがちなスライダーは1セットで済みますね。各対象の色成分値を保存するコレクションが必要になります。

ビジネスアプリに応用するなら、製品やロゴのできあがりイメージの色を柔軟に変えて見せるなどの使い道が考えられます。Width・Heightでタイマー値を参照すれば、図形を徐々に拡大・縮小するアニメーションも表現できます。Power Appsでプレゼンできそう。