在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編 #JavaScript

はじめに

この記事は前回在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた - Qiitaのなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。

概要

「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことで気まずい思いをしたことが増えてきたので、いわゆるトイレの空き情報「空」みたいなサイネージが欲しくて作りました。

LINEBotに「開けないで」といれると　obnizのディスプレイに　『　×　』　を描画し
「終わったよ」　といれるとけしてくれます。
　

できたもの

(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)

部屋を開けないでLINEBot　Herokuに無事アップできたー。#ProtoOut #obniz pic.twitter.com/ourKf9yDn3
— 3yaka (@3yaka4) April 15, 2020

使い方

（会議が始まったら）LINEBotに「開けないで」
っていれると　私の部屋にあるobnizに　「 × 」マークが出ます
(会議が終わったら)LINEBotに「終わったよ」
っていれると　私の部屋にあるobnizの　「 × 」マークが消えます

環境

Node.js v13.7.0
MacBook Pro macOS Mojave
Visual Studio Code 1.44.0
使用部材
obniz

node-canvasのために ➀

obnizのディスプレイに描画するために「node-canvas」をつかいます。
この子の取り扱いが厄介で、はまりまくりました。

node-canvas のインストールは、

「npm install canvas」

とするだけですが、その前に cairo がインストールされていなければなりません。
cairoのインストールの準備をします。

heroku buildpacks:set https://github.com/ddollar/heroku-buildpack-multi.git

.buildpacks ファイルを作ります。

cat << EOF > .buildpacks
https://github.com/mojodna/heroku-buildpack-cairo.git
https://github.com/heroku/heroku-buildpack-nodejs.git
EOF

このふたつをやったあとに

npm install canvas

しましょう！！！

コード

node.js

'use strict';

// obniz呼び出し
var Obniz = require('obniz');
var obniz = new Obniz("***");  // Obniz_ID に自分のIDを入れます


const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 8080;

let matrix;

const { createCanvas } = require('canvas')
const canvas = createCanvas(128, 64);
const ctx = canvas.getContext('2d');


const config = {
  channelAccessToken: '***',
  channelSecret: '***'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); 

app.post('/webhook', line.middleware(config), (req, res) => {
  console.log(req.body.events);

  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result));
});

const client = new line.Client(config);

// obniz接続
obniz.onconnect = async function () {
  obniz.display.clear();
  obniz.display.print("HELLO");
}

async function handleEvent(event) {
  let linemes = event.message.text;

  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  let mes = event.message.text;
  if (event.message.text === '開けないで') {

    mes = '表示を出すよ'; //待ってねってメッセージだけ先に処理 
    obniz.display.clear();

    getAskObnizTemp(event.source.userId);
  }
  else if (event.message.text === '終わったよ') {
    obniz.display.clear();
    mes = "はーい"
    clearmes(event.source.userId);
  }
  else {
    obniz.display.clear();
    getlinemes(event.source.userId, linemes);
  }


  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: mes 
  });
}
const getlinemes = async (userId, linemes) => {
  // ディスプレイをクリアにできないので黒い四角を書く
  // obniz.display.setColor('#000000');
  // obniz.display.rect(0, 0, 127, 127, true);

  ctx.fillStyle = "white";
  ctx.font = "20px sans-serif";
  ctx.fillText(linemes, 0, 60);
  obniz.display.clear();
  obniz.display.draw(ctx);
  obniz.display.print(linemes);

  await client.pushMessage(userId, {
    type: 'text',
    text: `${linemes}にしたよ`,
  });
}
const getAskObnizTemp = async (userId) => {
  ctx.strokeStyle = 'rgba(255,255,255,1)'
  ctx.beginPath()
  ctx.lineTo(0, 0)
  ctx.lineTo(127, 63)
  ctx.stroke()
  ctx.beginPath()
  ctx.lineTo(127, 0)
  ctx.lineTo(0, 63)
  ctx.stroke()
  obniz.display.draw(ctx);

  await client.pushMessage(userId, {
    type: 'text',
    text: "バツにしたよ",
  });
}
const clearmes = async (userId) => {
  obniz.display.clear();

  await client.pushMessage(userId, {
    type: 'text',
    text: `けしたよ`,
  });
}
// app.listen(8080);
app.listen(process.env.PORT || 8080);

console.log(`Server running at ${PORT}`);

node-canvasのために ②

上記コードをHerokuにデプロイします。（ちょっと普通じゃない）

git add --a
git commit -m "firstcommit" 
git push heroku master

ここでエラーのような怖い見た目とともに　rejected　とでてきます。

error とかでていますが、アプリケーションを実行させます。

heroku ps:scale web=1

アプリケーションにアクセスします

heroku open

ブラウザが立ち上がってデプロイできました!!!!!!!!!!!!!!

動いていないところ

Herokuにもっていくと、ngrokでは動いていた、 LINEBotに　入力した文字を　ディスプレイに出す処理がごかなくなってしまいました。 (LINEの方にはおうむ返しが来るのですが)

node.js

const getlinemes = async (userId, linemes) => {
  // ディスプレイをクリアにできないので黒い四角を書く
  obniz.display.setColor('#000000');
  obniz.display.rect(0, 0, 127, 127, true);

  ctx.fillStyle = "white";
  ctx.font = "20px sans-serif";
  ctx.fillText(linemes, 0, 60);
  obniz.display.clear();

//drawもprintもきかない
  obniz.display.draw(ctx);
  obniz.display.print(linemes);

  await client.pushMessage(userId, {
    type: 'text',
    text: `${linemes}にしたよ`,
  });
}

2.ディスプレイがクリアにできない
obniz.display.clear();がうごいてくれず、
obniz.display.print();も動かず。何が足りないのでしょう。

3.クリアにできないため黒い四角で塗りつぶす
白色で試してみたけど、なんか一瞬出たりしたりしたような。。。

参考サイト

heroku open
node-canvas をインストールしてみました - ふにょい日記
 Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.

感想

obniz難しい。

在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編