個人開発 ・ 実装済み

Work Notification Hub

Gmail・Chatwork・GitHub・Slackの通知を1画面に集約。Notionカレンダーとフォトライブラリーを並べた、外部ディスプレイに常時表示する「自分専用の仕事ホーム画面」。

Node.js JavaScript 各種API AppleScript ローカル実行 個人開発
Work Notification Hub のホーム画面。左に通知パネルとフォトライブラリー、右にNotionカレンダー

概要

自分の仕事用ホーム画面を作るために開発した、ローカル実行型のデスクトップダッシュボードです。 右側にNotionカレンダー、左上に仕事通知、左下に写真・動画のフォトライブラリーを配置し、外部ディスプレイに常時表示して使うことを想定しています。

単なる通知アプリではなく、仕事中に常に見ておきたい情報と、少し気分が上がる要素を1つの画面にまとめた「自分専用の仕事ホーム画面」です。

背景・課題

  • 確認すべき情報が Gmail / Chatwork / GitHub / Slack / Notionカレンダー に分散していた
  • それぞれを個別に開く必要があり、通知の見落としや確認漏れが起きやすかった
  • Gmailは全部ではなく「特定の相手からのメールだけ」見逃したくないという要件があった
  • Mac標準ウィジェットの写真はデスクトップ背面に出るため、通知やカレンダーと並べて常時表示しづらかった

アプリの概要

「通知管理パネル」「Notionカレンダー表示」「写真・動画フォトライブラリー」の3つを組み合わせた仕事用ダッシュボードです。 メインは通知管理パネルで、確認すべきものがある時だけ内容を表示。通知がない時はアイコンだけのミニマル表示にして、常時表示していても邪魔にならないUIにしています。

通知管理機能

  • Gmail: Gmail APIで「指定した送信者からの未読メールだけ」を取得。見逃したくない相手だけを登録する設計。別アカウント宛もフィルタ転送で拾える。
  • Chatwork: Chatwork APIで未読・自分宛て通知を取得。未読数だけでなく、可能な範囲で送信者名と本文の一部も表示。
  • GitHub: GitHub Notifications APIでレビュー依頼・コメントを取得。PRレビューやコメントの見落としを減らす。
  • Slack: Bot追加やAPI連携を避け、Chromeで開いているSlackタブの未読表示をローカルで監視。相手側に影響を出さない方式。

Photo Library

左下には写真・動画をランダム表示するフォトライブラリーを配置。指定フォルダ内の写真・動画を読み込み、ブラウザ上でスライド表示する小さなフォトフレームを実装しました。 通知がない時間でも画面が無機質にならず、外部ディスプレイに置きっぱなしにしたくなる作業環境を作るための機能です。

UI設計

左上

通知パネル（ある時だけ内容表示）

左下

フォトライブラリー

右側

Notionカレンダー

方針

「今どこを見に行くべきか」を一瞬で判断

技術仕様

Language

Node.js, JavaScript

Front

HTML / CSS

API

Gmail / Chatwork / GitHub

その他

Chrome / AppleScript, ローカル実行

工夫した点

  • Gmailは特定送信者のみを通知対象にし、別アカウント宛も転送で拾えるようにした
  • Chatworkは送信者名と本文プレビューを表示するよう改善した
  • SlackはBot追加せず、Chromeタブ監視で相手側に影響を出さない方式にした
  • 通知がない時は何も表示しないミニマルなUIにした
  • 外部サーバーやDBを使わず、`.env`とローカルの`data/`で完結するローカル実行設計にした

このアプリで解決したこと

  • 仕事中に複数サービスを何度も開いて確認する手間が減った
  • 通知が来た時だけ対象サービスを見に行けばよくなった
  • カレンダー・写真も同じ画面に並べ、常時表示したくなる仕事ホーム画面になった
  • 「自分の困りごとを自分で設計して解決できる」ことを示せる個人開発
個人開発に戻る