モバイル向けの Next Experience テーマの構成

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

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

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

    ネクストエクスペリエンステーマを使用するには、インスタンスでネクストエクスペリエンスを有効にする必要があります。アクティブ化の手順と ネクストエクスペリエンスの詳細については、「 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 ルール
    • ナビゲーションセクション
    • マップのピン
    • アイコン
    • テンプレートを表示
    • モバイルビューボタン
    • 入力説明フィールド

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