Slackからデジタルサイネージにメッセージを表示する

By / 2023年3月14日

前回の記事では、LEDマトリックスモジュールを使ってテキストの表示を行いました。制御用のコントローラに載っているESP8266はWiFiを使ってネットワークに接続することが可能です。そこで今回はチャットサービスのSlackと連携させて任意のメッセージをサイネージに表示させるデモを全2回に分けて説明していきます。初回はSlackのスラッシュコマンドとWEBサーバを実装します。

概要

Slack側ではスラッシュコマンドを使って連携機能を作成していきます。スラッシュコマンドは特定の操作をフックにPOSTリクエストを送信しますが、ESP8266でそれを直接受け取ることは難しいため、WEBサーバーを用意してメッセージの保存・取得をできるように設定します。実装の概観としては下図の通りです。

スラッシュコマンドの新規作成

スラッシュコマンドの設定方法はこちらの記事では割愛します。公式ドキュメントや他の記事に詳しい解説がのっているのでそちらをご覧ください。

WEBサーバーの用意

次にWEBサーバーを用意します。必要となるのは下記の２つのエンドポイントです。
  • SlackからのPOSTリクエストを受け付け、textを保存する
  • ESP8266からのGETリクエストを受け付け、textを返す
ターミナルを開いて新しいディレクトリを作成し、Node.jsプロジェクトの準備をします。 
mkdir path/to/your/project
npm init
npm install --save express body-parser
サーバー側の全体像です。正しいSlackチームからPOSTリクエストを受け取るとメッセージを格納してSuccessfuly set the message!を返します。返したメッセージはSlack側で表示されます。 
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
let data = {};
let validationToken = '';
app.use(bodyParser.urlencoded({extended: true}));
app.get('/text', function(req, res) {
    res.send(data);
    res.end();
});
app.post('/text', function(req, res) {
    console.log(req.body);
    if (req.body.token === validationToken) {
        data['text'] = req.body.text;
        res.json({ text: 'Successfuly set the message!' });
    } else {
        res.status(403).end()
    }
});
const port = process.env.PORT || 3000;
app.listen(`Server started on the port: ${port}`);
スラッシュコマンドの設定でPOST先のURLをあらかじめ指定しておく必要があります。しかし、サーバーにデプロイする前にローカル開発環境で動作確認を済ませたいところです。そこで、ngrokを使って一時的なドメインを設定します。こちらのページから入手できます。今回の用途であれば無料プランの範囲内で十分に利用可能です。 はじめに、WEBサーバーを起動します。 
node app.js
こちらのサーバーはhttp://localhost:3000/で動作します。その場合、次のコマンドでngrokを起動します。新しいターミナルを開いて実行してください。 
ngrok http 3000
下記のような出力が得られるので、Forwardingに割り当てられたIPアドレスをスラッシュコマンドのRequest URLとしてローカルで開発している間利用します。 
ngrok by @inconshreveable
(Ctrl+C to quit)
Session Status                online
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http:// -> localhost:3000
Forwarding                    https:// -> localhost:3000
Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
設定後、Slackから実際にスラッシュコマンドを実行してリクエストが行われていることを確認します。ターミナルからの出力とSlackに下図のメッセージが確認できれば成功です。 一通りの作業を終えたら、WEBサーバーとしてデプロイし、取得したURLをスラッシュコマンドのリクエスト先として割り当てます。いくつかある既存のPaaSサービスを使うととても手軽に作成できます。私たちの場合は、Azure App Serviceを使用しました。

次回

今回はここまでとなります。次回はESP8266を使ってHTTPリクエストの処理とJSONのパース処理を実装し、サーバーから受け取ったメッセージを実際にLEDマトリックスモジュールに反映するまでの手順を紹介していきます。XSHELLに関する最新情報は@xshell_incで確認できますので、ぜひフォローしてください。]]>

上部へスクロール