Power Apps 設計の基本をおさえる3つのコツ | ハナダの現場DXノート：非IT職の自動化・独学記録

この記事でできること
完成イメージ
あわせて読みたい

この記事でできること

Power Appsでアプリを作り始めると、こんな状態になりがちです。

コントロール名が「Gallery1」「Button2」のまま放置されている
色をコントロールごとに RGBA(39, 146, 195, 1) と直書きしている
色を変えたくなったときに全コントロールを修正しなければならない
バリデーションのつもりで書いた IsBlank() が効かない

この記事では、そういった「なんとなく動いてるけど、後から直しにくい」状態を解消するための設計ルールを4つまとめます。

どれも「最初からやっておけばよかった」と感じるポイントです。コピペで使えるコードつきなので、自分のアプリにそのまま取り込んでみてください。

完成イメージ

【スクショ①：App.OnStartのgThemeコードが入力された数式バーの画面】 alt：App.OnStartプロパティにgThemeのSet関数が入力されているPower Appsの数式バー画面

【スクショ②：ボタンのFill・HoverFill・PressedFillがプロパティ欄に設定されている画面】 alt：Power Appsのボタンコントロールのプロパティ欄にFillとHoverFillとPressedFillが設定されている画面

Step1｜コントロール名をリネームする（命名規則）

命名ルールのポイント

Power Appsはコントロールを追加するたびに Gallery1 Button2 のように自動採番しますが、このままにしておくと後になって困ることがあります。

数式の中に Gallery1.Selected と書かれていても、それが何のギャラリーなのか一目でわかりません。コントロールが増えるほど読み返すのが大変になり、後から修正しにくくなります。

色々な命名ルールがありますが、今回はシンプルに、「コントロールの役割」＋「種別をサフィックスに付ける」 だけにしました。

コントロール種別	命名例
ギャラリー	WorkoutLogGallery
ボタン	RecordButton
データカード	RepsDataCard
テキスト入力	SessionMemoInput

コントロールの命名は、アンダースコアを使わないキャメルケース（単語の先頭を大文字）にしています。

リネーム手順と注意点（重複エラーの回避）

コントロールを右クリック →「名前の変更」から変更できます。

【スクショ③：コントロールを右クリックして名前の変更メニューが表示された画面】 alt：Power Appsのキャンバス上でコントロールを右クリックし名前の変更メニューが表示されている画面

リネーム後は必ず「アプリの確認」でエラーが0件になっていることを確認してください。

重複名が発生するときの回避策： 付けたい名前がすでに別のコントロールで使われている場合、そのまま変更しようとするとエラーになります。その場合は先に片方を別名にしてから目的の名前を付けるという2ステップで進みます。

例：Button2 を RecordButton にしたいが、すでに RecordButton が存在する場合

既存の RecordButton を NavRecordButton にリネーム
Button2 を RecordButton にリネーム

Step2｜カラーテーマをApp.OnStartに集約する（gTheme）

なぜ直書きはNGなのか

各コントロールのFillプロパティに RGBA(39, 146, 195, 1) と直書きすると、色を変えたくなったときに全コントロールを1個ずつ修正しなければなりません。

10個のボタンがあれば10カ所。ミスが起きやすく、「1カ所だけ色が違う」という事故も起きます。

解決策は App.OnStart でカラーテーマをレコード型変数（gTheme）にまとめて、各コントロールから参照する設計です。色を変えたくなったときは gTheme の定義を1カ所直すだけで済みます。

gThemeの設定コード

App.OnStart に以下を追加します。

Set(gTheme, {
    Main:          RGBA(39, 146, 195, 1),
    MainDark:      RGBA(25, 100, 140, 1),
    MainLight:     RGBA(39, 146, 195, 0.12),
    NavBackground: RGBA(39, 146, 195, 0.5),
    Background:    RGBA(245, 245, 250, 1),
    CardWhite:     Color.White,
    TextDark:      RGBA(50, 50, 50, 1),
    TextLight:     RGBA(160, 160, 160, 1),
    Disabled:      RGBA(200, 200, 200, 1),
    Border:        RGBA(200, 200, 200, 1),
    Error:         RGBA(220, 50, 50, 1),
    InputHover:    RGBA(235, 248, 255, 1)
});

【スクショ①（再掲）：App.OnStartのgThemeコードが入力された数式バーの画面】

⚠️ 注意： App.OnStart に追記した後は、アプリを再起動（更新）しないと gTheme が反映されません。 画面を切り替えるだけでは反映されないので注意してください。

各コントロールからの参照方法

設定後は、各コントロールのプロパティで gTheme.Main のように参照します。

// ボタンのFillプロパティ
gTheme.Main

Step3｜ボタンの色を状態に連動させる

ボタンの色は1つではなく、通常・ホバー・押下・非活性の4状態に対応させると格段に使いやすくなります。

【スクショ②（再掲）：ボタンのFill・HoverFill・PressedFillがプロパティ欄に設定されている画面】

プロパティ	設定値	意図
Fill	`gTheme.Main`	通常時の色
HoverFill	`ColorFade(Self.Fill, -0.15)`	ホバーで少し暗く
PressedFill	`ColorFade(Self.Fill, -0.35)`	押下でさらに暗く
DisabledFill	`gTheme.Disabled`	非活性時はグレー
DisabledColor	`gTheme.TextLight`	非活性時のテキストも薄く

ColorFade は色を明るく（プラス）または暗く（マイナス）する関数です。Self.Fill で自分自身のFillを参照しているので、Fill の色を変えるだけで他の状態にも自動的に追従します。

Step4｜入力欄のバリデーションを正しく実装する ⚠️

IsBlank()が効かない原因

EditFormの数値DataCardで「未入力なら記録ボタンをグレーアウトしたい」と思い IsBlank() を使っても、**常にfalse（＝常に入力済みと判定される）**ことがあります。

これは、数値DataCardの Default プロパティが ThisItem.列名 を継承しているためです。SharePointのデフォルト値が設定されていると、フォームを初期化しても「空」にならず、値が入った状態になっています。

解決策：Value().Text <= 0 で判定する

IsBlank() の代わりに Value(コントロール名.Text) <= 0 で判定します。

If(
    Value(RepsDataCardValue.Text) <= 0 ||
    Value(TotalSetsDataCardValue.Text) <= 0,
    DisplayMode.Disabled,
    DisplayMode.Edit
)

これを記録ボタンの DisplayMode プロパティに設定すると、回数またはセット数が0以下のときだけボタンがグレーアウトされます。

【スクショ④：記録ボタンのDisplayModeプロパティにIf式が設定されている画面】 alt：Power Appsの記録ボタンのDisplayModeプロパティにValue関数を使ったIf式が設定されている画面

ハマりポイントまとめ

#	ポイント	原因	解決策
⚠️1	`IsBlank()` が常にfalseになる	数値DataCardのDefaultがThisItem.列名を継承している	`Value(コントロール名.Text) <= 0` で判定する
⚠️2	`gTheme` が反映されない	App.OnStart追記後に再起動していない	アプリを再起動（更新）する
⚠️3	コントロール名の重複エラーが出る	同じ名前がすでに存在している	先に片方を別名にしてから目的の名前を付ける