次の方法で共有

サンプル アプリのテンプレートでのテーマ

キャンバス アプリの最も魅力的な機能は、ユーザーまたは組織のブランディングと好みに応じてユーザー インターフェイスをカスタマイズする機能です。 テーマ戦略により、組織のブランドに一致するアプリを作成できます。 テーマ には、色、フォント、境界線などのコントロールとコンポーネントの複数のデザイン プロパティを定義するスタイルのコレクションが含まれています。

この記事では、グローバル変数を使用してテーマを定義する方法と、グローバル変数を更新するだけでアプリ全体で色とプロパティを簡単に変更する方法を学習します。

サンプル アプリのテンプレートのテーマについては、こちらのビデオを視聴してください:

前提条件

このレッスンを完了するには、一部の Microsoft 365 サブスクリプションで利用できる Microsoft Teams 内でアプリを作成する機能が必要です。 また、チームに Microsoft Teams の Milestone サンプル アプリ テンプレートをインストールする必要があります。 https://aka.ms/TeamsMilestones でチームにインストールできます。

テーマ戦略の定義

この例では、Milestones アプリでテーマの色とスタイルを定義するためにグローバル変数がどのように使用されているかを確認します。 次のグローバル変数は、ロード画面の OnVisible プロパティで定義されています。

  • gblAppColors は簡単に参照できるように色を定義します
  • gblAppSizes は、モバイル アプリとウェブ アプリのさまざまなサイズのフォントを定義します
  • gblAppColors を使用するすべての単一コントロールの gblAppStyles プロパティ
  • チームテーマが暗い場合は、すべてのコントロールが暗いテーマに合うように gblThemeDark を true に設定します
  • Teams テーマが高コントラストの場合は、すべてのコントロールが高コントラストに適応するように gblThemeHiCo を trueに設定します

テーマ戦略のテスト

テーマ戦略をテストするために、2 つの非表示画面が定義されています。

  • 非表示の管理画面 – この画面には tglAdmin_DarkModeとtglAdmin_ContrastMode という 2 つのトグルが定義されています。 この画面は、テストのためにチームのテーマを変更することなく、ダーク モードとコントラスト モードの迅速なテストに役立ちます

    非表示の管理画面

  • 非表示のコントロール画面 – この画面には、gblAppStyles を使用して設定したプロパティを持つすべてのコントロールがあります。

    • テーマの変更をテストするのに役立ちます。

    • 特定のコントロールをコピーして必要な画面に貼り付けると、コントロールの数式を繰り返し入力する必要がなくなります。

      非表示のコントロール画面

サンプル アプリ テンプレートのテーマ変数の使用

  1. マイルストーン アプリでのテーマの使用法を理解するには、ツリービューで プロジェクト画面 画面を開き、+ 新しいプロジェクト を選択します。

  2. +新しいプロジェクトの色プロパティを選択します。

    ロード画面の OnVisible プロパティから、式が gblAppStyles>ButtonTransparent>Color 式を参照していることに注意してください。

    つまり、アプリのテーマが「ハイ コントラスト」の場合、gblAppColors>HighContrastHyperlinks 式で定義されている色が使用されます。

  3. もう 1 つの例は、[プライマリ] ボタンと [セカンダリ] ボタンを確認することです。

    • エディタで [プロジェクト画面] を選択します。

    • Alt キーを押しながら、[プロジェクト画面] のフィルター アイコンを選択します。

      [作業項目のフィルター] ポップアップが開きます。 クリアと適用という 2 つのボタンに注意してください。

      [クリア] と [適用] ボタン

      適用は、プライマリ ボタンの例であり、クリアはセカンダリ ボタンの例です。

  4. 適用ボタンを選択し、[境界線/厚さ/色] に関連するプロパティを選択して、定義された式に注意してください。

    色プロパティを選択する

  5. 適用ボタンはプライマリ ボタンとして定義し、ロード画面>OnVisible>ButtonPrimary 式で定義されたすべてのプロパティを使用します。

    ButtonPrimary 式で選択したテーマと色の変数に応じて、ボタンのスタイル プロパティが更新されます。

    同様に、クリアはセカンダリ ボタンとして定義され、gblAppStyles>ButtonSecondary で定義されたすべてのプロパティを使用します。

    注意

    アプリのもう 1 つの可能な拡張機能は、すべてのコントロールで使用される 1 つの変数として、またはコントロールごとに 1 回、フォントをプロパティとして追加すること (他のスタイルプロパティがプライマリ ボタンまたはセカンダリ ボタンに対して個別に定義される方法など)。 Milestones アプリ全体のフォントは Segoe UI であり、フォントのテーマを特定する必要はありませんでした。

サンプル アプリ テンプレートのテーマの更新

このセクションでは、特定のコントロールのプロパティを変更する方法と、さまざまな画面でコントロールが更新される方法を説明します。 この例では、プライマリ ボタンの塗りつぶしプロパティを更新し、ダーク モードと既定モードでボタンの色がどのように変化するかを確認します。

  1. ロード画面に移動して、ドロップダウンで OnVisible プロパティを選択します。

  2. 数式バーを展開し、ButtonPrimary>塗りつぶし関数まで下にスクロールします。

  3. 最後の 2 つのパラメーターを Red と DarkRed に更新します。

    fill プロパティを更新する

  4. 別の画面に移動してから、OnVisible 関数を実行するために [ロード画面] に戻ります。

  5. プロジェクト画面で、フィルター ボタンを選択して [フィルター] ポップアップを開き、[適用] ボタンの色が DarkRed になったことを確認します。

    [適用] ボタンが DarkRed になりました

  6. 非表示の管理画面に移動して、キーボードで Alt キーを押して、ダーク モード オン トグルを選択します。

    ダーク モードの切り替え

  7. 関数をロードするために [ロード画面] に再度移動してから、[プロジェクト] 画面に戻ります。 画面がダーク モード (背景が暗い) になり、[適用]ボタンの色が Red に変更されていることに注意してください。

    Red ボタンとダーク モード

  8. 同様に、SecondaryButton のプロパティを変更すると、クリア ボタンなどのセカンダリ ボタンの色が変更されます。

    注意

    fill 関数を直接更新することは、前述の通りテーマをテストする簡単な方法です。 プライマリ ボタン コントロールだけでなく、それが使用されている他のすべてのコントロールの色を変更する必要がある場合は、変数 gblAppColors の下のカラー パレットを、組織にとって最も意味のある希望の色と名前の式で更新する必要があります。 例えば、companynameDefaultHeader: ColorValue("#30D5C8") がターコイズ ブルーの公式になります。