길보 보고 앱을 만들어 보았다! 라는 이야기

코로나 소용돌이 속에서 여러분 어떻습니까?
조금이라도 건강해지는 시스템 개발할 수 없을까~라고 생각하고,
길보를 전사에서 기뻐하기 위한 앱을 개발했습니다.

프로그램의 상세는, 쓰지 않습니다만, 어떤 구성으로 만들었는지를 소개합니다!
개발 한계가 이틀 밖에 없었기 때문에, 만들지 않았습니다. 😣
(그 중 하루는 어떤 음악이 텐션 오르는지에 지출했습니다.)

길보를 보고하는 앱은 무엇입니까?

채팅 워크에 메시지를 보내면 Mac을 연결하고 있는 모니터에 텐션이 오르는 음악과 함께 길보가 보고됩니다.


※본래라면, 텐션이 오르는 음악이 흐릅니다.

아키텍처

이 구성은 무려 서버 요금도 들지 않고, 「완전 무료」입니다!


① 채팅워크의 특정 스레드에 보고하기


※아츠마루 Bot에 대해서 To를 붙인 경우만 전사에의 보고가 되도록(듯이) 하고 있습니다🎉

② 채팅 워크 API를 받아 데이터를 가공

③ Firebase의 Realtime Database 업데이트

④Electron으로 작성한 Mac 앱측에서 데이터를 받는다

⑤ Cloud Storage에서 BGM을 다운로드하여 음악을 흘리고 메시지를 화면에 흘리기
※보고 내용에 따라 다운로드하는 음악을 나누고 있습니다.

어디에 집착했는가

브라우저에 의존하지 않고, Mac 본체에 제어를 더하고 싶었으므로, Mac 앱 만들려고 생각했습니다.
여러 가지 방법은 있지만, 오랜만에 "Electron"을 만져 보았습니다.

《つまづきポイント①》

Electron 측 창 제어

이미지는 아래 그림과 같습니다.
투명한 전체화면 브라우저를 위로 마스크시켜, CSS로 메시지가 흐르는 표현을 하고 있습니다.


Electron의 화면 표현에 익숙하지 않았기 때문에 여러가지 고전했습니다. 😅

mainWindow.setIgnoreMouseEvents(true); 윈도우를 클릭할 수 없는 상태로 한다

mainWindow.setAlwaysOnTop(true, 'floating'); 창을 맨 앞으로 표시

창 제어 주위의 코드

  // メインウィンドウを作成します
  let size = screen.getPrimaryDisplay().size; // ディスプレイのサイズを取得する
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    left: 0,
    top: 0,
    frame: false,       // フレームを非表示にする
    resizable: false,   // ウィンドウリサイズ禁止
    transparent: true,
    width: size.width,
    height: size.height,
    skipTaskbar: true,
    alwaysOnTop: true // 一番手前に表示する
  });

  // 全てのウィンドウに表示（フルスクリーン対応）
  app.dock.hide();
  mainWindow.setAlwaysOnTop(true, 'floating');
  mainWindow.setVisibleOnAllWorkspaces(true);
  mainWindow.setFullScreenable(false);
  app.dock.show();

  // マウスイベント無効化
  mainWindow.setIgnoreMouseEvents(true);

app.dock.hide(); 하고, app.dock.show(); 하는 일련의 흐름에 대해서는, 수수께끼 거동. . .
그러나 이 흐름이 아니면 최전방 및 전체 화면을 구현할 수 없었습니다.

《つまづきポイント②》

이쑤시개 포인트를 쓰려고 생각했지만, 이쑤시개 포인트 ①에서 쓴 곳 이외는,
특별히 집착하지 않았습니다. . . 어쨌든 Firebase가 너무 편리하고 도움이되었습니다.

만들어 보면 어땠어?

이 앱을 회사에 도입한 후 하루에 8회 정도 길보가 흐릅니다. 😆
많을 때는 15회 이상 흐르기도 했습니다 🎉

《사내와 감정의 변화》

기쁨을 부서를 넘어 전사에 공유 할 수있다 (다른 부서를 알거나 말하는 계기가 됨)

긴장이 오르고, 빨리 길보를 보고하고 싶은 기분이 된다

무엇보다, 사용할 수 있는 것이 만든 측에서 하면 가장 기쁩니다☺️

향후 전망

길보를 보고한 사람, 내용에 따라, BGM을 나누거나 화면의 특수 효과를 바꾸거나 할 수 있으면 더욱 텐션이 오르고, 길보를 보고하고 싶은 기분이 높아질 것 같다.
그리고는, 사내 뿐만이 아니라, 다른 회사에서도 이 어플리를 사용해 주실 수 있으면 기쁘다고 생각합니다.
꼭 관심있는 분, 말씀해 주세요~😊