🎛️ Node-RED Dashboard 2.0 実践ガイド【応用編】
第2部 control & spacer

この資料では、Dashboard 2.0のプログラムによるダッシュボード制御とレイアウト調整を学びます。

🚀 まずサンプルフローをインポートしましょう！

以下のサンプルフローには、control と spacer の実例が含まれています。
先にインポートして動作を確認しながら、以降の説明を読むと理解が深まります。

1. 下のサンプルフローJSONをコピー
2. Node-REDエディタで メニュー → 読み込み を選択
3. JSONをペーストして「読み込み」をクリック
4. デプロイしてダッシュボードで動作確認

📁 control & spacer サンプルフロー（クリックで展開）

参照元：FlowFuse Dashboard 2.0 公式ドキュメント

[ { "id": "control_sample_tab", "type": "tab", "label": "ui-control & ui-spacer サンプル", "disabled": false, "info": "Dashboard 2.0 ui-controlとui-spacerのサンプル" }, { "id": "comment_navigation", "type": "comment", "z": "control_sample_tab", "name": "━━━ 🧭 ページナビゲーション ━━━", "info": "", "x": 200, "y": 40, "wires": [] }, { "id": "btn_go_settings", "type": "ui-button", "z": "control_sample_tab", "group": "control_group_nav", "name": "設定ページへ", "label": "⚙️ 設定ページへ", "order": 1, "width": 0, "height": 0, "passthru": false, "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "{\"page\":\"Part2 設定\"}", "payloadType": "json", "topic": "navigation", "x": 160, "y": 100, "wires": [ [ "ui_control_main" ] ] }, { "id": "btn_go_home", "type": "ui-button", "z": "control_sample_tab", "group": "control_group_settings_nav", "name": "ホームへ", "label": "🏠 デモページへ戻る", "order": 1, "width": 0, "height": 0, "passthru": false, "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "{\"page\":\"Part2 デモ\"}", "payloadType": "json", "topic": "navigation", "x": 150, "y": 160, "wires": [ [ "ui_control_main" ] ] }, { "id": "ui_control_main", "type": "ui-control", "z": "control_sample_tab", "name": "メインコントロール", "ui": "control_ui_base", "events": "all", "x": 400, "y": 130, "wires": [ [ "func_log_connection" ] ] }, { "id": "comment_visibility", "type": "comment", "z": "control_sample_tab", "name": "━━━ 👁️ グループ表示/非表示 ━━━", "info": "", "x": 210, "y": 240, "wires": [] }, { "id": "switch_admin_mode", "type": "ui-switch", "z": "control_sample_tab", "group": "control_group_visibility", "name": "管理者モード", "label": "🔐 管理者モード", "order": 1, "width": 0, "height": 0, "passthru": true, "decouple": false, "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "className": "", "x": 160, "y": 300, "wires": [ [ "func_toggle_admin" ] ] }, { "id": "func_toggle_admin", "type": "function", "z": "control_sample_tab", "name": "表示切替メッセージ作成", "func": "if (msg.payload === true) {\n msg.payload = {\n \"groups\": {\n \"show\": [\"Part2 デモ:管理者パネル\"],\n \"hide\": [\"Part2 デモ:ゲストパネル\"]\n }\n };\n} else {\n msg.payload = {\n \"groups\": {\n \"show\": [\"Part2 デモ:ゲストパネル\"],\n \"hide\": [\"Part2 デモ:管理者パネル\"]\n }\n };\n}\nreturn msg;", "outputs": 1, "timeout": "", "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 390, "y": 300, "wires": [ [ "ui_control_visibility", "debug_visibility" ] ] }, { "id": "debug_visibility", "type": "debug", "z": "control_sample_tab", "name": "表示制御メッセージ", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 630, "y": 260, "wires": [] }, { "id": "ui_control_visibility", "type": "ui-control", "z": "control_sample_tab", "name": "表示制御", "ui": "control_ui_base", "events": "all", "x": 600, "y": 300, "wires": [ [] ] }, { "id": "comment_enable", "type": "comment", "z": "control_sample_tab", "name": "━━━ 🔒 グループ有効/無効 ━━━", "info": "", "x": 200, "y": 400, "wires": [] }, { "id": "switch_maintenance", "type": "ui-switch", "z": "control_sample_tab", "group": "control_group_visibility", "name": "メンテナンスモード", "label": "🔧 メンテナンスモード", "order": 2, "width": 0, "height": 0, "passthru": true, "decouple": false, "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "className": "", "x": 170, "y": 460, "wires": [ [ "func_toggle_maintenance" ] ] }, { "id": "func_toggle_maintenance", "type": "function", "z": "control_sample_tab", "name": "有効/無効メッセージ作成", "func": "if (msg.payload === true) {\n msg.payload = {\n \"groups\": {\n \"disable\": [\"Part2 設定:システム設定\"]\n }\n };\n} else {\n msg.payload = {\n \"groups\": {\n \"enable\": [\"Part2 設定:システム設定\"]\n }\n };\n}\nreturn msg;", "outputs": 1, "timeout": "", "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 390, "y": 460, "wires": [ [ "ui_control_enable", "debug_enable" ] ] }, { "id": "debug_enable", "type": "debug", "z": "control_sample_tab", "name": "有効/無効メッセージ", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 630, "y": 420, "wires": [] }, { "id": "ui_control_enable", "type": "ui-control", "z": "control_sample_tab", "name": "有効/無効制御", "ui": "control_ui_base", "events": "all", "x": 610, "y": 460, "wires": [ [] ] }, { "id": "comment_spacer", "type": "comment", "z": "control_sample_tab", "name": "━━━ 📐 ui-spacer レイアウト ━━━", "info": "", "x": 200, "y": 560, "wires": [] }, { "id": "btn_left", "type": "ui-button", "z": "control_sample_tab", "group": "control_group_spacer", "name": "左ボタン", "label": "⬅️ 左", "order": 1, "width": 2, "height": 0, "passthru": false, "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "left", "payloadType": "str", "topic": "", "x": 150, "y": 620, "wires": [ [ "debug_spacer" ] ] }, { "id": "spacer_middle", "type": "ui-spacer", "z": "control_sample_tab", "group": "control_group_spacer", "name": "中央スペース", "order": 2, "width": 2, "height": 1, "className": "" }, { "id": "btn_right", "type": "ui-button", "z": "control_sample_tab", "group": "control_group_spacer", "name": "右ボタン", "label": "➡️ 右", "order": 3, "width": 2, "height": 0, "passthru": false, "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "right", "payloadType": "str", "topic": "", "x": 150, "y": 680, "wires": [ [ "debug_spacer" ] ] }, { "id": "debug_spacer", "type": "debug", "z": "control_sample_tab", "name": "ボタン出力", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 350, "y": 650, "wires": [] }, { "id": "comment_connection", "type": "comment", "z": "control_sample_tab", "name": "━━━ 📡 接続監視 ━━━", "info": "", "x": 180, "y": 760, "wires": [] }, { "id": "func_log_connection", "type": "function", "z": "control_sample_tab", "name": "接続ログ作成", "func": "if (msg.payload && msg.payload.connections) {\n const count = msg.payload.connections.length;\n node.status({fill: \"green\", shape: \"dot\", text: `接続数: ${count}`});\n \n msg.payload = {\n timestamp: new Date().toLocaleString('ja-JP'),\n event: \"connection_update\",\n connections: count,\n clients: msg.payload.connections\n };\n return msg;\n}\nreturn null;", "outputs": 1, "timeout": "", "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 620, "y": 130, "wires": [ [ "debug_connection", "template_connection_status" ] ] }, { "id": "debug_connection", "type": "debug", "z": "control_sample_tab", "name": "接続ログ", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 820, "y": 100, "wires": [] }, { "id": "template_connection_status", "type": "ui-template", "z": "control_sample_tab", "group": "control_group_connection", "page": "", "ui": "", "name": "接続状態表示", "order": 1, "width": 0, "height": 0, "format": "<template>\n <v-card color=\"blue-lighten-4\" class=\"pa-3\">\n <div class=\"text-h6 mb-2\">\n <v-icon color=\"blue\">mdi-lan-connect</v-icon>\n 接続状態\n </div>\n <div class=\"text-h4 text-center my-3\">\n {{ connectionCount }} クライアント\n </div>\n <div class=\"text-caption text-center\">\n 最終更新: {{ lastUpdate }}\n </div>\n </v-card>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n connectionCount: 0,\n lastUpdate: '---'\n };\n },\n watch: {\n msg(newMsg) {\n if (newMsg && newMsg.payload) {\n this.connectionCount = newMsg.payload.connections || 0;\n this.lastUpdate = newMsg.payload.timestamp || new Date().toLocaleString('ja-JP');\n }\n }\n }\n}\n</script>", "passthru": true, "templateScope": "local", "className": "", "x": 850, "y": 160, "wires": [ [] ] }, { "id": "inject_test_connection", "type": "inject", "z": "control_sample_tab", "name": "接続テスト", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{\"connections\":[{\"socketId\":\"test123\",\"socketIp\":\"192.168.1.100\"}]}", "payloadType": "json", "x": 170, "y": 820, "wires": [ [ "func_log_connection" ] ] }, { "id": "control_group_nav", "type": "ui-group", "name": "ナビゲーション", "page": "control_page_home", "width": "6", "height": "-1", "order": 1, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_visibility", "type": "ui-group", "name": "表示制御", "page": "control_page_home", "width": "6", "height": "-1", "order": 2, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_admin", "type": "ui-group", "name": "管理者パネル", "page": "control_page_home", "width": "6", "height": "-1", "order": 3, "showTitle": true, "groupType": "default", "className": "", "visible": false, "disabled": false }, { "id": "control_group_guest", "type": "ui-group", "name": "ゲストパネル", "page": "control_page_home", "width": "6", "height": "-1", "order": 4, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_spacer", "type": "ui-group", "name": "レイアウトサンプル", "page": "control_page_home", "width": "6", "height": "-1", "order": 5, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_connection", "type": "ui-group", "name": "接続状態", "page": "control_page_home", "width": "6", "height": "-1", "order": 6, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_settings_nav", "type": "ui-group", "name": "ナビゲーション", "page": "control_page_settings", "width": "6", "height": "-1", "order": 1, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "control_group_settings", "type": "ui-group", "name": "システム設定", "page": "control_page_settings", "width": "6", "height": "-1", "order": 2, "showTitle": true, "groupType": "default", "className": "", "visible": true, "disabled": false }, { "id": "template_admin_panel", "type": "ui-template", "z": "control_sample_tab", "group": "control_group_admin", "page": "", "ui": "", "name": "管理者パネル内容", "order": 1, "width": 0, "height": 0, "format": "<template>\n <v-card color=\"red-lighten-4\" class=\"pa-4\">\n <v-card-title class=\"text-h6\">\n <v-icon color=\"red\" class=\"mr-2\">mdi-shield-account</v-icon>\n 管理者専用エリア\n </v-card-title>\n <v-card-text>\n <v-alert type=\"warning\" variant=\"tonal\" class=\"mb-3\">\n このエリアは管理者のみ表示されます\n </v-alert>\n <v-list density=\"compact\">\n <v-list-item prepend-icon=\"mdi-database\">データベース管理</v-list-item>\n <v-list-item prepend-icon=\"mdi-account-group\">ユーザー管理</v-list-item>\n <v-list-item prepend-icon=\"mdi-cog\">システム設定</v-list-item>\n </v-list>\n </v-card-text>\n </v-card>\n</template>\n\n<script>\nexport default {\n data() {\n return {};\n }\n}\n</script>", "passthru": true, "templateScope": "local", "className": "", "x": 180, "y": 880, "wires": [ [] ] }, { "id": "template_guest_panel", "type": "ui-template", "z": "control_sample_tab", "group": "control_group_guest", "page": "", "ui": "", "name": "ゲストパネル内容", "order": 1, "width": 0, "height": 0, "format": "<template>\n <v-card color=\"blue-lighten-4\" class=\"pa-4\">\n <v-card-title class=\"text-h6\">\n <v-icon color=\"blue\" class=\"mr-2\">mdi-account</v-icon>\n ゲストエリア\n </v-card-title>\n <v-card-text>\n <v-alert type=\"info\" variant=\"tonal\" class=\"mb-3\">\n ようこそ！管理者モードをONにすると追加機能が使えます\n </v-alert>\n <p>現在、閲覧モードです。</p>\n <v-chip color=\"blue\" class=\"mt-2\">\n <v-icon start>mdi-eye</v-icon>\n 閲覧のみ\n </v-chip>\n </v-card-text>\n </v-card>\n</template>\n\n<script>\nexport default {\n data() {\n return {};\n }\n}\n</script>", "passthru": true, "templateScope": "local", "className": "", "x": 180, "y": 940, "wires": [ [] ] }, { "id": "slider_brightness", "type": "ui-slider", "z": "control_sample_tab", "group": "control_group_settings", "name": "明るさ", "label": "🔆 明るさ", "order": 1, "width": 0, "height": 0, "passthru": true, "outs": "all", "topic": "brightness", "min": 0, "max": 100, "step": 1, "className": "", "x": 160, "y": 1000, "wires": [ [ "debug_settings" ] ] }, { "id": "slider_volume", "type": "ui-slider", "z": "control_sample_tab", "group": "control_group_settings", "name": "音量", "label": "🔊 音量", "order": 2, "width": 0, "height": 0, "passthru": true, "outs": "all", "topic": "volume", "min": 0, "max": 100, "step": 1, "className": "", "x": 150, "y": 1060, "wires": [ [ "debug_settings" ] ] }, { "id": "dropdown_language", "type": "ui-dropdown", "z": "control_sample_tab", "group": "control_group_settings", "name": "言語選択", "label": "🌐 言語", "order": 3, "width": 0, "height": 0, "passthru": true, "multiple": false, "options": [ { "label": "日本語", "value": "ja" }, { "label": "English", "value": "en" }, { "label": "中文", "value": "zh" } ], "topic": "language", "className": "", "x": 160, "y": 1120, "wires": [ [ "debug_settings" ] ] }, { "id": "switch_notifications", "type": "ui-switch", "z": "control_sample_tab", "group": "control_group_settings", "name": "通知設定", "label": "🔔 通知を有効にする", "order": 4, "width": 0, "height": 0, "passthru": true, "decouple": false, "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "className": "", "x": 170, "y": 1180, "wires": [ [ "debug_settings" ] ] }, { "id": "btn_save_settings", "type": "ui-button", "z": "control_sample_tab", "group": "control_group_settings", "name": "保存ボタン", "label": "💾 設定を保存", "order": 5, "width": 0, "height": 0, "passthru": false, "color": "", "bgcolor": "#4caf50", "className": "", "icon": "", "payload": "settings_saved", "payloadType": "str", "topic": "save", "x": 170, "y": 1240, "wires": [ [ "debug_settings" ] ] }, { "id": "debug_settings", "type": "debug", "z": "control_sample_tab", "name": "設定出力", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 370, "y": 1120, "wires": [] }, { "id": "control_page_home", "type": "ui-page", "name": "Part2 デモ", "ui": "control_ui_base", "path": "/control-home", "icon": "home", "layout": "grid", "theme": "control_ui_theme", "breakpoints": [ { "name": "Default", "px": 0, "cols": 3 }, { "name": "Tablet", "px": 576, "cols": 6 }, { "name": "Desktop", "px": 1024, "cols": 12 } ], "order": 1, "className": "", "visible": "true", "disabled": "false" }, { "id": "control_page_settings", "type": "ui-page", "name": "Part2 設定", "ui": "control_ui_base", "path": "/control-settings", "icon": "cog", "layout": "grid", "theme": "control_ui_theme", "breakpoints": [ { "name": "Default", "px": 0, "cols": 3 }, { "name": "Tablet", "px": 576, "cols": 6 }, { "name": "Desktop", "px": 1024, "cols": 12 } ], "order": 2, "className": "", "visible": "true", "disabled": "false" }, { "id": "control_ui_base", "type": "ui-base", "name": "Part2 ui-control デモ", "path": "/dashboard", "appIcon": "", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": false, "headerContent": "page", "navigationStyle": "default", "titleBarStyle": "default", "showReconnectNotification": false, "notificationDisplayTime": 3000, "showDisconnectNotification": false, "allowInstall": false }, { "id": "control_ui_theme", "type": "ui-theme", "name": "Control Theme", "colors": { "surface": "#ffffff", "primary": "#2196f3", "bgPage": "#f5f5f5", "groupBg": "#ffffff", "groupOutline": "#e0e0e0" }, "sizes": { "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "8px", "widgetGap": "12px", "density": "default" } } ]

🎮 control ノード

概要

controlは、プログラムからダッシュボードを制御するためのノードです。ページ遷移、グループの表示/非表示、クライアント接続の監視などが可能です。

ノード設定プロパティ

プロパティ	説明	デフォルト
Name	ノードの名前	空
UI	対象のUI Base	-（必須）
Output	監視するイベント種別（all/connect/disconnect等）	all

主な機能

機能	説明	msg.payload
ページ遷移	指定したページに移動	{ "page": "ページ名" }
グループ表示/非表示	特定グループの可視性を制御	{ "groups": { "show": [...], "hide": [...] } }
グループ有効/無効	グループ内ウィジェットの操作可否	{ "groups": { "enable": [...], "disable": [...] } }
接続監視	クライアントの接続/切断を検知	出力: { "connections": [...] }

グループ指定の形式

グループを指定する際は、以下の形式を使用します：

パターン1: ページ遷移

用途: ボタンクリックや条件に応じて別のページに移動

サンプルフロー: 「🧭 ナビゲーション」グループのボタンで確認できます

パターン2: グループの表示/非表示

用途: ユーザー権限や状態に応じてUIを動的に変更

サンプルフロー: 「👁️ 表示制御」の管理者モードスイッチで確認できます

パターン3: グループの有効/無効

用途: 特定の条件下でウィジェットの操作を禁止

サンプルフロー: 「🔧 メンテナンスモード」スイッチで確認できます（設定ページの項目が無効化）

パターン4: 接続監視（出力）

controlの出力からは、クライアントの接続情報が取得できます。

サンプルフロー: 「📡 接続状態」グループにリアルタイムで接続数が表示されます

パターン5: 特定クライアントへの送信

msg._clientを使用して、特定のクライアントにのみメッセージを送信できます。

📐 spacer ノード

概要

spacerは、ダッシュボードのグリッドレイアウトで空白スペースを確保するためのノードです。ウィジェットの配置を調整し、見やすいレイアウトを実現します。

サンプルフロー: 「📐 レイアウトサンプル」グループで、左右に分かれたボタン配置を確認できます

設定プロパティ

プロパティ	説明	値の例
Group	配置するグループ	-
Name	ノードの名前	spacer
Width	幅（グリッド単位）	1, 2, 3, 6...
Height	高さ（グリッド単位）	1, 2, 3...
Order	グループ内の表示順序	0
Class	CSSクラス名	空

使用例1: 水平方向の余白

ボタンとボタンの間にスペースを入れる

使用例2: グリッド位置調整

6カラムグリッドでウィジェットを右寄せ

📝 実践演習

演習1: ページ遷移ボタンの作成

目標: 新しいページを作成し、ナビゲーションボタンを追加する

1. 新しいページ「レポート」を作成
2. ホームに「レポートへ」ボタンを追加
3. functionノードで {"page": "レポート"} を設定
4. ui-controlに接続

演習2: 条件付き表示制御

目標: センサー値に応じてアラートパネルを表示/非表示

1. 「アラートパネル」グループを作成（初期は非表示）
2. functionノードで閾値判定を実装
3. 値が閾値を超えたらshow、下回ったらhide

演習3: レイアウト調整

目標: 3つのボタンを等間隔に配置

💡 Tips & ベストプラクティス

control

• ✅ ページ名・グループ名は正確に一致させる（絵文字も含む）
• ✅ 接続監視を使ってアクセスログを取得
• ✅ msg._clientで特定ユーザーのみに制御を適用
• ⚠️ 頻繁なページ遷移はUXを損なう可能性あり

spacer

• ✅ グリッドの総カラム数を意識して配置
• ✅ 視覚的なグループ分けに活用
• ✅ レスポンシブを考慮した相対幅を使用
• ⚠️ 過度な使用は管理の複雑化を招く

デバッグのコツ

• 🔍 ui-controlの入力にdebugノードを接続して送信メッセージを確認
• 🔍 ui-controlの出力で接続状態を監視
• 🔍 ページ名・グループ名が正しいかダッシュボード設定を確認

🔗 参考リンク

• control 公式ドキュメント
• spacer 公式ドキュメント
• Dashboard 2.0 Getting Started