はじめに
OpenAI Codex CLI を使ったAI駆動開発、快適ですよね。でも、こんな経験ありませんか？
- CLI上でログが流れすぎて、「あれ、さっき何やったんだっけ？」
- 複数プロジェクトで Codex を動かしていて、どのセッションがどこまで進んでいるか分からない
- 昨日やってた作業を再開したいのに、セッション ID が見つからない
- スマホから「あのタスク、ちゃんと完了したかな？」と確認できない
- 寝る前にベッドで「今日のログ、ちゃんと確認しておきたい」
そんなあなたに朗報です。
私は2つのツール — Codex Viewer（Web版）と Codex Resumer(ccresume-codex)（CLI版）— を開発・運用することで、Codex ライフの生産性を飛躍的に向上させることができました。
この記事では、実際の使用シーンを交えながら、これら2つのツールがどのように開発体験を変革するかを紹介します。
🌐 Codex Viewer：ブラウザから全てを俯瞰する
これは何？
Codex Viewer は、Codex セッションをブラウザで可視化・管理するフルスタックWebアプリケーションです。
~/.codex/sessions/ と ~/.codex/history.jsonl をリアルタイムで監視し、以下を実現します：
- プロジェクト一覧：複数のワークスペースを一元管理
- セッション詳細：シンタックスハイライト付きログビューア
- リアルタイム同期：SSE（Server-Sent Events）によるライブ更新
- どこからでもアクセス：スマホ、タブレット、別のPCからも確認可能
技術スタック
- Next.js 15 + React 19：モダンなフロントエンド
- Hono API：軽量・高速なバックエンド
- Server-Sent Events：ポーリング不要のリアルタイム通信
- File Watcher：ファイルシステム監視でゼロ遅延同期
インストール & 起動
# インストール不要で即起動
PORT=5656 npx @nogataka/codex-viewer@latest
# グローバルインストールする場合
npm install -g @nogataka/codex-viewer
codex-viewer
起動すると自動的にブラウザが開き、http://localhost:5656 でアクセスできます。
📱 実際の使用シーン：Codex Viewer編
シーン1：複数プロジェクトの並行管理
フリーランスやスタートアップで働いていると、複数のプロジェクトを同時進行することがよくあります。
従来の問題：
- CLI でディレクトリを行き来して
ls ~/.codex/sessions/を確認 - どのプロジェクトがアクティブかわからない
- セッションログを確認するのに
catでJSONLを開く苦行
Codex Viewer なら：
- ブラウザで Projects タブ を開く
- 全プロジェクトが「最終更新時刻」「メッセージ数」と共に一覧表示
- 気になるプロジェクトをクリック → セッション一覧へ
- さらにセッションをクリック → シンタックスハイライトされた美しいログが表示
検索ボックスでプロジェクト名をフィルタリングできるので、50個のプロジェクトがあっても一瞬で目的のものを見つけられます。
シーン2：外出先からの進捗確認
ランチ中、ふと「さっき Codex に依頼したリファクタリング、終わったかな？」と気になること、ありますよね。
Codex Viewer の真骨頂：
- スマホのブラウザで
http://<your-pc-ip>:5656にアクセス - リアルタイムで更新される Status Badge を確認
- 「Running」ならまだ実行中、「Completed」なら完了
SSE のおかげで、ページをリロードしなくても自動的に最新状態が反映されます。カフェで MacBook を開かずにスマホだけで確認完了。
シーン3：寝る前のログレビュー
ベッドに入る前、「今日 Codex が書いたコード、ちゃんとレビューしておきたい」というエンジニアの性（さが）。
快適なレビュー体験：
- タブレットから Codex Viewer を開く
- Diff ビューア で変更箇所を確認
- Tool Output（コマンド実行結果）も折りたたみ可能で読みやすい
- 気になる部分は sessionId をコピーして、翌朝 IDE で再開
CLI で JSONL を眺めるのとは雲泥の差です。
🖥️ Codex Resumer(ccresume-codex)：ターミナルから瞬時にセッション再開
これは何？
ccresume-codex は、Codex セッションをターミナル上で検索・再開するための TUI（Terminal User Interface）アプリケーションです。
元々は Claude Code 向けの ccresume を Codex 向けに移植したもので、以下が特徴です：
-
高速起動：
npxで即実行、ccresume-codexコマンド一発 -
インタラクティブな検索：
/キーで検索モード、Ctrl+Uでクエリクリア -
セッション UUID を一発コピー：
cキーでクリップボードへ -
Codex CLI オプションを編集可能：
-キーでオプションエディタ起動
技術スタック
- Ink：React for CLIs（TUI を React で書ける！）
- TypeScript：型安全な開発
- Jest + ink-testing-library：テスト駆動開発
インストール & 起動
# ワンショット実行
npx @nogataka/ccresume-codex@latest
# グローバルインストール
npm install -g @nogataka/ccresume-codex
ccresume-codex
# カレントディレクトリのセッションのみ表示
ccresume-codex .
🚀 実際の使用シーン：Codex Resumer(ccresume-codex)編
シーン1：朝イチの作業再開
朝、IDE を開いて「昨日どこまでやったっけ？」となる瞬間。
従来の作業フロー：
-
ls ~/.codex/sessions/でディレクトリを確認 - JSONL ファイル名からタイムスタンプを推測
-
cat ~/.codex/sessions/.../xxx.jsonlでログを確認 - セッション UUID をコピー
-
codex resume <UUID>で再開
ccresume-codex なら：
-
ccresume-codexを実行 - 矢印キーで昨日のセッションを選択（最終更新順にソート済み）
- Enter キーを押すだけ
たった3秒で作業再開。コーヒーが冷める前に開発スタートです。
シーン2：プロジェクト横断のセッション検索
「あのバグ修正、どのプロジェクトでやったっけ？」というとき。
ccresume-codex の検索機能：
-
/キーで検索モードに切り替え - プロジェクト名やセッション内容を入力
- インクリメンタル検索でリアルタイムにフィルタリング
-
Ctrl+Uで検索クエリをクリア
複数プロジェクトにまたがって作業していても、欲しいセッションが一瞬で見つかります。
シーン3：Codex CLI オプションのカスタマイズ
「今回は --model o1-mini で実行したい」というとき。
オプションエディタ：
- ccresume-codex 起動後、
-キーを押す - コマンドエディタが開く
-
--model o1-miniを入力（補完候補も表示される） -
Enterで確定
次にセッションを再開（Enter）または新規開始（n）すると、自動的に指定したオプションが適用されます。
🔥 2つのツールを組み合わせた最強ワークフロー
朝のルーティン
- ccresume-codex で昨日のセッションを確認
- 気になるセッションの UUID を
cキーでコピー - Codex Viewer をブラウザで開き、該当セッションの詳細ログをレビュー
- 問題なければ ccresume-codex から
Enterで再開
複数プロジェクトの並行作業
- Codex Viewer で全プロジェクトの進捗を俯瞰
- 優先度の高いプロジェクトを特定
- Codex Resumer(ccresume-codex) で該当プロジェクトのセッションを検索・再開
- 作業中、別のプロジェクトの進捗が気になったらブラウザでサッと確認
外出先での確認 → 帰宅後の即再開
- 外出先で Codex Viewer（スマホ） から進捗確認
- タスクが完了していることを確認
- 帰宅後、Codex Resumer(ccresume-codex) でそのセッションを開いてレビュー
- 次のタスクを開始
📊 生産性向上の具体的な数値
実際に3ヶ月間、これらのツールを使い続けた結果：
- セッション再開までの時間：平均 2分 → 5秒（96% 削減）
- ログ確認の頻度：週3回 → 毎日（可視化により習慣化）
- 並行プロジェクト数：2〜3個 → 5〜7個（管理が容易に）
- 「あのセッションどこだっけ？」問題：ゼロ
🛠️ セットアップのコツ
1. Codex Viewer を常駐させる
# tmux や screen でバックグラウンド実行
tmux new -s codex-viewer -d 'codex-viewer'
こうすることで、いつでもブラウザからアクセス可能になります。
2. Codex Resumer(ccresume-codex) にエイリアスを設定
# ~/.zshrc or ~/.bashrc
alias cr='ccresume-codex'
alias crh='ccresume-codex --hide tool' # tool メッセージを非表示
cr と打つだけで起動できます。
3. ネットワーク経由でアクセスしたい場合
Codex Viewer をローカルネットワーク上で公開：
# ファイアウォール設定を確認した上で
PORT=5656 HOST=0.0.0.0 codex-viewer
スマホやタブレットから http://192.168.x.x:5656 でアクセス可能に。
🎯 こんな人におすすめ
Codex Viewer が向いている人
- 複数プロジェクトを同時進行している
- チームで Codex の実行結果を共有したい
- CLI のログが読みづらいと感じている
- スマホやタブレットから進捗確認したい
- 寝る前にベッドでログをレビューしたい（私です）
Codex Resumer(ccresume-codex) が向いている人
- ターミナルから離れたくない
- セッション再開に毎回時間がかかっている
- プロジェクト横断でセッションを検索したい
- Codex CLI のオプションを頻繁に変更する
- TUI ツールが好き
🔗 リソース
Codex Viewer
- GitHub: https://github.com/nogataka/codex-viewer
-
npm:
@nogataka/codex-viewer - 記事:
Codex Resumer(ccresume-codex)
- GitHub: https://github.com/nogataka/ccresume-codex
-
npm:
@nogataka/ccresume-codex - 記事: Qiita: Codex Resumer で過去セッションを素早く再開
おわりに
Codex CLI は素晴らしいツールですが、ログの可視化とセッション管理という点では改善の余地がありました。
Codex Viewer と Codex Resumer(ccresume-codex) は、その課題を解決し、Codex を使った開発体験を劇的に向上させてくれます。
- Web から俯瞰 し、
- ターミナルから即座に再開 する。
この2つのツールを組み合わせることで、あなたの Codex ライフは確実に変わります。
ぜひ試してみてください。