Skip to Content
IoT ダッシュボードページとナビゲーション

ページとナビゲーション

IronFlock のボードは単一画面に限定されません。複数のページを作成し、ナビゲーションウィジェットを使ってスムーズに切り替えることができます。ユーザーにシンプルでクリック可能なページ間移動の手段を提供します。

Navigation demo

ナビゲーションの仕組み

ナビゲーションはルートによって動作します。ルートは URL の .../home/ 以降の部分で、IronFlock にどのページを表示するかを伝えます。

  • 新しいページを追加 → 新しいルートが作成されます。
  • ナビゲーションウィジェットがアドレスバーのルートを変更 → IronFlock がリンク先のページを即座に表示します。

ナビゲーションウィジェットのタイプ

選べるナビゲーションウィジェットは 3 種類です:

  • サイドナビゲーション — 垂直サイドバーメニューで、トップレベルのセクションに最適です。静的な項目を表示するか、データから動的に項目を生成できます(例:プロジェクト内のマシンごとに 1 つのエントリ)。
  • タブバー — 水平タブバーで、ページ内のサブビュー間の切り替えに使います。
  • ナビゲーションボタン — 特定のページにリンクする単一のボタンです。

相対ルートと絶対ルート

ナビゲーションウィジェットは 2 種類のルーティングスタイルに対応しています:

  • 絶対ルートはスラッシュで始まり(例:/settings/device1)、常にそのルートに正確にナビゲートします。
  • 相対ルートは先頭にスラッシュがなく(例:device2/profile)、現在のルートの最後のセグメントを置き換えます。

例: /settings/device1 にいる状態で device2/profile にナビゲートすると、新しいルートは /settings/device2/profile になります。

注意:/settings/settings/ は同じではありません:

  • /settings から device1 にナビゲートすると /device1 になります
  • /settings/ から device1 にナビゲートすると /settings/device1 になります

ダイナミックルーティング

プロジェクト内のすべてのデバイスに個別のページを作成する代わりに、* を使用したワイルドカードルートを使用できます。

例: /assets/* にページを作成します。/assets/device1/assets/device2/assets/anything のようなすべてのルートがその 1 つのページを表示します。

ページ内のウィジェットはルートセグメントを読み取り、データを自動的にフィルタリングできます。URL が /assets/device1 の場合、セグメントは以下のようになります:

  • セグメント 1 → assets
  • セグメント 2 → device1

セグメント 2 でフィルタリングするようウィジェットを設定すれば、URL 内のどのデバイスのデータも自動的に表示されます。/assets/device2 にナビゲートすると、同じページが適応して device2 のデータを表示します — ページの複製は不要です。

ナビゲーションウィジェットとダイナミックルーティングにより、ボードはモジュール化され、プロジェクトに対応した構成になります。デバイスが 5 台でも 5,000 台でも、煩雑さや複雑さなくすべてをナビゲートして管理できます。

Last updated on