【2026年版アップデート】読む教材から「入れるだけのスキル」へ

購入者向けに、本文の設計・安全対策・構築手順をまとめた Codex／Claude Code両対応スキルを追加しました。

長いプロンプトを章ごとにコピーする必要はありません。ZIPをダウンロードしてスキルフォルダへ置き、「AI Office Boardを作って。CodexとClaude Codeの稼働を両方表示し、安全なローカル構成で動作確認までして」と頼むだけです。

・Codex／Claude Codeの自動検出

・1画面に統合した稼働状況

・レトロな8-BITオフィス表示

・大きな履歴ファイルを末尾だけ読む軽量設計

・片方が未導入でも落ちない構成

・プロンプト・履歴・秘密情報を標準では表示しない設計

・node --test、API読戻し、ブラウザ表示まで検証

・発令機能は希望時のみ追加。通常の権限確認を維持

【API従量課金は必要？】

この配布物はスキルとローカルダッシュボードの設計一式です。利用条件や使用量は、利用しているCodex／Claude Code側の契約と最新仕様に従います。本商品から別途APIキーを要求したり、外部サーバーへ履歴を送信したりはしません。

【購入後の最短手順】

1. 有料エリアのZIPをダウンロード

2. ZIPを展開してスキルフォルダへ配置

3. CodexまたはClaude Codeを再起動／新しいセッションを開始

4. $build-ai-office-board を指定して「AIオフィスを作って」と依頼

5. 表示されたローカルURLを開く

本文は仕組みを理解・カスタマイズする教科書として、ZIPは最短で完成させる実用品として使えます。

1. あなたのClaude Code、いま何体動いていますか?

Claude Codeを使い込んでいる人ほど、必ずこの壁に当たります。

複数プロジェクトでセッションを並列起動 → どれが動いていてどれが止まったか分からない
バックグラウンドタスクを投げた → 終わったのか詰まったのか分からない
ターミナルのタブを巡回するだけで時間が溶ける
気づいたら1時間前に止まったセッションを放置していた

AIの実行力はもう十分です。足りないのは「いま何が起きているかを一目で見る手段」。

本ガイドは、その解決策として実際に毎日運用している自作ダッシュボード「8-BIT Task Board」の設計・コード・構築手順を、Claude Codeに作らせるためのプロンプト集込みで全公開するものです。

2. 8-BIT Task Boardとは

ブラウザにRPG風のピクセルオフィスが表示され、

稼働中のClaude Codeセッション = デスクでタイピングするキャラ
登録したAIエージェント(レビュー担当・SEO担当など) = 部屋を歩き回るスタッフ
司令デスクのClaude = ダッシュボードから出した指令を実行する実働部隊

として、あなたのAI稼働状況がリアルタイムに描画されます。

見た目はゲームですが、中身は実用ツールです。

Claude Code本体は無改造。~/.claude のローカルデータを読むだけ
依存パッケージゼロのNode.jsサーバー1本(npm install不要)
ダッシュボードから「発令」→ ヘッドレスClaudeが実行 → 結果がボードに報告される双方向運用
複数PCのClaude稼働状況を1画面に統合
Macでは.app化してDockからワンクリック起動

3. 本編の内容(全9章)

第1章全体設計 ― なぜ「読むだけ」の設計が正解か アーキテクチャ全体図。Claude Code無改造・依存ゼロ・読み取り中心という3原則の理由。

第2章 ~/.claude の中身を読む projects/ 配下のJSONL構造、セッション・タスクの読み方、「稼働中」判定ロジック(最終更新時刻ベース)の実装。ここが本ガイドの心臓部です。

第3章依存ゼロNode.jsサーバーの構築 http/fs/pathだけでAPIサーバーを書く構成。/api/board のスナップショット設計、キャッシュ、CORS。

第4章ボードUI ― まず「表」で作る タスク一覧・セッション一覧・直近コミットの表示。デスクトップ常駐用コンパクト版の作り方。

第5章ピクセルオフィスの描画 16pxタイルマップ、家具の配置、ロボ猫スプライトの作り方(文字列グリッドでドット絵を定義する手法)、キャラの状態機械(待機→歩行→アクション)、家具を避けるBFS経路探索。

第6章 hooks連携 ―「発令→実行→報告」の双方向化 UserPromptSubmit hookで指令を注入し、Stop hookで最終回答をボードへ返す仕組み。キュー設計と重複防止。

第7章セキュリティ設計(重要) ユーザー入力をシェル引数に絶対混ぜない理由と実装、権限バイパスフラグを使わない運用、ローカルトークンによるAPI保護、同時実行ロック。

第8章複数PC統合と.app化 sources.jsonで複数マシンを1画面へ。macOSの.appラッパー作成(GUI起動時にnodeのPATHが通らない問題の解決込み)。

第9章構築プロンプト集 ― Claude Codeに作らせる 第1〜8章の内容を、段階別にそのままClaude Codeへ投げられるプロンプトとして再構成。コードを手で書かずに、あなたの環境で同等物を構築する手順。

付録

トラブルシューティング(ポート競合 / JSONL肥大化 / hooks が発火しない)
カスタマイズ集(キャラ変更、通知連携、コスト表示)
セキュリティチェックリスト

4. こんな人向け

Claude Codeを複数プロジェクトで並列運用している(したい)人
サブエージェント・バックグラウンドタスクを使いこなしたい人
「AIに仕事を任せる」体制を趣味と実益を兼ねて構築したい個人開発者
チームや家族に「AIで何をやっているか」を見せる手段が欲しい人

5. こんな人には向きません

Claude Codeをまだ一度も使ったことがない人(先に公式のセットアップを済ませてください)
コードを1行も読みたくない人(プロンプト集で構築自体は可能ですが、内容理解にはコードの雰囲気が読める程度の知識を推奨します)
WindowsでMacと完全同一の.app化を期待する人(サーバーとブラウザUIはWindowsでも動きますが、第8章の.app化はmacOS向けです)

6. 動作環境

Claude Code導入済みのMac(推奨)またはLinux/Windows(コア機能)
Node.js 18以上
追加のnpmパッケージ: 不要

7. 価格について

1,980円です。

このガイドの内容は、設計試行錯誤・セキュリティ設計・hooks仕様の調査を含めて相応の時間を投じて構築したものですが、「AI並列運用の管理基盤が飲み会1回未満で手に入る」ラインに設定しました。

Claude Codeの従量コストを考えれば、放置事故で無駄になるセッション数回分で回収できる計算です。

8. 購入後の流れ

本編(テキスト+コード断片+プロンプト集)を読む
第9章のプロンプトを順にClaude Codeへ投げる
30分〜数時間であなたのデスクトップに「AIオフィス」が完成

【本編】Claude Codeを「AI社員」化する ― 8-BIT Task Board 構築完全ガイド

販売: Brain ¥1,980
想定読了時間: 60〜90分 / 構築時間: 30分〜数時間
動作環境: Claude Code導入済み + Node.js 18+(npmパッケージ不要)

このラインより下が有料エリアです