次の方法で共有

モデル駆動型アプリでモダン テーマを使用する

モデル駆動型アプリのための モダンでリフレッシュされた外観を持つモデル駆動型アプリ のユーザーは、Microsoft Fluent 2 デザインシステムに沿った更新されたスタイリングを体験できます。 このモダンに刷新された外観には新しいテーマ システムが付属しているため、クラシック テーマ は適用されません。ただし、作成者は、モダンで更新された外観を有効にしたユーザーのために、組織ブランドに合わせるために、アプリで使用される色を変更できます。 この記事では、刷新されたモダンな外観で使用できるスタイルの上書きと、それらを組織に実装する方法について説明します。

注意

  • 最新のテーマでは、現在、アプリ全体のカスタム テーマの提供と、アプリのヘッダー色のオーバーライドがサポートされています。 ビジネス プロセス フロー コントロールのカスタマイズなどの他のカスタマイズは利用できません。
  • モダンテーマが機能するには、モデル駆動型アプリで 新デザインを使用している必要があります。 詳細: モデル駆動型アプリのモダンで爽やかなデザイン

アプリ テーマを変更する

[このトピックはプレリリース ドキュメントであり、変更されることがあります。]

アプリで モダンでリフレッシュされた外観を有効にする を使用すると、作成者は組織のブランド化に合わせるのに役立つカスタム テーマを作成できます。 カスタム テーマを使用すると、アプリのヘッダー、ハイパーリンク、ルックアップ、プライマリ ボタン、アクティブなタブ インジケーター、行の選択、ホバー効果を変更できます。 カスタム テーマでは、アプリケーションで使用されるフォントを変更することもできます。 これを実現するには、目的のテーマ情報を XML リソースにカプセル化し、アプリ設定を使用してこの Web リソースをポイントし、新しいモダンテーマが期待どおりであることを確認します。

重要

  • これはプレビュー機能です。
  • プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が事前にアクセスし、そこからフィードバックを得ることができます。
  • UI の大部分はカスタム テーマを反映しています。ただし、アプリには、タイムライン コントロール、ルックアップ ドロップダウン、レガシ グリッド、監査履歴など、最新のテーマを使用していない領域がまだあります。

カスタム テーマ XML リソースの概要

カスタムのモダン テーマを作成する最初の手順は、目的のテーマ パラメーターを含む XML ファイルを作成し、次の属性の 1 つ以上を CustomTheme タグ内に定義することです。

  • BasePaletteColor – テーマの 16 スロットのカラー パレットを生成するためのベースとして使用されるシード カラー (16 進コード)。
  • LockPrimary – 選択したシードカラーを使用して 16 スロットのカラーパレットを生成する方法を決定するブール値。
    • False (デフォルト): パレットはアクセシビリティのために最適化されていますが、生成されたパレットのどのスロットにもシードカラーが表示されるとは限りません。 これが既定の設定です。 Fluent テーマ ジェネレーター を使用して、basePaletteColor、vibrancy、hueTorsion の選択に基づいて生成されたパレットをプレビューします。
    • True: シードカラーはパレットのプライマリ(中央)スロットに配置されます。 残りの色は、一方の面で色を徐々に明るくし、もう一方の面を暗くすることで生成されます。 この生成されたパレットはコントラスト比のアクセシビリティ要件を満たさないようです。
  • Font – カスタム テーマのフォント。 カスタム テーマによってレンダリングされるフォントは、ブラウザーとターゲット コンピューター がそのフォントを表示できるかどうかによって異なります。
  • Vibrancy – パレットの暗さや明るさ、特に明るい色に影響を与えるオプション。 許容値は -100 から 100 の間で、既定値は 0 です。 このオプションは、lockPrimary="true" の場合にのみ適用されます。
  • HueTorsion – パレットの濃淡、影、色調、特に明るい色に影響を与えるオプション。 許容値は -100 から 100 の間で、既定値は 0 です。 このオプションは、lockPrimary="true" の場合にのみ適用されます。

パレットを上書きする

テーマパレットの個々のスロットをオーバーライドすると、作成者はスロットの色を完全に制御でき、上記の標準のテーマパラメータ以外に追加の変更が必要な場合に特に便利です。 特定のスロットをオーバーライドするには、目的のスロットにその名前で値を割り当てます。 たとえば、darker70、primary、またはlighter10 の HEX コードを指定して、好みに合わせて外観を正確に調整したりできます。 16 個のスロットすべてに値を設定すると、前のセクションで説明したすべてのパレット オプションが完全に上書きされ、高度にカスタマイズされた独自の配色が可能になります。

パレットのスロット名は、最も暗いものから最も明るいで次の通りです: darker70、darker60、…<>、darker10、primary、lighter10、lighter20、…、lighter80。 これらのスロットが Fluent コントロールで一般的にどのように使用されるかについては、Fluent テーマ デザイナーを参照してください。

モダンなテーマのカラースロット。

カスタム テーマの XML 例

たとえば、この XML では、緑色で異なるフォントのカスタム テーマを指定しています。

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

この XML は、1 つのスロットをオーバーライドする代替パレット生成アルゴリズムを使用して、カスタム テーマを指定します。

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

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

