本記事はPower Apps Advent Calendar 2024 シリーズ2の21日目担当記事になります。
はじめに
こんにちは、reireです。
以前Power Appsのテーマカラー変更機能に関する記事を執筆したのですが、
改めて見ると当時の仕様や私の技術力不足等によりあまり良い実装とはなっていないんですよね。
また、Chat-GPTの機能であるMyGPTを活用したテーマカラーセット生成も最近試してみて、まぁまぁ悪くない結果を得ることができました。
というわけで今回は、Power Appsのテーマカラー変更機能のより良い実装とChat-GPTの活用について解説していきたいと思います。
動作イメージ
以下、動作イメージになります。
このようにユーザーが複数のテーマカラーから選択可能で、さらに次回起動時も選択したテーマカラーが引き継がれる機能を実装していきます。
実装
今回アプリはテンプレートのカレンダーを流用していきます。
Formulasにテーマカラーを記述する。
さっそくアプリに使用したいテーマカラーを記述していきます。
私は以下のように記載しています。
//初期設定のメインテーマ
MainTheme = {
Primary: RGBA( 0,144, 168, 1),
Secondary: RGBA(229, 244, 245, 1),
Accent: RGBA(225, 70, 72,1),
Background: RGBA(255, 255, 255, 1),
Text: RGBA(51, 51, 51, 1),
Border: RGBA(51, 51, 51, 1)
};
//ダークモードのテーマ
DarkModeTheme = {
Primary: RGBA(33, 33, 33, 1),
Secondary: RGBA(55, 55, 55, 1),
Accent: RGBA(100, 181, 246, 1),
Background: RGBA(18, 18, 18, 1),
Text: RGBA(255, 255, 255, 1),
Border: RGBA(90, 90, 90, 1)
};
Webデザインでよく出てくる要素から簡易に抜粋した感じです。
このようにして、一定のフォーマットでコレクションを作成していきます。
そしたら最後に以下の式を追加します。
// 記述したテーマカラーたちを格納
ColorSet = [MainTheme,DarkModeTheme];
これで記述したテーマカラーたちが1つのテーブルとして格納されます。
OnStartでSaveDataを取得する
続いてApp.OnStartです。
こちらで前回のアプリ起動時に選択したテーマカラーの情報があれば取得し、反映させます。
// ローカルから前回選択したテーマカラーを取得
LoadData(colSelectedTheme,"UserSelectTheme",true);
// 選択したテーマカラー情報があった場合はそちらを設定、ない場合は既定のテーマを設定
If(IsEmpty(colSelectedTheme),
Set(SelectTheme,MainTheme),
Set(SelectTheme,First(colSelectedTheme))
);
テーマカラー一覧を作る
次はテーマカラーを一覧で表示や選択できるようにしましょう。
使用するコントロールは以下の3つ
まずIconの設定ボタンから。
今回は設定ボタンをクリックするとギャラリーが表示される仕様にしています。
Set(isThemeSelect,!isThemeSelect)
isThemeSelect
これで設定ボタンをクリックするとギャラリーの表示、非表示が切り替わります。
次はギャラリーやその配下の設定を行いましょう。
まずはギャラリーのItemsから。
ColorSet
続いてギャラリー配下。
(今回はサークル図形を配置しました。)
ThisItem.Primary
ThisItem.Accent
If(ThisItem.IsSelected,BorderStyle.Solid,BorderStyle.None)
3
これでテーマカラーの一覧表示と、選択したときの枠のハイライト表示が可能になります。
いよいよテーマカラーの変更周りの処理の実装になります。
//選択したテーマを反映
Set(SelectTheme,ThisItem);
ClearCollect(colSelectedTheme,ThisItem);
//ユーザーのローカルデータに選択したテーマを格納
ClearData("UserSelectTheme");
SaveData(colSelectedTheme,"UserSelectTheme");
上記のように、SlectThemeに選択したテーマを格納して反映。
更にSaveData関数によりその情報をローカルに保存することで、次回起動時も呼び出すことが可能になります。
以上でテーマカラー変更機能の実装が完了です。
なんだかんだシンプルですね。
エディターの再生画面でSaveData関連の処理を実行するとエラーが出ますが、仕様なので気にしなくてOKです。
あとは各コントロールを修正しよう
あとはアプリ内でテーマカラーを反映したいコントロールのFillやColorに対し、以下のように設定します。
SelectTheme.Primary
これにより、任意のテーマカラーを選択することができるようになります！
Chat-GPTにテーマカラーを考えてもらおう
さて、以上がテーマカラー変更機能の実装でした。
ただ一つ気になるのが、テーマカラー考えて記述するの面倒くさくないですか？？
そうなんですよ、配色考えるのも面倒だし、その情報をコードに起こすのも面倒です。
2024年も暮れというのにそんな面倒なこと、人様がやるべきではありません。
ということで、Chat－GPTの機能であるMyGPTを使ってテーマカラー式を生成してくれるGPTsを作ってみました！
テーマのイメージやベースカラーを伝えると、そのままFormulasプロパティに入力できるような式を生成してくれます。
結果としてはこんな感じ
まぁまぁ及第点くらいあるんじゃないでしょうか？
実はここまでのGIFに出てきたテーマカラーもすべて生成してもらったものだったり。
たまに目が痛くなるような強烈なテーマを提案してくれることもありますが、
そこは生成AIですので、出来に不満があれば細かく指示を出すことで改善してくれますし、何回だってリテイク可能です。
今回作成したGPTsは公開しているので、気になった方はぜひ試してみてください！
PowerAppsテーマカラーくりえいと
おわり
以上、Power Appsにおけるテーマカラー変更機能でした。
昨今は単にダークモード機能というだけでなく、
様々な人や環境による色覚多様性に配慮したカラーユニバーサルデザインが求められることもあります。
実はそんなに難しい実装ではないので、お試しがてら実装してみてはいかがでしょうか？
本記事でPower Apps Advent Calendar 2024もついに4記事目となりました。
振り返ってみるとほぼ週一での投稿となったわけですが、結構カロリーの高い内容が多く執筆がかなり大変でした。
というかローコードとは？？？な内容も多かったですね()
でもそのおかげか、本記事も1時間ほどで書き上げられるくらいにはなれたので、多少は記事作成力あがってきたのかな…？
今後も精進してPower Apps関連の記事をアップしていきたいと思いますので、ちょくちょく見ていっていただければと思います。
それでは。