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

### はじめに
この記事は前回[在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた \- Qiita](https://qiita.com/3yaka4/items/5765dc5abf547783dc59)のなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。

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

LINEBotに「開けないで」といれると　obnizのディスプレイに　『　×　』　を描画し
「終わったよ」　といれるとけしてくれます。
　
### できたもの
(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)
![IMG_20200415_214353-COLLAGE (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282291/a60b56d5-4c81-9c39-853f-81708a9f4f9d.jpeg)



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">部屋を開けないでLINEBot　Herokuに無事アップできたー。<a href="https://twitter.com/hashtag/ProtoOut?src=hash&amp;ref_src=twsrc%5Etfw">#ProtoOut</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://t.co/ourKf9yDn3">pic.twitter.com/ourKf9yDn3</a></p>&mdash; 3yaka (@3yaka4) <a href="https://twitter.com/3yaka4/status/1250408760427696135?ref_src=twsrc%5Etfw">April 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#### 使い方

+ （会議が始まったら）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](https://github.com/Automattic/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　とでてきます。
![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282291/3f066767-20d2-9e78-025f-4f3b087c171d.png)

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

```
heroku ps:scale web=1
```
#### アプリケーションにアクセスします

```
heroku open
```
![スクリーンショット 2020-04-15 23.26.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282291/168174ba-84dd-5ac7-2e0e-56c2b2ebe0dc.png)
ブラウザが立ち上がってデプロイできました!!!!!!!!!!!!!!

---
### 動いていないところ
1. 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](https://qiita.com/turusuke/items/32f4132ff32fbe18db17)
[node\-canvas をインストールしてみました \- ふにょい日記](https://blog.goo.ne.jp/asakurah/e/98b3b8177d48580cbf0c5cdf1485541d)
[Automattic/node\-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS\.](https://github.com/Automattic/node-canvas)

### 感想
obniz難しい。