boss-key

昔のPCゲームには、上司が通りかかった瞬間に仕事画面へ切り替える「ボスが来た」キーが ありました。boss-key はその逆です。開いた瞬間、画面全体が「仕事に追われまくっている デスクトップ」になります。

動くデモを開く(PCのブラウザ推奨。F キーで全画面になります)

概要

サーバも依存ライブラリも不要な、1枚のHTMLファイルです。ブラウザで開くだけで、 架空のデスクトップが自動で動き続けます。

• 社内チャットに自分宛ての呼び出しが流れ込み、未読バッジが増えていく
• 通知バナーが右上に次々と積み上がり、ドックのアイコンが跳ねる
• 売上管理のスプレッドシートには目標未達の赤字と埋め込みグラフ
• 予定がぎっしり詰まった今週のカレンダー(ダブルブッキングあり)
• 書きかけの報告メールは、クリックするとそのまま自分でタイプできる

登場する会社、人物、製品、数字はすべて架空です。チャットやメールのUIも、 実在のサービスには寄せていない架空のものです。

キー操作

キー	動作
F	全画面の切り替え
M	通知音の切り替え(初期状態は無音)
1 / 2 / 3	通知の量(少なめ / ふつう / 多め)
B	通知を一気に4〜6件出す
T	メール本文の自動タイプの切り替え
P	一時停止 / 再開

実装の工夫

• どの解像度でも崩れない拡縮：1470x956px の固定サイズで「舞台」を組み、 transform: scale() でビューポートに合わせて拡縮。ウインドウやフォントの比率が 常に保たれるので、レイアウト崩れを気にせず画面を作り込めます
• 通知のアニメーション：バナーの出入りは CSS transition のみ。消えるときは max-height と余白を同時に畳んで、積み上がったバナーが自然に詰まります
• 通知音もファイルなし：WebAudio でその場で電子音を合成。音声ファイルを 持たないので1ファイル構成が保てます
• 人間らしい自動タイプ：メール本文は1〜3文字ずつのかたまりで打たれ、句読点で 一呼吸置き、通知が来ると一瞬手が止まります。打ち間違えて消す動きも入っています
• 時刻に追従：メニューバーの時計、カレンダーの現在時刻の線と今日の列は、 開いた時点の実際の日時に合わせて描画されます