【モデル駆動型アプリ】アプリのヘッダーの色を変更する

# 【モデル駆動型アプリ】アプリのヘッダーの色を変更する

モデル駆動型アプリで **モダンデザイン** を使用している際のテーマ色の変更方法です。

**新しいデザイン** のトグルがオンにして、モダンな外観にする必要があります。

https://learn.microsoft.com/ja-jp/power-apps/user/modern-fluent-design

## アプリのヘッダーの色を変更する

:::note warn
※2024/10 現在
モダンテーマは現在、アプリ ヘッダーのカスタマイズのみをサポートしています。
この機能は、ビルド 9.2.23094 またはそれ以降のバージョンで使用できます。
:::

## XML ファイルの準備

以下の書式で、XML ファイルを準備します。

```xml
<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>
```

| 要素               | 概要                                     | 備考                                                         |
| ------------------ | ---------------------------------------- | ------------------------------------------------------------ |
| Background         | ヘッダーの背景色                         | この要素は、変更を有効にするために定義する必要があります。   |
| Foreground         | ヘッダーのテキスト色                     | これが指定されていない場合、システムは、指定された背景色に対して十分なコントラストを持つ適切な色を計算しようとします。 |
| BackgroundHover    | ボタンにカーソルを合わせた時の背景色     | 値を指定しない場合、システムは背景色に基づいて色を計算します。 |
| ForegroundHover    | ボタンにカーソルを合わせた時のテキスト色 | 値が指定されていない場合、システムは、**BackgroundHover** の色に対して十分なコントラストを持つ適切な色を計算しようとします。 |
| BackgroundPressed  | ボタンが押された時の背景色               | デフォルトのロジックは、**BackgroundHover** と同じです。     |
| ForegroundPressed  | ボタンが押された時のテキスト色           | デフォルトのロジックは、**ForegroundHover** と同じです。     |
| BackgroundSelected | ボタンが選択された時の背景色             | デフォルトのロジックは、**BackgroundHover** と同じです。     |
| ForegroundSelected | ボタンが選択された時のテキスト色         | デフォルトのロジックは、**BackgroundHover** と同じです。     |

### Web リソースを作成する

作成した XML ファイルを **Web リソース** として登録する手順です。

1. [Power Apps](https://make.powerapps.com/) にサインインします。
2. 変更したいアプリが含まれている **ソリューション** を選択します。
3. **[+新規] > [その他] > [Web リソース]** > を選択します。
   ![image-20241022121025130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/bc11f68c-09e6-8a9f-eae7-61ffc330fdf5.png)
4. **[新しい Web リソースのプロパティ]** ウィンドウで各値を入力します。[ファイルの種類] は、『データ (XML)』を指定します。
   ![image-20241022121441889.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/283c4923-50cf-6908-61bc-a2020c9d03dd.png)
   - **表示名**：ソリューションで表示される項目の表示名です。
   - **名前**：一意の名前 (英数字) を入力します。設定時に使用するのでメモしておきます。
   - **ファイルの種類**：『データ (XML)』
5. **[ファイルをアップロード]** の **[ファイルの選択]** を選択し、作成しておいた **XML** ファイルを選択します。
6. **[保存]** ボタンを選択します。

### 環境内のアプリにカスタム アプリ ヘッダーの色を適用する

XML ファイルを指定して **Web リソース** を作成したら、ソシューションに『**設定**』を追加して、アプリヘッダースタイルを有効にします。

1. ソリューションで、**[既存を追加] > [その他] > [設定] > [設定の環境の値]** を選択します。
   ![image-20241022123813464.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/985cd8bd-4842-dce4-2b2a-53a4ed506918.png)
1. **検索** ボックスで、**[アプリ ヘッダーの色を上書きする]** を探します。※英語の場合は **[Edit Override app header color]**
1. チェックマークを入れた状態で **[次へ]** ボタンを選択します。
   ![image-20241022125408793.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/5e7cedd6-71c5-070e-6cff-8393b03b0e58.png)
1. **[追加]** ボタンを選択します。
   ![image-20241022125601510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/97d2a02b-c33d-9516-59ae-3cef71ef0c19.png)
1. ソリューションの [設定] から **[アプリ ヘッダーの色を上書き]** のコマンドバーで **編集** を選択します。
   ![image-20241022125717115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/a9ddbe52-1d9d-f19a-2f3e-8a7f3d06af5c.png)
1. 右側のプロパティ ペインで、**[設定の環境値の値]** で **[+既存の値を追加する]** を選択し、作成しておいた **Web リソース** の **名前**(接頭辞付) を入力します。
   ![image-20241022131018230.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/3724f1e8-3632-e318-504e-c63c78e3658d.png)
1. **[保存]** ボタンを選択します。
1. コマンドバーで **[すべてのカスタマイズの公開]** (リューション内の項目が選択されていない場合に表示) を選びます。 
   ![image-20241022131435026.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/e4bfc509-2540-b2a7-3d01-8b76fe015bba.png)
1. アプリを再生して、表示に反映されているか確認します。
   ※反映に時間がかかる場合があります。ブラウザの更新をしてください。

# 参考

- [最新のテーマを使用する - Power Apps | Microsoft Learn](https://learn.microsoft.com/power-apps/maker/model-driven-apps/modern-theme-overrides?source=recommendations)