この記事は9割ぐらい生成AIで書いてます
claude codeの状況を可視化するccguiをつくった
結構Claude Codeを使っているのですが、使えば使うほど「あの実装、どのセッションでやったっけ？」とか「どのくらいAPI使ってるんだっけ？」という課題に直面してきました。
Claude Codeのセッション情報は~/.claude/projects/以下にJSONL形式で保存されているけれど、プロジェクトごとに分かれているし、ファイル名に意味のある情報がないので中身が分からない。
さらに、使用量の把握やプロジェクト管理も手作業で面倒でした。
そこで作ったのが CCGUI (Claude Code GUI) です。
CCGUIとは
- 📦 NPM Package
- 📖 公式サイト
CCGUIはClaude Code CLIに美しいWeb UIを提供するツールです。npmで簡単にインストールできて、Claude Codeの全セッション履歴を可視化したり、リアルタイムで使用状況を追跡したりできます。
# インストール
npm install -g @jun-a/ccgui
# 起動
ccgui
実行すると、ブラウザでWebUIが開きます。ここから過去のセッションを検索したり、使用量をチェックしたり、新しいプロジェクトを作成したりできます。
※ccusageを内部で利用しているので一緒にインストールされます。
主な機能
1. 📊 リアルタイム使用量分析
特徴：
- 日別/モデル別/プロジェクト別の詳細な使用量分析
- 入力/出力トークン、キャッシュ作成/読み込みの詳細内訳
- Recharts を使った美しいグラフ表示
「今月どのくらい使ったっけ？」がひと目で分かります。
2. 🗂️ 包括的なプロジェクト管理
おそらく一番重宝している機能です。
全てのClaude Codeプロジェクトを一元管理できます。
特徴：
-
~/.claude/projects/の全プロジェクトを自動発見 - セッション履歴の完全な表示
- どのディレクトリで作業していたかも分かる
- コマンドコピーにより、プロジェクトに移動して該当セッションでの再開
これまで「あの実装どこでやったっけ」で迷っていたのが、すぐに見つかるようになりました。
3. ⚡ CC Vibe - ラピッドプロトタイピング
DevContainerと --dangerously-skip-permissions オプションを利用した開発です。
YOLO Mode Developmentという4段階ワークフローでの超高速開発プラットフォームを内蔵しています。
ワークフロー：
- Requirements（要件分析）
- Design（技術設計）
- Tasks（タスク分解）
- Implementation（実装）
自動化機能：
- VS Code DevContainerの自動生成
- Gitの自動初期化とAngular式コミットメッセージ
- リアルタイム進捗追跡
- プロジェクトテンプレートの自動セットアップ
4. 🛠️ コマンド確認・MCPサーバー一覧
特徴：
- カスタムコマンド一覧（
~/.claude/commands/） - MCPサーバー設定一覧
Claude Codeでの開発過程
このツールを作る過程でも、もちろんClaude Codeをフル活用しました。セッション履歴を振り返ると、どんな風に開発が進んだかが見えて面白いです。
初期フェーズ（npm パッケージ化対応）
// TypeScriptエラーの大量修正セッション
npm run buildでエラーがでました。エラーがでないように対応して。
最初はビルドエラーとの戦いでした。未使用インポートの削除、型定義の不整合修正など、地道な作業をClaude Codeと一緒に進めました。
機能開発フェーズ
// セッション履歴より
CC Vibe Coding: Spec-Driven Dev with Git & DevContainer
Claude Code GUI: Session Management & Mobile Optimization
核となる機能を次々と実装。特にCC Vibe機能は「仕様駆動開発」のコンセプトで、アイデアから実装まで一気通貫で進められるようにしました。
最適化フェーズ
// ネットワーク対応セッション
アプリケーションの実行はサーバーを起動しているコンピューターを対象に実行するようにして。
アプリケーションへサーバーを起動している機器と別の他機器からアクセスすると軒並みエラーが表示されます
パフォーマンス最適化やネットワーク対応など、実用性を高める改善を重ねました。
Claude Codeの使い方のコツ
開発を通じて学んだClaude Codeの効果的な使い方：
- 具体的なエラーメッセージを丸ごと渡す - 「エラーが出ました」ではなく、ログ全体をペーストする
- 段階的に進める - 大きな機能も小さなステップに分けて実装
- 前回のセッションを活用 - 関連する過去のセッションを resume して文脈を継続
インストールと使い方
前提条件
- Node.js (v18以上)
- Claude Code CLI（インストール済み、認証済み）
インストール
# グローバルインストール
npm install -g @jun-a/ccgui
起動
# CCGUIを起動
ccgui
# エイリアスでも起動可能
ccgui --help # ヘルプ表示
ccgui --frontend-port 8080 # フロントエンドポート指定
ccgui --backend-port 3002 # バックエンドポート指定
アプリケーションは自動的に http://localhost:5173 で開きます。バックエンドAPIは http://localhost:7517 で動作します。
管理コマンド
# アプリケーション状態確認
ccgui-status
# ログ表示
ccgui-logs
# プロセス・一時ファイルのクリーンアップ
ccgui-clean
活用例
月次使用量レポート
使用量ページで先月のAPI使用量をチェック。
プロジェクト振り返り
完了したプロジェクトのセッション履歴を見直して、どんな実装をしたかドキュメント化。
新機能の爆速開発
CC Vibe で「Reactのダッシュボード作って」と入力するだけで、要件分析からDevContainer セットアップまで自動化。
Claude Codeを使い倒している人には、ぜひ試してもらいたいです。
興味がある人は、ぜひ使ってみてください！