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

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. 右上にある「三」のボタンをクリックしてメニューを開き、「パレットの管理」をクリックします。

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

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

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

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

Node-REDではfunctionノードでNode.jsの様々なモジュールを利用することができます。
Node.jsは、JavaScript言語の実行環境の1つです。

1. fsモジュールをインストールします。
   Windowsは、コマンドプロンプトを管理者で実行、Raspberry PiなどのLinux系は、ターミナルを実行し、次のコマンドを入力します。

Windows

> npm install fs

Linux

$ cd ~/.node-red
$ npm install fs

2. 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'),
},

3. Node-REDを再起動します。

ノードの設定

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

slack-web-outノードは、Slackアプリの機能を利用して、Slack Web APIを実行するノードです。TokenにSlackで取得したトークンを設定します。

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

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

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

5. 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;

functionノードでSlackへ画像を投稿する設定をします。

• msg.topic: Slack Web APIを指定します。「files.upload」はファイルをアップロードするAPIです。
• msg.payload: 画像を投稿するパラメータを指定します。
  • channels: チャンネル名
  • initial_comment: メッセージの文字列
  • filename: ファイル名
  • file: 画像ファイルのストリーム
  • filetype: 「auto」に設定すると、Slackでファイルの種類を自動認識する

6. 「完了」ボタンをクリックします。
7. 「デプロイ」ボタンをクリックします。

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

作成したフローの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のロゴ画像が投稿されます。