モバイルの Next Experience テーマを設定する

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:3分
  • ネクストエクスペリエンステーマを有効にし、モバイルアプリのテーマを作成して適用する方法について説明します。

    ネクストエクスペリエンス の有効化

    重要:
    ServiceNow®インスタンスの Utah 以降のバージョンでネクストエクスペリエンステーマを使用します。

    ネクストエクスペリエンステーマを使用するには、インスタンスでネクストエクスペリエンスが有効になっている必要があります。有効化の手順と ネクストエクスペリエンスの詳細については、「 Next Experience でのテーマの探索」を参照してください。

    モバイルアプリで利用可能なテーマ

    テーマは、UX テーマ [sys_ux_theme] テーブルのレコードによって定義されます。インスタンスには、モバイル UI で使用するための 2 つのベースシステムテーマが含まれています。
    Polaris
    Polaris は、 ネクストエクスペリエンス が有効になっているインスタンスのデフォルトのテーマです。
    Mobile Colors Default という新しいコア UX スタイル [sys_ux_style] レコードが Polaris テーマに含まれています。このレコードは変更できませんが、ユーザーはこのレコードのコピーを作成したり、新しいテーマレコードを作成したりできます。新規またはコピーしたレコードに高い優先度の値を指定して、 モバイルカラーのデフォルト レコードで指定されている色を上書きします。
    モバイルレガシー
    モバイルレガシーはフォールバックテーマです。Utah以降にアップグレードしたインスタンスで、ネクストエクスペリエンスが有効になっていないインスタンスは、このテーマを使用します。

    Polaris テーマの下に、「 Mobile Colors Default (モバイルカラーデフォルト)」という名前の UX スタイル [sys_ux_style] レコードがあります。このレコードは、色変数名とそれに関連付けられた色を定義します。

    テーマとスタイルを作成する

    インスタンスの UX テーマ [sys_ux_theme] テーブルに ネクストエクスペリエンス テーマを作成します。デフォルトでは、 ネクストエクスペリエンス が有効になっているインスタンスは Polaris テーマを使用します。ネクストエクスペリエンスが有効になっていないインスタンスでは、モバイルレガシーテーマが使用されます。これらのテーマは変更できませんが、どちらかをコピーしてそのコピーを変更することはできます。

    各 UX テーマレコードは、インスタンスにテーマを適用するときの UI の外観を定義する 1 つ以上の UX スタイル [sys_ux_style] レコードにリンクされています。テーマレコードと同様に、デフォルトのスタイルレコードは編集できませんが、コピーすることはできます。

    ネクストエクスペリエンステーマ構成の詳細については、「Next Experience のテーマと設定の構成」を参照してください。

    重要:
    モバイルアプリは、UX スタイルの色要素のみを使用します。テーマ内のフォント、影、不透明度、その他の色以外の要素によって、モバイル UI の外観が変わることはありません。

    モバイルクライアントへのテーマの割り当て

    新しい [クライアントテーマ] フィールドを使用して、モバイルアプリビルダーモバイルアプリのテーマを設定します。

    [クライアントテーマ] フィールドが空の場合
    インスタンスは、 ネクストエクスペリエンス が有効かどうかのステータスをチェックし、モバイルアプリに使用する UX テーマ [sys_ux_theme] レコードを決定します。
    • ネクストエクスペリエンスが有効になっている場合は、Polaris テーマが使用されます。
    • ネクストエクスペリエンスが無効になっている場合は、モバイルレガシーテーマが使用されます。
    [クライアントのテーマ] フィールドが空でない場合
    モバイルアプリは、常にフィールドで指定されたテーマを使用してモバイルアプリのテーマを設定します。

    カスタムモバイルコンポーネントで色変数を使用する

    モバイルコンポーネントを設計するときに色変数を使用して、一貫したユーザーエクスペリエンスを提供します。次のコンポーネントは、色変数を利用します。
    • UI ルール
    • ナビゲーションセクション
    • マップピン
    • アイコン
    • テンプレートを表示
    • モバイルビューボタン
    • 入力説明フィールド

    色変数の使用方法は、ビルドするコンポーネントによって異なります。これらの各コンポーネントに色変数を適用する方法については、「 モバイルのカラーテーマに関する考慮事項」を参照してください。