ウィジェット：モバイルナビゲーションバー

モバイルナビゲーションバーウィジェットを使用すると、ユーザーはタッチ操作に対応したデバイスで、いくつかの最上位ページ間を移動できます。このナビゲーションバーは、スマートフォンで使いやすいように、モバイル Workshop アプリケーションの下部に表示されます。ナビゲーションバーには最大4項目を表示でき、サブメニューを設定して追加の項目を表示することもできます。

モバイルナビゲーションバーのデザインと動作は、iOS のデザインガイドライン（タブバー ↗）および Android の Material Design（ボトムナビゲーション ↗）に基づいています。

ナビゲーションバーのセットアップ

ナビゲーションバーを有効にして設定するには、モジュールのデバイスの種類がモバイルに設定されていることを確認し、Workshop モジュールの編集中に左側のレイアウトとナビゲーションバーを選択します。

右上のモジュールナビゲーションバーを表示スイッチでナビゲーションバーを有効にし、ナビゲーション項目を追加します。各ナビゲーション項目にはラベルとアイコンが含まれます。

通常は、アプリケーション内のページに移動するようにナビゲーション項目を設定します。+ イベントを追加を選択し、目的のページに切り替えるイベントを選択します。

動作

以下では、モバイル Workshop アプリケーションでのナビゲーションバーの動作の特性について説明します。

• 常に表示。有効にすると、ユーザーがページ間を移動する際、モバイルアプリケーションの画面下部にナビゲーションバーが常に表示されます。ナビゲーションバーを非表示にして操作に集中できるインターフェースを作成するには、画面全体を覆うように設定できるドロワーを使用します。

• スタックナビゲーション。特定のページに移動するようにナビゲーション項目を設定すると、そのページがアクティブなときは常に、ナビゲーションバーでその項目が強調表示されます。また、ユーザーが別のページに移動した場合も強調表示が維持されるため、どこから移動してきたかを把握できます。

  たとえば、最初のナビゲーション項目の名前がフライトで、フライトの一覧を含むフライト一覧というページを開くように設定されているとします。一覧でフライトを選択すると、選択したフライトの詳細を表示するフライト360という別のページにアプリケーションがユーザーを移動させるとします。

  この場合、ユーザーがフライト一覧ページからフライト360ページに移動しても、ナビゲーションバーのフライトナビゲーション項目は引き続き強調表示されます。これにより、ユーザーはアプリケーション内の現在位置を把握しやすくなり、ナビゲーションバーのフライトを選択してフライト360ページから離れることができます。

設定オプション

ナビゲーションバーの主な設定オプションは次のとおりです。

• アイコン： このモバイルアプリケーションが Foundry Carbon など、Foundry のほかの場所に埋め込まれているときに表示されるアイコンです。
• タイトル： このアプリケーションを開いたときにブラウザーのタブに表示されるタイトルです。
• 高さ： ナビゲーションバーの高さ（ピクセル単位）です。
• メニューテキストを隠す： ナビゲーションバーの項目のテキストを非表示にし、アイコンのみを表示します。
• ナビゲーション項目： 下部のナビゲーションバーに横並びで表示される最大4項目です。各項目について、次の設定ができます。
  • **タイプ：**単一項目は、ラベルとアイコンを表示し、Workshop のイベントを実行します。サブメニュー項目にはラベルとアイコンがあり、選択すると、ネストされた単一項目の一覧が表示されます。
  • ラベル： ナビゲーション項目に表示されるテキストラベルです。画面のスペースが限られているため、ラベルには1語または短いフレーズを使用することを推奨します。
  • アイコン： ナビゲーション項目に表示されるアイコンです。
  • イベント： 項目を選択したときに実行される Workshop のイベントです。通常、ナビゲーション項目は Workshop モジュール内のページに移動するように設定します。