Vue + Vuetify でできた Node-RED Dashboard 2.0 で自作 UI が作れる template ノードが ChatGPT のコード生成でやりやすかったメモ

Posted on 2025-03-11

Vue + Vuetify でできた Node-RED Dashboard 2.0 で自作 UI が作れる template ノードが ChatGPT のコード生成でやりやすかったメモです。

背景

node-red-dashboard (node) - Node-RED

Node-RED Dashboard 2.0 が Vue + Vuetify でできていてモダンで作りやすいので最近導入しはじめていろいろできるようになってきました。

その中で ChatGPT にある程度ルールを決めて聞いてみると最近の開発ナレッジの多い Vue や Vuetify に則りつつ、イイ感じに UI に関するコードを出してくれるので、その流れをメモしておきます。

@flowfuse/node-red-dashboard

Node-RED のノード追加画面で @flowfuse/node-red-dashboard を入れてインストールしておきます。

このように入ります Dashbord 1.0 と名称が区別されているので、分かりやすいです。ノード自体の名称は同じなものは多いですが。

ノードの配置

inject ノードと template ノードを配置してデプロイしておきます。

プロンプトの元となる仕様を template ノードのサンプルページからコピーしておく

Node-RED Dashboard 2.0 としての Vue + Vuetify の仕様を伝えるために template ノードのサンプルページからからコピーしておきます。

Template ui-template | Node-RED Dashboard 2.0

こちらです。

これを全文コピーします。スタートから。

Example (Raw JavaScript) あたりまで入れておくと、だいたいの使用方法が書かれていますので、伝わりやすいです。

ChatGPT に聞いてみる

今回は ChatGPT 4o に聞いてみます。

これから Vue + Vuetify でできている Node-RED Dashboard 2.0 で自由に UI が作れる template ノードの相談をするので仕様をお待ちください。

こんなスタートで待ってもらいます。

さきほどのコピーした仕様の全文をペーストして

「このような仕様がヘルプページに書かれています。」とつなげて、

msg.payload から値が文字列で来たら、これを Vuetify のテキスト入力で表示してもらえますか。

と書いてお願いしてみます。

無事コードが出てきました！

template ノードに反映

では右上でコピーして、

template ノードに入れて完了します。

inject ノードの内容を変更します。

このようにノードレッドという文字列を出力するようにします。

今回は以下のようなコードでした。

<template>
  <v-container>
    <v-text-field 
      label="入力フィールド" 
      v-model="textValue"
    ></v-text-field>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      textValue: ""  // 初期値
    };
  },
  watch: {
    msg(newMsg) {
      // msg.payload が文字列なら textValue にセット
      if (typeof newMsg.payload === "string") {
        this.textValue = newMsg.payload;
      }
    }
  }
};
</script>

<style>
/* 必要なら追加のスタイルを記述 */
</style>