Zenn
📸

Node-REDでSlackへ画像を投稿する

2022/07/19に公開
Slack
Node-RED
tech

Node-REDの「slack-web-api」ノードを利用して、Slackへ画像を投稿する方法について説明します。

Slackの準備

Slackの準備は、以下の記事を参考にしてください。
https://zenn.dev/dsl_gunma/articles/9fc4e58783d7da

今回は、ワークスペース「Node-RED開発」のチャンネル「node-red_alert」に画像を投稿します。

Node-REDによるフローの作成

Node-REDで、Slackへ画像を投稿するためのフローを作成します。
Node-REDのインストール方法は、以下のページを参考にしてください。
https://nodered.jp/docs/getting-started/local

node-red-contrib-slackのインストール

  1. Node-REDをWebブラウザで開きます。
  2. 右上にある「三」のボタンをクリックしてメニューを開き、「パレットの管理」をクリックします。

  1. 「ノードの追加」タブを選択して、検索のテキストボックスに「slack」と入力します。
    検索されたノードから「node-red-contrib-slack」の「ノードを追加」ボタンをクリックします。

  1. パレットの「ソーシャル」グループにslackのノードが4つ追加されます。

モジュールのインストールと設定

Slackへ画像を投稿するには、画像をStreamオブジェクトで読み込みます。
そのため、Node.jsのfsモジュール（ファイルストリームモジュール）をインストールして、functionノードで利用できるように設定します。

  1. fsモジュールをインストールします。
    Windowsは、コマンドプロンプトを管理者で実行、Raspberry PiなどのLinux系は、ターミナルを実行し、次のコマンドを入力します。
Windows
> npm install fs
Linux
$ cd ~/.node-red
$ npm install fs
  1. settings.jsファイルを編集します。fsライブラリが利用できるように、次の一行を追加します。ファイルの場所は以下のとおりです。
    • Windowsの場合: C:\Users\ユーザー名\.node-red\settings.js
    • Linux系の場合: $HOME/.node-red/settings.js
settings.js
functionGlobalContext: {
+   fs:require('fs'),
    // os:require('os'),
},
  1. Node-REDを再起動します。

ノードの設定

  1. Node-REDのワークスペースに以下のノードを追加し、図のように配置します。
    • injectノード
    • functionノード
    • slack-web-outノード
    • debugノード

  1. slack-web-outノードをダブルクリックして、「新規にslack-configを追加」をクリックします。

  1. TokenにコピーしたSlackアプリのトークンを貼り付け、「追加」ボタンをクリックします。

  1. 「完了」ボタンをクリックします。

  1. functionノードをダブルクリックして、以下のコードを入力します。

functionノード
const fs = global.get('fs');  // fsモジュールを参照
const filepath = "D:\\logo\\node-red-icon-2.png";  // 画像ファイルの絶対パス

msg.topic = "files.upload";
msg.payload = {
    "channels": "node-red_alert",
    "initial_comment": "画像です。",
    "filename": filepath,
    "file": fs.createReadStream(filepath),  // 画像ファイルのStreamオブジェクトを生成
    "filetype": "auto"
};

return msg;
  1. 「完了」ボタンをクリックします。
  2. 「デプロイ」ボタンをクリックします。

  1. 完成したフローです。

作成したフローのJSONを以下に貼っておきます。
Node-REDのメニューから「読み出し」->「クリップボード」で配置することができます。
slack-web-outノードのTokenは再設定してください。

[{"id":"89715b10fedea598","type":"inject","z":"4d5dad1573c7a3cc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":380,"wires":[["9a70ab4539ca01db"]]},{"id":"3cd95beaceb80f5a","type":"debug","z":"4d5dad1573c7a3cc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":380,"wires":[]},{"id":"9a70ab4539ca01db","type":"function","z":"4d5dad1573c7a3cc","name":"","func":"const fs = global.get('fs');\nconst filepath = \"D:\\\\logo\\\\node-red-icon-2.png\";\n\nmsg.topic = \"files.upload\";\nmsg.payload = {\n    \"channels\": \"node-red_alert\",\n    \"initial_comment\": \"画像です。\",\n    \"filename\": filepath,\n    \"file\": fs.createReadStream(filepath),\n    \"filetype\": \"auto\"\n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":380,"wires":[["b91ec27e6f80e7de"]]},{"id":"b91ec27e6f80e7de","type":"slack-web-out","z":"4d5dad1573c7a3cc","client":"6ae2c9c9875bddff","name":"","x":500,"y":380,"wires":[["3cd95beaceb80f5a"]]},{"id":"6ae2c9c9875bddff","type":"slack-config","name":""}]

動作確認

injectノードの左側のボタンをクリックすると、Slackのチャンネル「node-red_alert」へNode-REDのロゴ画像が投稿されます。

Discussion