『WorkRoom』開発ノート v1.0.0

Codexで進めている作業を役割ごとに分類し、ドット絵のオフィスで見渡せるツール「Workroom」を作りました。

各席の吹き出しに作業内容を表示し、作業記録の変化に合わせて状態を自動更新します。完了した応答はトレイから確認でき、見たいタスクだけを選んだり、作業中のタスクに絞ったりすることもできます。

動作の雰囲気は、ブラウザーデモで確認できます。デモに表示されるのは架空のタスクです。

開発の背景と役割の自動分類

Codexで複数のタスクを並行して動かしていると、どのタスクで何が進んでいるのかを把握しづらくなります。ひとつの案件でも、実装、画像作成、告知文の執筆など、工程はさまざまです。

そこで、タスクを役割ごとの部屋に割り振って可視化しました。エンジニア、デザイン、広報、営業、執筆、リサーチなどの役割を用意し、独自の役割も追加できます。席数はタスクに合わせて変わり、4席などの固定上限は設けていません。

分類には、作業ログから読み取れるツール名、変更対象、担当情報、キーワードなどを使っています。必要に応じて手動で指定することもできます。

画面上のキャラクターは、作業の役割を示す表現です。一つのタスクが複数の部署に表示されることもあるため、キャラクターの数とCodexの同時実行数が一致するわけではありません。

キャラクターには、前後左右の歩行アニメーションに加え、タイピング、コーヒーを淹れる、印刷する、ソファで休むといった仕草を用意しました。オフィスを眺めて楽しむための演出です。

立ち歩きとサウンドは、初期設定でオフにしています。 好みに合わせてオンにでき、アニメーション全体のオン・オフも別に切り替えられます。

音を使う場合は音量を調整でき、完了通知音を残したまま作業音だけを消すことも可能です。対応する音源ファイルをローカルで取り込んで使う方法も用意しています。

完了音は、新しく完了した応答がトレイに届いたときに鳴ります。起動時に読み込んだ過去の完了分で、通知がまとめて鳴ることはありません。

タスクが増えたときは、表示したい仕事だけにチェックを入れて絞り込めます。タスク名やグループ名で検索でき、複数のプロジェクトから必要な仕事を選ぶこともできます。

選択した仕事と状態のフィルターはPC側に保存されるため、再起動後も選択を引き継げます。

また、完了トレイの項目を開くと、その完了に対応するCodexの最終返答をその場で確認できます。返答を読むために、元の作業画面へ戻る手間を減らせます。

ここでの「完了」は、その回の応答が終わったことを表します。プロジェクト全体の完成を意味するものではありません。

オフィスの様子を広く眺めたいときのために、全画面表示を用意しました。全画面表示中も、左下でCodexの残り利用枠と回復時刻を確認でき、完了トレイも利用できます。

Workroomから新しいタスクを開始したり、待機中・完了済みのローカルタスクへ追加の指示を送ったりすることも可能です。

稼働中のタスクや承認待ち、追加のアクセスが必要な作業は、Codex側で続ける構成にしています。

Workroomは、このパソコンに記録されたCodexの作業情報を定期的に読み取り、画面へ反映しています。

表示や役割の分類、自動更新、演出のためにAIモデルを呼び出す処理は使っていません。ただし、Workroomから指示を送る場合を含め、Codexで実際の作業を実行する際には通常の利用量が発生します。

描画にはCanvas、音にはWeb Audioを使用しています。画面外の描画を省き、非表示のタブではアニメーションを停止するなど、表示を続ける際の処理を抑える設計にしました。

見た目や操作を先に試したい場合は、ブラウザーデモを利用できます。手元のCodexの仕事を表示する場合は、ローカル版を起動します。

利用枠の取得や指示の送信には、インストール済みでサインイン済みのCodex CLIが必要です。詳しい手順は日本語の接続ガイドにまとめています。

アップデート時は、.workroom フォルダーを残してアプリ本体を更新してください。このフォルダーには、接続設定、取り込んだ音源、表示する仕事の選択、Workroomから作成した作業フォルダーなどが入っています。

ソースコードはGitHubで公開しています。動作の不具合や改善点があれば、GitHubのIssuesでお知らせください。