LINE+Electronで自作CommentScreen

はじめに

会社の勉強会での発表時にCommentScreenのアンケート機能を使おうとしたところ、
無料プランだとアンケートが1Roomにつき1つしか作れないと初めて知り、
なら自作してしまえ！とLINEを使って作ってみました。

LINE

LINE側については、単純に受信したメッセージをWebsockで横流しするだけなので、
LINEBot作成経験ある人であれば5分もあれば余裕なレベルですね。

main.js

const plotlib = require('nodeplotlib');
const line = require('@line/bot-sdk');
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const PORT = process.env.PORT || 3000;
const bodyParser = require('body-parser');
const message_function = require('./message.js');
app.use(bodyParser.json());
let _good = 0;
let _bad = 0;

// Line設定値
const config = {
    channelSecret: 'xxxxxxxxxxxxxxxxxxx',
    channelAccessToken: 'xxxxxxxxxxxxxxxxxxx'
};
const lineApiClient = new line.Client(config);

io.on('connection', function (socket) {
    console.log('接続確認');
});

// 動作確認用Get
app.get('/test', (req, res) => res.send('Hello World!(GET)'));

// WebhookFromLine
app.post('/msg', function (req, res) {
    console.log(req.body.events);

    if (req.body.events[0].type === 'message') {
        const { type, text } = req.body.events[0].message;
        if (type === 'text'){
            if (text === 'アンケート'){
                lineApiClient.broadcast(message_function.questionary());
            } else if (text === '好きに投票') {
                _good++;
            } else if (text === '嫌いに投票') {
                _bad++;
            } else if (text === '集計') {
                Totalization()
            } else {
                io.emit('msg', text);
            }
        }
    }
    res.status(200).json(req.body);
});

// アンケート集計
function Totalization() {
    const data  = [
        {
            type: "pie",
            values: [_good, _bad],
            labels: ["好き","嫌い"],
            textinfo: "label",
        },
    ];
    plotlib.plot(data);
}

http.listen(PORT, function () {
    console.log('server listening. Port:' + PORT);
});

アンケート機能

Flex Messageでの回答フォームとNodePlotLibで集計結果を表示させるようにしました。
今回はとりあえずでtextの特定文言で発火するようにしましたが、発表者用リッチメニューを用意しておくと使い勝手が良さそうです。

Electron

subscribeして取得した文言をチャットのように表示していくところまでは動作確認して、さてどうやって文字を流すのかなと調べたところ、
まったくドンピシャでやりたいことを説明してくれている記事があったのでこちらを参考させていただきました。

• Slack + Electron + Socket.ioを使ってニコニコ動画風にメッセージを表示する!

さいごに

とりあえずアンケートの集計結果表示は改善したいなと感じております…。
コロナが落ち着いてオフラインでの発表の機会がまた増えてくるのであれば、発表者用のリッチメニューを作って、片手にスマホ持ったままワンタッチで操作できるので楽そうだなぁと感じました。
また参加者が普段CommentScreenを使ったことない場合、LINEの方がアンケート回答等が直観で操作できるのもメリットかなと思いました。