ui-base（ダッシュボード基盤）
ダッシュボード全体のURL、ナビゲーション、アプリアイコンを設定
📊 Node-RED Dashboard 2.0 ガイド - 概要編
このガイドでは、FlowFuse Dashboard（Node-RED Dashboard 2.0）の全体像と基本概念について、初心者の方でも理解できるように詳しく説明します。
📑 目次
📚 1. Dashboard 2.0とは？
🤔 「Dashboard」って何？
Dashboardとは、Node-REDで収集・処理したデータを視覚的に表示するWebアプリケーションを簡単に作成できる機能です。 日常生活で例えると、自動車のダッシュボードのようなもの - 速度計、燃料計、警告灯など、必要な情報が一目で分かるように配置されています。
🚗 自動車のダッシュボードに例えると:
- 🏎️ 速度計 = リアルタイムセンサー値の表示（gauge）
- 📊 トリップメーター = 履歴データのグラフ表示（chart）
- 🔘 エアコンボタン = 機器を操作するボタン（button）
- 🎚️ 音量調整 = 値を調整するスライダー（slider）
- ⚠️ 警告灯 = アラート通知（notification）
🔄 Dashboard 1.0との違い
Dashboard 2.0（FlowFuse Dashboard）は、従来のDashboard 1.0の後継として開発されました。
| 項目 | Dashboard 1.0（旧） | Dashboard 2.0（新） |
|---|---|---|
| フレームワーク | Angular v1（非推奨） | Vue.js 3（最新） |
| UIライブラリ | Angular Material | Vuetify 3 |
| レイアウト | Gridのみ | Grid, Fixed, Notebook, Tabs |
| マルチユーザー | 限定的 | 本格対応（msg._client） |
| テーマ | 単一テーマ | ページごとに異なるテーマ |
| 開発元 | コミュニティ | FlowFuse社（積極開発中） |
| パッケージ名 | node-red-dashboard | @flowfuse/node-red-dashboard |
⚠️ 重要な注意点:
- Dashboard 1.0は非推奨となり、今後の機能追加は予定されていません
- 新規プロジェクトではDashboard 2.0の使用を推奨します
- 1.0と2.0は併用可能ですが、将来的には2.0への移行を検討してください
🏗️ 2. Dashboard 2.0の階層構造
Dashboard 2.0を理解する上で最も重要なのが、Config Nodes（設定ノード）の階層構造です。
🏠
↓ 含む
📄
ui-page（ページ）
個別のページ。URL、レイアウト、テーマを設定
↓ 含む
📦
ui-group（グループ）
ウィジェットをまとめる箱。サイズと位置を設定
↓ 含む
🔧
Widget（ウィジェット）
実際のUI部品（ボタン、グラフ、スライダーなど）
Dashboard 2.0 の階層構造図
出典: @kazutxt - Node-RED Dashboard 2.0のチートシート - Qiita
💡 建物に例えると:
- ui-base = 建物全体（住所、入口の設定）
- ui-page = 各フロア（1階、2階...）
- ui-group = 各部屋（リビング、キッチン...）
- Widget = 家具・設備（テレビ、冷蔵庫...）
📊 階層の関係図
Dashboard 2.0 階層構造
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ui-base (/dashboard)
├── ui-theme (Default Theme)
│
├── ui-page (Home) ─────────────────┐
│ ├── ui-group (センサー) │
│ │ ├── ui-gauge (温度) │
│ │ └── ui-gauge (湿度) │
│ │ │
│ └── ui-group (コントロール) │
│ ├── ui-button (ON) │
│ └── ui-slider (明るさ) │
│ │
├── ui-page (Charts) ───────────────┤
│ └── ui-group (履歴データ) │
│ └── ui-chart (温度推移) │
│ │
└── ui-link (外部リンク) ────────────┘
⚙️ 3. Config Nodes（設定ノード）詳細
Dashboard 2.0の5つの設定ノードについて詳しく説明します。これらはパレットには表示されない「設定専用」のノードです。
🏠
ui-base
必須
ダッシュボード全体の基盤設定
役割: ダッシュボード全体のURL、ナビゲーションスタイル、ヘッダー表示を制御します。
主要プロパティ
| プロパティ | 説明 | デフォルト |
|---|---|---|
| Path | ダッシュボードのベースURL | /dashboard |
| App Icon | ブラウザタブやPWA用のアイコンURL | なし |
| Navigation Style | サイドバーの表示方法 | Collapsing |
| Title Bar Style | ヘッダーの表示方法 | Default |
サイドナビゲーションオプション
Collapsing（デフォルト）
開閉可能。閉じると完全に非表示
Fixed
常に表示。モバイルでは自動調整
Collapse to Icons
閉じてもアイコンは表示
Appear over Content
コンテンツの上にオーバーレイ
Always Hide
常に非表示（ui-controlで制御）
📄
ui-page
必須
個別ページの設定
役割: ダッシュボード内の個別ページを定義します。各ページは固有のURL、レイアウト、テーマを持てます。
主要プロパティ
| プロパティ | 説明 | デフォルト |
|---|---|---|
| UI | 所属するui-base | - |
| Name | ページ名（ナビゲーションに表示） | - |
| Path | ページのURL（/dashboard/xxx） | - |
| Icon | Material Design Icons名 | home |
| Theme | 適用するui-theme | Default |
| Layout | レイアウトタイプ | Grid |
| Visibility | ページの表示/非表示 | Visible |
| Interactivity | ページの有効/無効 | Active |
レイアウトオプション
Grid（デフォルト）
12カラムグリッド。レスポンシブ対応
Fixed
固定幅。画面サイズに関係なく一定
Notebook
最大1024px幅で中央配置。記事向け
Tabs
タブ切り替えでコンテンツ整理
ブレークポイント設定
| サイズ | ブレークポイント | カラム数 |
|---|---|---|
| Mobile | < 576px | 3 |
| Medium | ≥ 576px | 6 |
| Tablet | ≥ 768px | 9 |
| Desktop | ≥ 1024px | 12 |
📦
ui-group
必須
ウィジェットをまとめるグループ
役割: 複数のウィジェットをまとめる「箱」。視覚的にも機能的にも関連するウィジェットをグループ化します。
主要プロパティ
| プロパティ | 説明 | デフォルト |
|---|---|---|
| Page | 所属するui-page | - |
| Name | グループ名（ヘッダーに表示） | - |
| Type | Default / Dialog | Default |
| Width | グループの幅（カラム数） | 6 |
| Height | グループの高さ（最小値） | 1 |
| Class name | カスタムCSSクラス | なし |
| Visibility | グループの表示/非表示 | Visible |
| Interactivity | グループの有効/無効 | Active |
グループタイプ
Default
通常表示。ページ読み込み時から表示
Dialog
ダイアログ形式。ui-controlで表示を制御
🎨
ui-theme
オプション
カラー・スタイル設定
役割: ダッシュボードの見た目（カラースキーム、間隔、サイズ）を定義します。ページごとに異なるテーマを適用可能です。
カラープロパティ
| プロパティ | 説明 | 適用箇所 |
|---|---|---|
| Surface | サーフェスカラー | ヘッダー、サイドメニュー |
| Primary | プライマリカラー | ボタン、スライダー、フォーカス状態 |
| Pages Background | ページ背景色 | ページ全体の背景 |
| Groups Background | グループ背景色 | 各グループの背景 |
| Groups Outline | グループ枠線色 | グループの境界線 |
サイズプロパティ
| プロパティ | 説明 | デフォルト |
|---|---|---|
| Density | UIの密度（default / comfortable / compact） | default |
| Page Padding | ページ周囲の余白 | 12px |
| Group Gap | グループ間の間隔 | 12px |
| Group Border Radius | グループの角の丸み | 4px |
| Widget Gap | ウィジェット間の間隔 | 12px |
💡 Densityオプション:
- Default: 48px行高（通常使用）
- Comfortable: 36px行高（やや狭め）
- Compact: 32px行高（コンパクト表示）
🔗
ui-link
オプション
外部リンク設定
役割: サイドナビゲーションに外部リンクを追加します。ページと同様にナビゲーションに表示されますが、クリックすると指定したURLに遷移します。
主要プロパティ
| プロパティ | 説明 | 例 |
|---|---|---|
| UI | 所属するui-base | - |
| Name | リンク名（ナビゲーションに表示） | ドキュメント |
| Path | リンク先URL | https://nodered.org |
| Icon | Material Design Icons名 | open-in-new |
📦 4. インストール方法
パレットマネージャーからインストール（推奨）
- Node-REDエディタの右上メニューから「パレットの管理」を選択
- 「ノードを追加」タブに切り替え
- 検索欄に
@flowfuse/node-red-dashboardと入力 - 「ノードを追加」ボタンをクリック
⚠️ 注意: node-red-dashboard（1.0）と間違えないでください！
必ず @flowfuse/node-red-dashboard を選択してください。
npmからインストール
cd ~/.node-red
npm install @flowfuse/node-red-dashboard
🚀 5. 最初のダッシュボードを作成
演習: Hello Dashboardを作成初級
📝 目標:
ボタンをクリックすると「Hello Dashboard!」と表示される最初のダッシュボードを作成します。
🎯 完成イメージ:
→
text
📋 手順:
- ui-buttonノードを配置
- パレットの「dashboard」カテゴリから「button」をキャンバスにドラッグ
- ダブルクリックして設定を開く
- Groupで「Add new ui-group」を選択 → ペンアイコンをクリック
- ui-group設定で、Pageの「Add new ui-page」を選択 → ペンアイコンをクリック
- ui-page設定で、UIの「Add new ui-base」を選択 → ペンアイコンをクリック
- ui-base設定はデフォルトのまま「追加」
- ui-page設定もデフォルトのまま「追加」
- ui-group設定もデフォルトのまま「追加」
- ui-button設定でLabelを「クリック」に変更して「完了」
- ui-textノードを配置
- パレットから「text」をキャンバスにドラッグ
- ダブルクリックして設定を開く
- Groupは先ほど作成したグループを選択
- Labelを「メッセージ」に変更
- 「完了」をクリック
- ノードを接続
- ui-buttonの出力をui-textの入力に接続
- ボタンの出力を設定
- ui-buttonをダブルクリック
- Payloadを「String」に変更
- 値に「Hello Dashboard!」と入力
- 「完了」をクリック
- デプロイして確認
- 「デプロイ」ボタンをクリック
- ブラウザで
http://localhost:1880/dashboardにアクセス - ボタンをクリックして動作確認
📋 サンプルフロー（クリックで展開）
参照元：FlowFuse Dashboard Getting Started
[
{
"id": "hello-flow",
"type": "tab",
"label": "Hello Dashboard",
"disabled": false,
"info": ""
},
{
"id": "hello-button",
"type": "ui-button",
"z": "hello-flow",
"group": "hello-group",
"name": "クリックボタン",
"label": "クリック",
"order": 1,
"width": 0,
"height": 0,
"passthru": false,
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "Hello Dashboard!",
"payloadType": "str",
"topic": "",
"topicType": "str",
"x": 200,
"y": 100,
"wires": [["hello-text"]]
},
{
"id": "hello-text",
"type": "ui-text",
"z": "hello-flow",
"group": "hello-group",
"order": 2,
"width": 0,
"height": 0,
"name": "表示テキスト",
"label": "メッセージ",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 400,
"y": 100,
"wires": []
},
{
"id": "hello-group",
"type": "ui-group",
"name": "Welcome",
"page": "hello-page",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": true,
"disabled": false,
"groupType": "default"
},
{
"id": "hello-page",
"type": "ui-page",
"name": "Home",
"ui": "hello-base",
"path": "/home",
"icon": "home",
"layout": "grid",
"theme": "hello-theme",
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "hello-base",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showPageTitle": true,
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": false
},
{
"id": "hello-theme",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
}
]
📱 6. Dashboard 2.0サイドバー
Node-REDエディタには、Dashboard 2.0専用のサイドバーが追加されます。
💡 サイドバーの開き方:
- Node-REDエディタ右側の「Dashboard 2.0」タブをクリック
- または、メニュー → 表示 → サイドバー → Dashboard 2.0
サイドバーの機能
| タブ | 機能 |
|---|---|
| Layout | ページ、グループ、ウィジェットの構造を確認・並べ替え |
| Theme | テーマの一覧と編集 |
| Client Data | マルチユーザー対応の設定（msg._clientを受け入れるノードの選択） |
🎨 7. 利用可能なWidget一覧
Dashboard 2.0には以下のウィジェットが含まれています：
表示系Widget
入力系Widget
データ可視化Widget
上級Widget
🎓 8. まとめ
Dashboard 2.0の重要ポイント
- ✅ 階層構造: ui-base → ui-page → ui-group → Widget の順で設定
- ✅ 自動作成: 最初のWidgetを配置すると、Config Nodesが自動生成される
- ✅ サイドバー: Dashboard 2.0サイドバーでレイアウトを視覚的に管理
- ✅ テーマ: ページごとに異なるテーマを適用可能
- ✅ レイアウト: Grid, Fixed, Notebook, Tabsの4種類から選択
⚠️ よくある間違い
- パッケージの間違い:
@flowfuse/node-red-dashboard（2.0）とnode-red-dashboard（1.0）を混同 - Config Nodeの削除: ui-base, ui-page, ui-groupを削除するとWidgetが動作しなくなる
- グループ未選択: Widgetを配置する際、Groupを選択し忘れるとデプロイエラー
- URLの確認: デフォルトは
/dashboard（ui-baseのPath設定で変更可能）
📚 9. 次のステップ
📖 関連ガイド
各Widgetの詳細な使い方は、以下のガイドを参照してください：
- Widget詳細ガイド（表示系） - text, markdown, notification, audio
- Widget詳細ガイド（入力系） - button, switch, slider, dropdown など
- Widget詳細ガイド（データ系） - chart, gauge, progress, table
- Widget詳細ガイド（上級） - template, control, spacer
- Layout詳細ガイド - Grid, Fixed, Notebook, Tabsの詳細設定
🔗 10. 追加リソース
- FlowFuse Dashboard 公式ドキュメント
- Getting Started Guide
- Dashboard 1.0からの移行ガイド
- GitHub リポジトリ
- Material Design Icons（アイコン一覧）
このガイドが役に立ちましたら、実際のプロジェクトで練習してみてください！
Dashboard 2.0は、IoTダッシュボード開発の強力なツールです。
参照元：FlowFuse Dashboard 公式ドキュメント