作成者は、アプリ ヘッダーのスタイルをカスタマイズして、アプリのテーマから逸脱させることができます。 これを行うには、カスタム モダン テーマ用に作成された XML を、AppHeaderColors タグ内で定義された次の属性の 1 つ以上で拡張します。

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

最新のテーマの XML の例

たとえば、この XML は、緑色のカスタム テーマを黒のアプリ ヘッダーで拡張します。 最適なユーザビリティを得るには、対話 状態ごとに異なるカラー値を指定することをお勧めします。

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

注意

これらの設定により、アプリ ヘッダーの色をオーバーライドする 設定で指定された色はすべて無視されます。

Web リソースを作成する

  1. テキスト エディタまたは XML エディタを使用して、Web リソースの作成に使用される XML を保存します。 最新のテーマの XML の例

  2. Power Apps にサインインします。

  3. 左側のナビゲーション ペインで ソリューション を選択し、新規ソリューション を作成します。

  4. 新規>その他>Web リソース を選択します。

  5. ファイルの選択 を選択し、先ほど作成した XML テキスト ファイルを参照して選択します。

  6. 新しい Web リソース プロパティ ペインで、以下の値を入力します:

    • 表示名: 緑のカスタムテーマ のような表示名を入力します。
    • 名前。 自動生成された名前を受け入れるか、Web リソースの一意の名前を入力します。
    • 種類: データ (XML)

  7. 保存 を選びます。 このカスタマイズを次のセクションの手順で公開します。

環境内のアプリにカスタム テーマを適用する

色を選択して Web リソースを作成したら、次の手順に従って、新デザイン が有効化された環境内のすべてのアプリでこのアプリヘッダースタイルを有効にします。

  1. Web リソースの作成 に使用したソリューションで、既存を追加>その他>設定 を選択します。
  2. カスタム テーマ と入力し 検索 ボックスで、カスタム テーマの定義を選択し、次へ を選択し、追加 を選択します。
  3. ソリューションで、カスタム テーマ定義 を選択し、コマンド バーの 編集 を選択します。
  4. 右側の カスタム テーマ定義の編集 プロパティ ウィンドウで、環境値の設定 の 新しい環境値 を選択し、以前に作成した Web リソースの一意の名前を入力します (一意の名前については、ソリューションの 名前 列を確認してください)。 二重引用符を削除し、Web リソースの発行者の接頭辞を必ず追加してください。 たとえば、この例のように、名前は contoso_green-custom-theme のように表示されます。 Web リソースの一意の名前が contoso_green-custom-theme のテーマの環境設定。
  5. 保存 を選びます。
  6. 左側 オブジェクト ウィンドウの 設定 を選択し、コマンド バーの すべてのカスタマイズの公開 を選択します。 (このコマンドは、ソリューション内のコンポーネントが選択されていない場合に表示されます)。

拡張された緑のテーマのサンプルを使用したカスタム モデル駆動型アプリ。 カスタムグリーンテーマを使用し、素晴らしいバイブスフォントで拡張されたカスタムモデル駆動型アプリ。

新しいアプリ ヘッダーの色を確認する

カスタム テーマを公開した後、アプリでのテーマの適用を検証して、すべてが期待どおりに表示されることを確認する必要があります。

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

作成者は、アプリ ヘッダーのスタイルのみをカスタマイズして、既定のアプリ テーマから逸脱することを選択できます。 これは、次の手順を使用して実行できます。

  1. さまざまな色を選択した XML ファイルを作成し、 タグ内に app header color overrides セクションAppHeaderColors の 1 つ以上の属性を定義します。
  2. カスタム テーマ で説明したのと同じプロセスを使用して Web リソースを作成しますが、XML リソースには 緑のアプリ ヘッダー XML などの適切なわかりやすい表示名を付けてください。
  3. この Web リソースを アプリ ヘッダーの色を上書きする 設定で環境またはアプリに割り当てることで、カスタム アプリ ヘッダーの色を環境内のアプリに適用します。 環境にカスタム テーマを適用する の手順に従いますが、代わりに アプリ ヘッダーの色を上書きする 設定を使用してください。

    注意

    アプリ ヘッダーの色を上書きする 設定で定義された構成は、カスタム テーマ定義 設定が定義されている場合、すべて無視されます。

  4. すべてのボタンの状態を含むカスタム アプリのヘッダーのビジュアルを検証して、すべてが期待どおりに表示され、アクセシビリティに十分なコントラスト比があることを確認します。 次の色の選択を確認する必要があります:
    • 目的の色は、静止時のアプリ ヘッダーと各ボタンの操作状態に対して表示されます。
    • 静止状態および各ボタンの操作状態では、前景色と背景色の間に少なくとも 4.5:1 のコントラスト比があります。

アプリ ヘッダーの色の上書きの XML の例

例として、この XML は、アプリ ヘッダーの背景色を緑色、テキストを白色、さまざまなボタンの操作状態の背景色を濃く指定します。 最適な使いやすさを実現するために、各状態に対して異なる色の値を指定することをお勧めします。

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

この構成では、アプリを実行したときに、アプリ ヘッダーは次のようになります。 テーマを表示するには、ブラウザーのタブを更新する必要がある場合があります。
モデル駆動型アプリの緑色のアプリ ヘッダー

参照

クラシック テーマ設定

刷新されたモダンな外観