サンプルアプリのテーマ

[アーティクル]
03/09/2022

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

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

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

前提条件

このレッスンを完了するには、一部の Microsoft 365 サブスクリプションで利用できる Microsoft Teams 内でアプリを作成する機能が必要です。また、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 を使用して設定したプロパティを持つすべてのコントロールがあります。
- テーマの変更をテストするのに役立ちます。
- 特定のコントロールをコピーして必要な画面に貼り付けると、コントロールの数式を繰り返し入力する必要がなくなります。

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

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

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

つまり、アプリのテーマが「ハイコントラスト」の場合、gblAppColors > HighContrastHyperlinks 式で定義されている色が使用されます。
もう 1 つの例は、[プライマリ] ボタンと [セカンダリ] ボタンを確認することです。
- エディタで [プロジェクト画面] を選択します。
- Alt キーを押しながら、[プロジェクト画面] のフィルターアイコンを選択します。
  
  [作業項目のフィルター] ポップアップが開きます。 クリア と適用という 2 つのボタンに注意してください。
  
  適用は、プライマリボタンの例であり、クリア はセカンダリボタンの例です。
適用ボタンを選択し、[境界線/厚さ/色] に関連するプロパティを選択して、定義された式に注意してください。
適用ボタンはプライマリボタンとして定義し、ロード画面 > OnVisible> ButtonPrimary 式で定義されたすべてのプロパティを使用します。

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

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

注意

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

サンプルアプリのテーマを更新する

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

ロード画面 に移動して、ドロップダウンで OnVisible プロパティを選択します。
数式バーを展開し、ButtonPrimary > 塗りつぶし 関数まで下にスクロールします。
最後の 2 つのパラメーターを Red と DarkRed に更新します。
別の画面に移動してから、OnVisible 関数を実行するために [ロード画面] に戻ります。
プロジェクト 画面で、フィルター ボタンを選択して [フィルター] ポップアップを開き、[適用] ボタンの色が DarkRed になったことを確認します。
非表示の管理画面 に移動して、キーボードで Alt キーを押して、ダークモードオン トグルを選択します。
関数をロードするために [ロード画面] に再度移動してから、[プロジェクト] 画面に戻ります。画面がダークモード (背景が暗い) になり、[適用]ボタンの色が Red に変更されていることに注意してください。
同様に、SecondaryButton のプロパティを変更すると、クリア ボタンなどのセカンダリボタンの色が変更されます。

注意

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