はじめに
この記事は前回在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた - Qiitaのなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。
概要
「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことで気まずい思いをしたことが増えてきたので、いわゆる トイレの空き情報「空」 みたいなサイネージが欲しくて作りました。
LINEBotに「開けないで」といれると obnizのディスプレイに 『 × 』 を描画し
「終わったよ」 といれるとけしてくれます。
できたもの
(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)
部屋を開けないでLINEBot Herokuに無事アップできたー。#ProtoOut#obnizpic.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
しましょう！！！
コード
'use strict';// obniz呼び出しvarObniz=require('obniz');varobniz=newObniz("***");// Obniz_ID に自分のIDを入れますconstexpress=require('express');constline=require('@line/bot-sdk');constPORT=process.env.PORT||8080;letmatrix;const{createCanvas}=require('canvas')constcanvas=createCanvas(128,64);constctx=canvas.getContext('2d');constconfig={channelAccessToken:'***',channelSecret:'***'};constapp=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));});constclient=newline.Client(config);// obniz接続obniz.onconnect=asyncfunction(){obniz.display.clear();obniz.display.print("HELLO");}asyncfunctionhandleEvent(event){letlinemes=event.message.text;if(event.type!=='message'||event.message.type!=='text'){returnPromise.resolve(null);}letmes=event.message.text;if(event.message.text==='開けないで'){mes='表示を出すよ';//待ってねってメッセージだけ先に処理 obniz.display.clear();getAskObnizTemp(event.source.userId);}elseif(event.message.text==='終わったよ'){obniz.display.clear();mes="はーい"clearmes(event.source.userId);}else{obniz.display.clear();getlinemes(event.source.userId,linemes);}returnclient.replyMessage(event.replyToken,{type:'text',text:mes});}constgetlinemes=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);awaitclient.pushMessage(userId,{type:'text',text:`${linemes}にしたよ`,});}constgetAskObnizTemp=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);awaitclient.pushMessage(userId,{type:'text',text:"バツにしたよ",});}constclearmes=async(userId)=>{obniz.display.clear();awaitclient.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の方にはおうむ返しが来るのですが)
constgetlinemes=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);awaitclient.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難しい。