”ダウンロード” ボタンをダッシュボードに追加する

Node-REDダッシュボードにダウンロードボタンを作ります。
これは、先行するフローの処理で生成・加工した任意のデータをダウンロードできるボタンです。

ダッシュボードに表示中のデータや、データストアから取得した何らかのデータを、ブラウザで気軽にダウンロードしたい場面で使えます。

完成図

また、このフローをenebular-editorでも実行して、データをダウンロードすることができます。便利です。

用意するもの

• enebular
  • プロジェクトが作成済みであること
  • node-red-dashboardのインストール
  • enebularからHerokuデプロイした状態のアプリまたはブラウザでフローを実行できる環境

手順

enebular

各ノードの実装どおりに実装します。

一番の要点は、ダウンロードしたいデータをmsg.payloadに渡すことです。

フローを作った後、ダッシュボードのページを開きます。

”ダウンロード”ボタンをクリックすると、JSONファイルをブラウザからダウンロードすることができました

フロー全体の実装

下記にフロー全体の実装を記載します。

[
    {
        "id": "e428e286.d7fe1",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "2f780a0.3fc0af6",
        "type": "http in",
        "z": "e428e286.d7fe1",
        "name": "",
        "url": "/download",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 120,
        "y": 80,
        "wires": [
            [
                "7613dde2.fd29f4"
            ]
        ]
    },
    {
        "id": "cbcb3d32.634f2",
        "type": "ui_template",
        "z": "e428e286.d7fe1",
        "group": "36d8cbaa.9ec0e4",
        "name": "ダウンロードボタン",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n<form method=\"get\" action=\"/download\">\n    <button type=\"submit\">ダウンロード</button>\n</form>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 120,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "7613dde2.fd29f4",
        "type": "function",
        "z": "e428e286.d7fe1",
        "name": "JSONをpayloadにセット",
        "func": "msg.payload = {\n    hoge: 1,\n    foo: 2\n}\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 290,
        "y": 140,
        "wires": [
            [
                "67714159.c3c2"
            ]
        ]
    },
    {
        "id": "67714159.c3c2",
        "type": "file",
        "z": "e428e286.d7fe1",
        "name": "/tmpディレクトリ以下に書き出し",
        "filename": "/tmp/tmp.json",
        "appendNewline": false,
        "createDir": true,
        "overwriteFile": "false",
        "encoding": "none",
        "x": 500,
        "y": 200,
        "wires": [
            [
                "743f75d0.a98dbc"
            ]
        ]
    },
    {
        "id": "743f75d0.a98dbc",
        "type": "http response",
        "z": "e428e286.d7fe1",
        "name": "レスポンスヘッダーをセット",
        "statusCode": "",
        "headers": {
            "content-type": "application/json",
            "Content-Disposition": "attachment"
        },
        "x": 620,
        "y": 260,
        "wires": []
    },
    {
        "id": "36d8cbaa.9ec0e4",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "f436e0bd.16842",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "f436e0bd.16842",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 1
    }
]

各ノードの実装

下記に各ノードの実装を記載します。

ダウンロードボタン

node-red-dashboard のtemplateノードを使います。

<div ng-bind-html="msg.payload"></div>
<form method="get" action="/download">
    <button type="submit">ダウンロード</button>
</form>

http inノード

ダミーのJSONをpayloadにセット

// functionノード

msg.payload = {
    hoge: 1,
    foo: 2
}

return msg;

fileノード

http responseノード

• Content-Type: application/json

• Content-Disposition: attachment