Kilroy 365

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

PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その2

f:id:KilroyWaaasHere:20210915003038p:plain

今回は、前回のおはなし

PowerAppsでHSLAカラーピッカーコンポーネントを作ってみました。 その1 - Kilroy 365

のつづきその2です。
前回はHSLAをRGBAに変換するところまで行きましたが、今回はそれをコンポーネント化しました。そのコンポーネント本体について説明していきます。
作ったものの見た目はこんな感じ。

f:id:KilroyWaaasHere:20210915004341p:plain

コンポーネントの用途

コンポーネントは一般的に、アプリに追加してアプリの部品としての利用が多いと思いますが、これはアプリ開発時の開発ツールとしての利用を想定しています。
アプリ開発する画面に挿入して、その他のコントロールの色を設定する際の補助に使用します。

主な機能は以下。
・HSLAを用いて色の作成
・表示色による比色
・作成した色のRGBA値の利用(ラベルのテキストをコピペ)
・作成した色のHSLA地の表示(HSLA値がわかれば同じ色を作成できます)
・作成した色の一時保存と削除(コレクション利用)
・保存した色の切り替え表示
・作成した色の情報の出力

 

動作はこんな感じ

 

右が作ったコンポーネント。ちょっとまどろっこしいですが、再生モードにしてRGBAのテキストをコピー、編集画面に戻して貼り付けです。
コンポーネントからは出力として、

  • 表示中の色(RGBAの形式)
  • RGBAのテキスト
  • HSLAのテキスト
  • 保存した色情報(コレクションに保存した色のレコード)

を出せるようにしてあるので、必要であれば、保存した情報を別途外部に記録することもできるようにしてあります。上の動作サンプル動画では、コンポーネントにストアしたコレクションのデータを取得し、左のギャラリーに表示しています。

また、おまけのような機能ですが、コンポーネントの特徴として、中身の大きさが変わらない、というのがあるので、動画でやっているように、サイズを調整して上の色表示部だけを表示させてあちこち移動し、カラーサンプルとして配色を検討する、なんてこともアリです。


達人はもっとすごい

とてもタイムリーですが、MVPのHiroさんが同様に、色をテーマにした開発ツール(カスタムコネクタ)を開発されていました。いやはやすごい…。
興味がある方はこちらも参照されてみてはいかがでしょうか。

mofumofupower.hatenablog.com