--- sourceDocument: Xanadu モバイルの構成とナビゲーション sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/mobile Release : - xanadu ft:locale : - ja-JP ft:publication_title : - Xanadu モバイルの構成とナビゲーション ft:clusterId : - mobile bundleId : - mobile workflow : - Platform --- # ナビゲーションバーとナビゲーションタブの構成 # ナビゲーションバーとナビゲーションタブの構成 {#ariaid-title1} * リリースバージョン: Xanadu * * 更新日 2024年08月01日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：6分 モバイルアプリの下部に表示されるナビゲーションバーを構成します。ナビゲーションバーのタブを使用して、画面、ランチャー画面、保存されたレコード、設定、通知ページに移動します。 ## 始める前に 必要なロール：admin ## このタスクについて モバイルアプリにナビゲーションバーを追加し、ユーザーの要件に関連するさまざまなタイプのナビゲーションタブを追加します。事前設定されたタブを選択することも、既存のテンプレートに基づいてタブを作成することもできます。ランチャー画面と画面タブには、保存済み、通知、および設定タブと比較して若干異なる構成があります。 画面およびランチャー画面のナビゲーションタブには、バッジカウントを含めることもできます。このバッジは、定義された条件に従ってナビゲーションタブの横に表示される数字です。たとえば、バッジ数には、リスト内のレコード数やレコードセクション内のレコード数などの情報を表示できます。 以下は、各ナビゲーションタブタイプの簡単な概要です。 * ランチャー:このオプションを使用して、ランチャー画面に移動します。 * 画面:レコードデータまたは UI セクションを表示する画面に移動するには、このオプションを使用します。 * 保存済み:このオプションを選択すると、ユーザーが保存したレコードを表示するページが開きます。 * 通知:このオプションを選択すると、モバイルアプリエクスペリエンス内のユーザー関連の通知を表示する \[通知\] ページが開きます。 * 設定:このオプションを選択すると、ユーザーがモバイルエクスペリエンスを制御する \[設定\] ページが開きます。 {#config-sg-application-menu__ul_tvx_4x2_ccc} 注: ナビゲーションバーには、\[保存済み\]、\[通知\]、および \[設定\] タブのタブタイプをそれぞれ 1 つだけ含める必要があります。詳細については、「 [ナビゲーションバー](https://servicenow-prod.fluidtopics.net/5SynZjOkHWAtD_PYySU8EA "モバイルアプリのナビゲーションバーを使用して、ランチャー画面、画面、設定、通知にアクセスします。")」トピックの「ナビゲーション バーに関する一般的なガイドライン」セクションを参照してください。 ## 手順 1. 移動先 すべてシステムモバイルモバイルアプリビルダー. モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。 2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。 モバイルアプリビルダー カテゴリのホーム画面が表示されます。 3. メニューから \[すべてのモバイルレコード\] を選択します。 4. レコードタイプ フィールドから、ナビゲーション バー \[sys_sg_navigation\] を選択し、新規 を選択します。 5. ナビゲーションバーの名前を入力します。 6. ナビゲーションバーに追加するナビゲーションタブタイプを選択または作成します。 | ナビゲーションタブを追加する方法 | 手順 | | 既存のナビゲーションタブを選択する | 1. \[ナビゲーション タブ\] セクションで \[ 選択 \] を選択します。 2. ナビゲーション タブを選択し、 \[ 適用\] を選択します。 3. 追加するナビゲーションタブごとに手順 a. と b. を繰り返します。 4. \[保存\] を選択します。 {#config-sg-application-menu__ol_m14_4z2_ccc} | | 保存済み、通知、または設定のいずれかのナビゲーションタブタイプを作成します | 1. \[ナビゲーション タブ\] セクションで \[新規 \] を選択します。 2. \[保存済み\]、\[通知\]、または \[設定\] タブの種類を選択し、 \[ 続行\] を選択します。 3. 選択したオプションの新しいタブ画面で、次の操作を行います。 1. \[ ラベル \] フィールドにタブの名前を入力します。 2. \[ アクティブ \] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。 3. \[アイコン\] フィールドで、既存のアイコンを選択するか、ナビゲーションタブのアイコンを作成するかを選択します。次のいずれかを実行します。 1. \[選択\] を選択し、アイコンを選択して \[適用\] を選択します。 2. 新規 を選択して \[新しいアイコン\] フォームを表示し、次の操作を行います。 1. アイコンの名前を入力します。 2. \[ タイプ \] フィールドから \[ 画像\] を選択します。 3. 外観の設定 セクションの スタイル フィールドに 名前 と入力します。 4. \[外観の設定\] セクションの \[値 \] フィールドに、画像アイコンの名前を入力します。イメージ アイコン名の一覧については、「 [画像アイコン](https://servicenow-prod.fluidtopics.net/A8ubt4o9bVIwwNRqSyYGxg "ナビゲーションバーとタブバーで画像アイコンを使用します。画像アイコンはフォントタイプのアイコンではありません。")」を参照してください。 {#config-sg-application-menu__ol_rhn_ccf_ccc} {#config-sg-application-menu__ol_nmn_pbf_ccc} {#config-sg-application-menu__ol_en1_4bf_ccc} 4. \[保存\] を選択します。 {#config-sg-application-menu__ol_msb_11f_ccc} | | ランチャーまたは画面ナビゲーションタブタイプを作成します | 1. \[ナビゲーション タブ\] セクションで \[新規 \] を選択します。 2. \[ランチャー\] または \[画面\] タブの種類を選択し、\[ 続行\] を選択します。 3. 選択したオプションの新しいタブ画面で、次の操作を行います。 1. \[ ラベル \] フィールドにタブの名前を入力します。 2. \[ アクティブ \] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。 3. ランチャータブタイプと画面ナビゲーションタブタイプのどちらを選択したかに応じて、次のいずれかを実行します。 * \[ランチャー\] を選択した場合は、\[ランチャー\] 領域で \[選択\] を選択し、ランチャー画面を選択して、\[ 適用\] を選択します。または、\[ 新規 \] を選択してランチャー画面を作成します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示されるランチャー画面です。ランチャー画面の作成の詳細については、「 [ランチャー画面を作成](https://servicenow-prod.fluidtopics.net/Z42CUM~CHv2LiDzkn_lSzg "ダッシュボードレイアウトでランチャー画面を使用して、選択したモバイル画面タイプにユーザーがアクセスできるようにします。")」を参照してください。 * \[画面\] を選択した場合は、\[画面\] 領域で \[ 選択\] を選択し、画面を選択してから \[ 適用\] を選択します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示される画面です。 {#config-sg-application-menu__ul_lr5_1ff_ccc} 4. \[アイコン\] フィールドで、既存のアイコンを選択するか、アイコンを作成するかを選択します。次のいずれかを実行します。 * \[選択\] を選択し、アイコンを選択して \[適用\] を選択します。 * 新規 を選択して \[新しいアイコン\] フォームを表示し、次の操作を行います。 1. アイコンの名前を入力します。 2. 「 タイプ 」リストから 「画像」を選択します。 3. 外観の設定 セクションの スタイル フィールドに 名前 と入力します。 4. \[外観の設定\] セクションの \[値 \] フィールドに、画像アイコンの名前を入力します。イメージ アイコン名の一覧については、「 [画像アイコン](https://servicenow-prod.fluidtopics.net/A8ubt4o9bVIwwNRqSyYGxg "ナビゲーションバーとタブバーで画像アイコンを使用します。画像アイコンはフォントタイプのアイコンではありません。")」を参照してください。 5. \[保存\] を選択します。 {#config-sg-application-menu__ol_hhs_kn3_dcc} {#config-sg-application-menu__ul_rcp_jn3_dcc} 5. このタブでユーザーの注意を待っているレコードの数を示すバッジ数を追加します。 1. \[バッジ数\] セクションで \[新規 \] を選択します。 2. \[ 名前 \] フィールドにバッジ数の名前を入力します。 3. \[ アクティブ \] トグルを使用して、バッジをナビゲーションタブに表示するかどうかを選択します。 4. \[データ\] セクションで、条件フィルターを適用するテーブルを選択します。 5. \[条件\] セクションで、バッジ数を決定する条件に一致するレコードをカウントするために使用する条件を作成します。条件に一致するレコードは、ナビゲーションタブにカウントとして表示されます。Web ベースの UI でバッジカウントを構成する方法の詳細については、「 [ナビゲーションバーのバッジカウントの構成](https://servicenow-prod.fluidtopics.net/Q_YUJIc4ClSQvwGkoaj6gQ "バッジ数を表示するようにナビゲーションバーランチャー画面タブと画面タブを構成します。これらのバッジ数は、バッジ数 [sys_sg_badge_count] テーブル内の、構成可能な条件に一致する行の数を示します。たとえば、注意を待っている作業指示書の数や、受信した新規および未読の サイドバー メッセージの数などです。")」を参照してください。 6. \[バッジの配置\] セクションの \[場所\]、\[ モバイルコンポーネント\]、および \[コンポーネント \] のすべてのフィールドには、事前定義された値が含まれています。 7. \[保存\] を選択します。 {#config-sg-application-menu__ol_k5p_33f_ccc} 6. ユーザー基準権限を追加して、ナビゲーションバーにこのタブを表示するためにユーザーが満たす必要がある基準を決定します。詳細については、「 [モバイルアプリのユーザーロールとユーザー基準権限](https://servicenow-prod.fluidtopics.net/oyoLEDF6~PAbo5rmuQOWnA "ユーザーロールとユーザー基準権限は、モバイルプラットフォーム内でロールを定義したり、ユーザーをグループにセグメント化したりできるようにするアクセス制御メカニズムです。これらの権限を使用すると、モバイルアプリのさまざまなコンポーネントを個人またはグループに表示または非表示にできます。")」を参照してください。 {#config-sg-application-menu__ol_sl5_ndf_ccc} 4. \[保存\] を選択します。 {#config-sg-application-menu__ol_rl5_ndf_ccc} | |-|-| {#config-sg-application-menu__choicetable_opn_3z2_ccc} 7. \[保存\] を選択します。 8. ナビゲーションツリーからナビゲーションバーレコードを選択して、選択したナビゲーションタブを表示します。 9. 次の操作を行って、ナビゲーションバーに表示するナビゲーションタブの順序を設定します。 1. 定義するナビゲーションタブの \[順序\] 列の値を選択します。 2. 順序値を入力します。 注: 値が小さいナビゲーションタブは、ナビゲーションバーの左側に表示されます。 3. チェックオプションを選択 4. 注文するナビゲーションタブごとに、これらの手順を繰り返します。 {#config-sg-application-menu__ol_jsd_4jf_ccc} 10. \[保存\] を選択します。