統合サービス デスクのテーマのカスタマイズ

  • [アーティクル]

 

公開日: 2016年11月

対象: Dynamics 365 (online)、Dynamics 365 (on-premises)、Dynamics CRM 2013、Dynamics CRM 2015、Dynamics CRM 2016

Unified Service Desk のテーマは、エージェント アプリケーションのルック アンド フィールを定義します。Unified Service Desk のテーマは XAML リソース ライブラリで構成され、任意の web サーバーに配置して、URL を通して参照したり、あるいは .NET アセンブリ (dll) にコンパイルして、エージェント アプリケーションで配布することができます。

Unified Service Desk 2.2 では、あらかじめ定義された 空気のテーマ によりハイ コントラスト モードがサポートされます。Windows のハイ コントラスト モードにより、カラー コントラストを高めることで、画面のテキストが鮮明に分かりやすくなります。 コンピュータのハイ コントラスト モードをオンに設定し、Air Theme を使用する場合は、Unified Service Desk クライアントはハイ コントラスト モードに自動的に切り替わります。 同様に、コンピューターのハイ コントラスト モードを無効にすることにより、Unified Service Desk クライアントは正常な表示モードに自動的に切り替わります。

注意

Unified Service Desk クライアントでの通常およびハイ コントラスト モードの自動切り替えはあらかじめ定義された 空気のテーマ に対してのみサポートされています。 ハイ コントラスト モードをサポートするカスタム テーマまたはユーザー定義されたホストされたコントロールを使用している場合、Unified Service Desk クライアントを再起動した後にのみ切り替えが発生します。詳細:カスタム テーマに対してハイ コントラスト モードをサポートする

このトピックの内容

Unified Service Desk で使用できる定義済みのテーマ

定義済みのテーマの設定

Unified Service Desk のテーマのカスタマイズ

表示をカスタマイズするためにアクション コールをテスト

カスタム テーマに対してハイ コントラスト モードをサポートする

Unified Service Desk で使用できる定義済みのテーマ

Unified Service Desk には 3 つの定義済みのテーマが付属しています。

空気のテーマ

これは、空気のテーマです。 このテーマではハイ コントラスト モードがサポートされています。

Unified Service Desk の空気のテーマ

青のテーマ

これは、青のテーマです。 このテーマではハイ コントラストの設定はサポートされず、Unified Service Desk 2.2 リリースでは廃止されます。詳細:ブログ: あらかじめ定義された Unified Service Desk のテーマ

Unified Service Desk の青いテーマ

スタイルのテーマ

これがスタイルのテーマです。 このテーマではハイ コントラストの設定がサポートされず、Unified Service Desk 2.2 リリースでは廃止されます。詳細:ブログ: あらかじめ定義された Unified Service Desk のテーマ

Unified Service Desk のスタイルのテーマ

定義済みのテーマの設定

グローバル マネージャーにホストされたコントロール SetTheme アクションにより、Unified Service Desk でテーマを設定できます。 [SetTheme] アクションへのアクション コールを作成し、次の構文を使用してあらかじめ定義されたテーマ コールを [データ] フィールドに渡して、定義済みのテーマのいずれかを設定できます。

/UnifiedServiceDesk;component/Styles/<Theme_Style>.xaml

次の表は、定義済みのテーマを設定するアクション呼び出しの [データ] フィールドの構文を説明しています。

テーマ

データ フィールドの構文

空

/UnifiedServiceDesk;component/Styles/AirStyle.xaml

青

/UnifiedServiceDesk;component/Styles/BlueStyle.xaml

スタイル

/UnifiedServiceDesk;component/Styles/Style.xaml

サンプルの Unified Service Desk クライアント アプリケーションでは、エージェントは右上にある [設定] アイコンの隣の下矢印をクリックしてから、定義済みのテーマを [テーマ設定] サブメニューから選択して、テーマを設定できます。

[テーマ設定] サブメニューのテーマをクリックすると、では、前述の [データ] フィールドの適切な構文を使用して、[SetTheme] アクションへのアクション呼び出しが行われます。 たとえば、これは、空気スタイルのアクション呼び出しの定義です。

