<p data-line="0" class="code-line">Claude Code をブラウザから操作できるクライアントを作りました。</p>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3a9b207f283dc" src="https://embed.zenn.studio/card#zenn-embedded__3a9b207f283dc" data-content="https%3A%2F%2Fgithub.com%2Fd-kimuson%2Fclaude-code-viewer" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/d-kimuson/claude-code-viewer" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/d-kimuson/claude-code-viewer</a></p>
<p data-line="4" class="code-line">過去の Claude Code セッションのログを確認したり、Resume するのに便利でかなり捗るようになったので紹介します！</p>
<h2 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" aria-hidden="true"></a> 作ったもの</h2>
<p data-line="8" class="code-line">Claude Code の会話ログファイルは <code>~/.claude/projects/&lt;project&gt;/&lt;session-id&gt;.jsonl</code> に JSONL 形式でリアルタイムに書き出されています。</p>
<p data-line="10" class="code-line">作ったのはこのログファイルをリアルタイムにパースし、ヒトに読みやすい形で表示するビュワーです。実際にチャットを送ってタスクを進めることもできます。</p>
<p data-line="12" class="code-line">見てもらうのがわかりやすいと思うのでデモを見せます:</p>
<p data-line="14" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/8d4140c3c09f-20250903.gif" alt="demo-video" class="md-img" loading="lazy"></p>
<p data-line="16" class="code-line">見て分かる通り</p>
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">プロジェクトごとのセッション一覧の確認</li>
<li data-line="19" class="code-line">ログファイルとリアルタイムに同期する、読みやすいセッションのビュワー
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">ツールの in/out や thinking が展開表示</li>
<li data-line="21" class="code-line">サブセッションの会話をモーダル化させ、全体の流れを追いやすいように</li>
</ul>
</li>
<li data-line="22" class="code-line">新規のチャットを開始したり、過去のチャットをセッション画面から再開可能。チャットのレスポンスもリアルタイムに描画される</li>
</ul>
<p data-line="24" class="code-line">等ができます。</p>
<h2 id="%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" aria-hidden="true"></a> モチベーション</h2>
<p data-line="28" class="code-line">もともとはブラウザで操作できるクライアントを作ろうと思って始めたわけではなく、特にサブセッションを利用している際のログファイルが読みづらすぎることがペインでビュワーが欲しくて作り始めました。</p>
<p data-line="30" class="code-line">で、作って使ったらそのままここから Resume したいなー、リアルタイムに同期してほしいなーとなって、育てているうちに今の形になりました。</p>
<h2 id="%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF" aria-hidden="true"></a> 技術的な仕組み</h2>
<p data-line="34" class="code-line">前提として、Claude Code のログは以下のような構造で保存されています</p>
<div class="code-block-container"><pre><code class="code-line" data-line="36">~/.claude/projects/
├── project-a/
│   ├── session-id-1.jsonl
│   ├── session-id-2.jsonl
│   └── ...
├── project-b/
│   ├── session-id-3.jsonl
│   └── ...
</code></pre></div><p data-line="47" class="code-line">1度 Claude Code を起動してやりとりした内容が1つの session-id に紐付き、resume した場合は新しい session-id が発行され、元のセッションの内容 + 新しいセッションの内容が追記されたログファイルが作成される仕組みになっています。</p>
<h3 id="%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" data-line="49" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" aria-hidden="true"></a> アーキテクチャ</h3>
<p data-line="51" class="code-line">claude-code-viewer 自身でデータベースは持たず、このログファイルを直接データソースとして Next.js をベースに UI を実装しています。</p>
<p data-line="53" class="code-line"><code>~/.claude/projects</code> 以下のファイルを watch し、変更を検知するたびに Server-Sent Events でブラウザに変更を通知し、React Query の invalidation でリアルタイム同期を実現しています。</p>
<p data-line="55" class="code-line">新規チャットや既存のチャットの Resume は Claude Code の TypeScript SDK で実装。<br>
メッセージを送信してセッションのプロセスを維持することで、あとはリアルタイム同期が常に動いているため勝手に描画される仕組みです。</p>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__ec35e50b7940d" src="https://embed.zenn.studio/mermaid#zenn-embedded__ec35e50b7940d" data-content="graph%20TB%0A%20%20%20%20A%5BClaude%20Code%5D%20--%3E%20B%5B~%2F.claude%2Fprojects%2F*.jsonl%5D%0A%20%20%20%20B%20--%3E%20C%5BFile%20Watcher%5D%0A%20%20%20%20C%20--%3E%20D%5BServer-Sent%20Events%5D%0A%20%20%20%20D%20--%3E%20E%5BNext.js%20Frontend%5D%0A%20%20%20%20E%20--%3E%20F%5BReact%20Query%5D%0A%20%20%20%20F%20--%3E%20G%5BUI%20Update%5D%0A%0A%20%20%20%20H%5BClaude%20Code%20TypeScript%20SDK%5D%20--%3E%20A%0A%20%20%20%20E%20--%3E%20H" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h2 id="%E4%BD%BF%E3%81%84%E6%96%B9" data-line="71" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h2>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="73"><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3400</span> npx @kimuson/claude-code-viewer@latest
</code></pre></div><p data-line="77" class="code-line">すればサーバーが起動します。</p>
<p data-line="79" class="code-line">ポート番号は都合が良いものに読み替えてOKです。</p>
<h2 id="%E4%BD%BF%E3%81%84%E9%81%93" data-line="81" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E9%81%93" aria-hidden="true"></a> 使い道</h2>
<p data-line="83" class="code-line">Claude Code CLI と併用して普段遣いしているので、良い感じに使えている使い道も紹介します。</p>
<h3 id="%E7%B5%90%E6%9E%9C%E3%81%A0%E3%81%91%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8F%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%81%8C%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E5%8B%95%E3%81%8D%E3%82%92%E3%81%97%E3%81%9F%E3%81%8B%E7%9F%A5%E3%82%8B%E3%81%AE%E3%81%AB%E4%BE%BF%E5%88%A9" data-line="85" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E6%9E%9C%E3%81%A0%E3%81%91%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8F%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%81%8C%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E5%8B%95%E3%81%8D%E3%82%92%E3%81%97%E3%81%9F%E3%81%8B%E7%9F%A5%E3%82%8B%E3%81%AE%E3%81%AB%E4%BE%BF%E5%88%A9" aria-hidden="true"></a> 結果だけではなくエージェントがどういう動きをしたか知るのに便利</h3>
<p data-line="87" class="code-line">Claude Code の CLI だと最終結果はわかりやすいですが、途中どういう経過を経て最終的なアウトプットを出したのかはたどりづらさがあります。サブセッション等を使っている Claude Code 自身が Claude Code を呼び出している場合は特に複雑です。</p>
<p data-line="89" class="code-line">期待するアウトプットが出なかった際の確認や、カスタムコマンドを作っている際に意図通り動いているかチェック等の目的で、Claude Code のタスクの全体の流れを追いたい時に重宝してます。</p>
<h3 id="%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AB-viewer-%E7%B5%8C%E7%94%B1%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" data-line="91" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AB-viewer-%E7%B5%8C%E7%94%B1%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9" aria-hidden="true"></a> リモート開発環境に Viewer 経由でアクセス</h3>
<p data-line="93" class="code-line">Claude Code が普及して Vibe でのコーディングが実用的になってきたことで、リモートマシンを用意してスマホの SSH Client で外出先から実装や修正をする、等の運用をしている人もいるかと思います。</p>
<p data-line="95" class="code-line">参考:<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1411451f6571b" src="https://embed.zenn.studio/card#zenn-embedded__1411451f6571b" data-content="https%3A%2F%2Fzenn.dev%2Ffuku_tech%2Farticles%2Fbba079706955fd" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/fuku_tech/articles/bba079706955fd" style="display:none" target="_blank">https://zenn.dev/fuku_tech/articles/bba079706955fd</a></p>
<p data-line="98" class="code-line">私は自宅サーバー兼リモートの開発マシンを用意して tailscale を用いて接続できるようにしているのですが、claude-code-viewer をリモートマシンに建てておくことでスマホのブラウザから Claude Code を操作できます。</p>
<p data-line="100" class="code-line">もろもろ設定して実際に使っているんですが、特にスマホでの操作だと SSH Client アプリを使うよりだいぶ使い勝手が良いなと感じています。</p>
<h3 id="%E3%81%9D%E3%81%AE%E4%BB%96" data-line="102" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h3>
<p data-line="104" class="code-line">作って日が浅いのでデバッグも兼ねて通常の用途でも割と使っているんですが、感触は結構良いです。</p>
<ul data-line="106" class="code-line">
<li data-line="106" class="code-line">1つ前のセッションでやったやつ再開したいなーというときにちまちま resume する必要がなく、タブで遷移してメッセージを送るだけで良い</li>
<li data-line="107" class="code-line">日本語で誤送信しがちな Enter ではなく Shift + Enter 送信を採用しているので誤送信が少ない</li>
</ul>
<p data-line="109" class="code-line">あとは、現状は画像のようにプロジェクト以下のセッションをさっと切り替えられる組み方をしています</p>
<p data-line="111" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3a958523faa6-20250903.png" class="md-img" loading="lazy"></p>
<p data-line="113" class="code-line">これはこれで便利なんですが、少し構造を変えて複数プロジェクト跨げるようにするとワークツリーを跨いで並列で Claude Code を動かす等の用途にも使いやすそうなので今後やっていきたいなと思ってます。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="115" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="117" class="code-line">Claude Code をブラウザから操作できるツールを作ったので紹介しました。</p>
<p data-line="119" class="code-line">同じような困りごとがある方はぜひ試してみてください！</p>
<p data-line="121" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7d9834a6248d" src="https://embed.zenn.studio/card#zenn-embedded__7d9834a6248d" data-content="https%3A%2F%2Fgithub.com%2Fd-kimuson%2Fclaude-code-viewer" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/d-kimuson/claude-code-viewer" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/d-kimuson/claude-code-viewer</a></p>
<p data-line="123" class="code-line">個人的に Claude Code は自走力が高いので非エンジニアにこそオススメできるなと思っているんですが、TUI であることがネックで、非エンジニアに使ってもらうのにも良いじゃないかなと思ったりしています。</p>
<p data-line="125" class="code-line">それでは良い、Claude Code ライフを〜👋</p>


Claude Code をブラウザから操作できるクライアントを自作したらめちゃくちゃ捗った

結果だけではなくエージェントがどういう動きをしたか知るのに便利

リモート開発環境に Viewer 経由でアクセス

しょっさん

きむそん

<p data-line="0" class="code-line">あまりにも素晴らしかったので、紹介させていただきました。ありがとうございます 🙏<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1d586d16c8269" src="https://embed.zenn.studio/card#zenn-embedded__1d586d16c8269" data-content="https%3A%2F%2Fnote.com%2Fsho7650%2Fn%2Fnc5d59772d206" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/sho7650/n/nc5d59772d206" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/sho7650/n/nc5d59772d206</a></p>


<p data-line="0" class="code-line">素敵な記事をありがとうございます！<br>
体験よく使ってもらえてそうで嬉しいです！</p>


Discussion