Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@3yaka4

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

More than 1 year has passed since last update.

はじめに

こちらはProtoOutStudiooの課題でobnizとLINEBotを組み合わせて何か作ろう!というものです。

概要

新型コロナウィルスのせいで在宅ワークになったため、仕事中の家族との距離が難しい。
特にうちは猫が3匹もいるので、ニャンコちゃん達が騒ぎ始めたらどちらの部屋に引き取る?とか、ご飯何時にする?
などなど、いちいちメッセージを送らずに部屋越しに会話することがよくあるのですが、実は「今オンラインミーティング中!!!!ノックしないでー、開けないでー」みたいなことがあって気まずい思いをしたりして、何かトイレの空き情報みたいなサイネージが欲しくて作りました。

できたもの

部屋に入らないで欲しい時に入らないでマークをLINEから、obnizで表示させるサイネージ的なもの


作りたいもの

部屋にいながら部屋の外にある
1.LINEBotで操作する
2.マトリックスが「今は部屋を開けないで的なマークを出す」
3.何かにデプロイしていつでも動くLINEBot
4.ディスプレイにメッセージを出す
5.扉にとりつける

作れなかったところ

部屋にいながら部屋の外にある
1.○ → obnizをLINEBotで操作する
2.× → マトリックスが「今は部屋を開けないで的なマークを出す」
3.× → ngrokではなく何かにデプロイしていつでも動くLINEBot
4.○ → ディスプレイにメッセージを出す
5.○ → 扉にとりつける

obniz Starter Kitを買ったので、LEDマトリックス(MatrixLED_HT16K33)で◯×を出そうと思ったのですが、よくわからない文字しか出せず、挙げ句の果てに壊してしまいました。。。テスト画面ですら動かなくなってしまった。


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


扉への設置は、画鋲を打とうとしてマジで注意を受けたので透明のバックに入れて、ドアノブに引っ掛けるという荒技です。

マトリックスを壊してしまったのでobnizのディスプレイを使って
LINEBotからオンラインミーティングが始まったら
「開けないで」 と送ると、
大きめの × を表示させる
「終わったよ」と送ると表示が消える
(マトリックスの残骸付き)

コード

node.js
'use strict';

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


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

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

const config = {
  channelAccessToken: '***',
  channelSecret: '***'
};
const app = express();
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("obniz meets LINE Bot!");
  //matrix = obniz.wired("MatrixLED_HT16K33", { vcc: 1, gnd: 0, sda: 2, scl: 3 });
  //matrix.init(8);
  //matrix.brightness(7);

  ctx.fillStyle = "white";
  ctx.font = "60px sans-serif";
  ctx.strokeStyle = 'rgba(255,255,255,1)'

}

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

  let mes = event.message.text;
  if (event.message.text === '開けないで') {
    mes = '表示を出すよ'; //待ってねってメッセージだけ先に処理
    getAskObnizTemp(event.source.userId); //スクレイピング処理が終わったらプッシュメッセージ
  }
  else if (event.message.text === '終わったよ') {
    obniz.display.clear();

  } else {
    mes = event.message.text;
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: mes
  });
}

const getAskObnizTemp = async (userId) => {
  //let ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
  // ctx.fillStyle = "black";
  // ctx.fillRect(0, 0, matrix.width, matrix.height);
  // ctx.fillStyle = "white";
  // ctx.font = "9px sans-serif";
  // ctx.fillText('X', 0, 7);
  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()
  //ctx.fillText('  ×', 0, 60);
  await obniz.display.draw(ctx);


  await client.pushMessage(userId, {
    type: 'text',
    text: "変えました",
  });
}

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

参考サイト

MatrixLED_HT16K33 | JS Parts Library | obniz
node.js+canvasでobnizのLCDに文字などを表示する: xshige's beta notes

感想

マトリックスが動いていた時も、このコードだとエラーだらけだったので、なんとも言えない気持ちで着地できずでした。
node-canvasにしてもエラーだったのできっと根本的なところが違うんだろうなと思いました。
がんばるっ

 

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3yaka4
protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?