空気のテーマのアクション コール定義

Unified Service Desk のテーマのカスタマイズ

様々な定義済みテーマを選択できることに加え、Unified Service Desk でテーマをカスタマイズできます。 これは、選択的コントロールを更新し、Unified Service Desk にある既存のテーマを統合して外観をカスタマイズすることにより行われます。Unified Service Desk により、既定の形式 (XAML ファイル) および一連の XAML ブラシ リソースが提供されます。これにより、エージェント アプリケーションの表示を定義する各種 WPF コントロールとレイアウトを理解するのに使用できます。Unified Service Desk アプリケーション用の既定のスタイル、DefaultStyle.xaml は、User Interface Integration SDK のダウンロード パッケージでその他の XAML ブラシ リソースと共に見つかります。 パッケージをダウンロードして展開し、「UII\USD Developer Assets\USD Layout and Style Sheet」というディレクトリの下にあるファイルとそのコンテンツを表示します。

注意

WPF および XAML スクリプトの記述は、XAML ファイル内のコントロールを操作することによって、エージェント アプリケーションの表示をカスタマイズするために必要な技能です。

グローバル管理者がホストするアプリケーションに対して、SetTheme アクションを使用して、エージェント アプリケーションの既定の形式をカスタマイズします。Unified Service Desk は、エージェント アプリケーションの既存のテーマまたは表示形式のカスタマイズの統合をサポートします。 これは事実上、ResourceDictionary 参照ブロックに加えて、変更したいコントロールまたは領域を指定するだけで、既存の表示スタイルをカスタマイズできることを意味します。 ResourceDictionary の全般的な情報は、ResourceDictionary と XAML のリソース参照を参照してください。

アクション コールを作成し、タイトルのテキストおよびエージェント アプリケーションのスキンの色を黄色に変更しましょう。 必要な DefaultStyle.xaml ファイルがあるかどうかを確認します。

  1. Microsoft Dynamics 365 にサインインします。

  2. [設定] > [Unified Service Desk] の順に移動します。

  3. アクション コールをクリックします。

  4. [新規] をクリックしてアクション コールを作成します。

  5. [新しいアクション コール] ページで、全般プロパティを設定します。

    1. [名前] フィールドで、[カスタム表示のアクション コール] を入力します。

    2. [ホストされたコントロール] フィールドで、[Dynamics 365 グローバル マネージャー] を選択します。 Global Manager のホストされたコントロール タイプの別の名前がある場合、その名前を指定します。

    3. [アクション] フィールドで、[SetTheme] を選択します。

  6. ここでは、表示をカスタマイズするためのパラメーターを設定します。[データ] フィールドで、次の ResourceDictionary 参照をコピーします。

    <ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
     xmlns:themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
     xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
     xmlns:classic="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
     xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
     xmlns:system="clr-namespace:System;assembly=mscorlib">

    重要

    この ResourceDictionary 参照は、既定のスタイルをカスタマイズするのに使用するすべてのアクション コールに含める必要があります。

  7. 次のコマンドを [データ] フィールドの、以前コピーした ResourceDictionary 参照の後にコピーします。

    <SolidColorBrush x:Key="WindowBackgroundStyle" Color="Yellow"/>

    エージェント アプリケーションのスキンが黄色に変更されます。 背景色を設定するこのコマンドは、DefaultStyle.xaml ファイルの <!-- Region General --> セクションにあります。

  8. 前の手順でコピーしたコマンドの後に、次のコマンドをコピーします。

    <Style x:Key="MainWindow" TargetType="{x:Type Window}" BasedOn="{StaticResource {x:Type Window}}">
    <Setter Property="Title" Value="CUSTOM TITLE: Agent Application for CONTOSO INC."/>
    <Setter Property="Icon" Value="/UnifiedServiceDesk;component/imageResources/dynamics16-32-48-256.ico"/>
    <Setter Property="FontFamily" Value="Segoe UI" />
</Style>

    これにより、タイトル バーのテキストは、“CUSTOM TITLE: Agent Application for CONTOSO INC.” に変更されます。 ウィンドウ タイトルを設定するこのコマンドは、<!-- Region Window --> section in the DefaultStyle.xaml file. にあります。

  9. [データ] フィールドの最後に次のものを追加することにより、ResourceDictionary タグを閉じます。

    </ResourceDictionary>

    これがアクション コールの外観です。

    表示をカスタマイズするためにアクション コールを定義

  10. 保存 をクリックします。

これにより、エージェント アプリケーションでアクション コールをテストする準備が整いました。

表示をカスタマイズするためにアクション コールをテスト

このアクション コールは、ツールバー ボタンを作成し、アクション コールをそれに添付することにより、コールできます。 時間を短縮するため、デバッガーのホストされたアプリケーションを使用してアクション コールをテストします。

  1. Unified Service Desk クライアント アプリケーションを開始し、Dynamics 365 サーバーにサインインします。

  2. クライアント アプリケーションで、右上隅の設定メニューの隣の下矢印をクリックし、[デバッグ] をクリックします。

  3. デバッガーで、[アクション コール] タブの隣の下矢印をクリックして、アクション コールおよび UII アクションをテストできる領域を表示します。

    テスト アクション コールおよびデバッガの UII アクション

  4. [アクション コール] ドロップダウン リストから、[カスタム テーマのアクション コール] を選択し、[アクション コールの実行] アイコン (USD のデバッガ実行アクション コール ボタン) をクリックします。 タイトル バーのテキストとエージェント アプリケーションのスキンの色が変化します。

    クライアント アプリケーションのカスタマイズした表示

変更を元に戻すには、クライアント アプリケーションで定義済みテーマのいずれかを選択します。

カスタム テーマに対してハイ コントラスト モードをサポートする

Unified Service Desk は通常モードおよびハイ コントラスト モード XAML ブラシ リソースを内部で使用し、コンピューターのハイ コントラスト モード設定に従って UI 要素を表示します。User Interface Integration SDK ダウンロード パッケージで XAML ブラシ リソースを見つけることができます。 パッケージをダウンロードして展開し、「UII\USD Developer Assets\USD Layout and Style Sheet」というディレクトリの下にあるファイルとそのコンテンツを表示します。

カスタム テーマでハイ コントラスト モードをサポートするには、次を考慮します:

  • カスタム テーマの設定に対して 2 つのアクションを作成する: 1 つは通常モードおよびもう 1 つはハイ コントラスト モードです。 例えば、XAML ブラシのカラー プロパティを定義している際に、次を使用します:

    • 通常モードの色クラスで定義されたあらかじめ定義された色の 1 つ:

      <SolidColorBrush x:Key="WindowBackgroundStyle" Color="Yellow"/>

    • ハイ コントラスト モードの SystemColors クラスで定義されたシステム カラーの 1 つ:

      <SolidColorBrush x:Key="WindowBackgroundStyle" Color="{x:Static SystemColors.WindowColor}"/>

  • アクション コールが適切に実行されるように、各アクション コール定義の新しい $SystemParameters.HighContrast 置換パラメーターを条件として使用します。 例えば、カスタム テーマを設定するためのアクション コール定義では次を考慮します:

    • 通常モードでは、[条件] フィールドで次を使用し、ハイ コントラスト モードがコンピューターに設定されていないことを確認します:

      "[[$SystemParameters.HighContrast]g]"=="False"

    • [ハイ コントラスト] モードでは、[条件] フィールドで次を使用し、ハイ コントラスト モードがコンピューターに設定されていることを確認します:

      "[[$SystemParameters.HighContrast]g]"=="True"

関連項目

Customize themes for High Contrast settings
統合サービス デスクの構成チュートリアル
アプリケーションの外観をカスタマイズ
ホストされたコントロールの種類とアクション/イベント リファレンス
TechNet: Unified Service Desk for Microsoft Dynamics CRM の管理ガイド

Unified Service Desk 2.0

© 2017 Microsoft. All rights reserved. 著作権