macのClaude Code / Codexをスマホから操作できるアプリ「CC Pocket」を作った
はじめに
Claude CodeやCodexなどのAIコーディングエージェントを使っていると、エージェントの承認依頼や作業完了のたびにmacを開くのが億劫になります。
業務なら仕方ないですが、個人開発では散歩中やベッドでゴロゴロしながらでもAIに返事したいものです。
こういった用途のアプリはターミナル操作系やClaude Codeの /remote-control がありますが、操作性が好きになれなかったりしたので自分なりにモバイルに最適化したアプリ CC Pocket を作りました。（/remote-control に関してはCC Pocketに慣れてから公開されたので、そもそも使ってないのですが…）
こだわりポイント
- 承認系のUI
- アプリから新しいセッションを作れる
- プロンプトの書きやすさ
- cliのrename機能を活用した名前でのセッション履歴管理
- 画像を含めたdiff Viewer
- 通知機能
- 途中からCC PocketでCC Pocketの開発を行っている
承認系のUI
Claude Codeをスマホから使う上で一番頻度が高い操作が「承認」です。
CC Pocketではセッション一覧画面にツール承認やプラン承認のUIを直接表示しているので、セッションを開かなくてもワンタップで承認できます。
複数セッションを並行して動かしている場合でも、一覧から次々と承認を捌けるのがポイントです。
アプリから新しいセッションを作れる
macで作ったセッションを復元するだけでなく、アプリから新しいセッションを作れます。
プロジェクト選択、Permission Mode、モデル選択に加えて、git worktreeの作成もセッション開始時に同時に行えます。
ブランチを切ってworktreeを作ってセッションを始める、という一連の流れをスマホだけで完結できます。
プロンプトの書きやすさ
スマホとはいえプロンプトは妥協したくないので、入力補助にはかなり力を入れてます。
-
スラッシュコマンド補完: 入力バーの
/ボタンをタップするか、テキスト入力で/を打つとコマンド一覧がオーバーレイ表示されます。 -
ファイルメンション: 入力バーの
@ボタンをタップするか、テキスト入力で@を打つとファイル一覧が表示され、パスを手打ちせずにファイルを参照できます -
箇条書き補助: 改行すると自動で
-が挿入され、インデント/デインデントボタンでネストも操作できます。markdownぽいプロンプトを書く人には便利なはず - プロンプト履歴: 過去に使ったプロンプトをSQLiteに保存していて、頻度順・お気に入りで検索できます。繰り返し使うプロンプトの再入力が不要になります
cliのrename機能を活用した名前でのセッション履歴管理
Claude Codeのセッション一覧はIDベースなので、後から見返すとどれがどれかわかりません。
CC Pocketではcliの/renameの仕組みを流用し、アプリからセッションに名前をつけられます。
セッション一覧では名前付きのセッションだけにフィルタリングもできるので、重要なセッションを探しやすくなります。
画像を含めたdiff Viewer
エージェントが行ったファイル変更をスマホで確認するためのdiff画面を用意してます。
テキストファイルはunified diff形式で追加行・削除行をハイライト表示します。
画像ファイルの差分は3つのモードで比較できます：
- サイドバイサイド: 変更前後を横並びで表示
- スライダー: ドラッグで境界を動かして比較
- オーバーレイ: 透過度を調整して重ね合わせ比較
diff画面からhunk単位で選択してチャットに添付する機能もあり、「この変更についてこうして」といった指示がしやすくなってます。
途中からCC PocketでCC Pocketの開発を行っている
最低限Claude Codeを使えるようにしてからは、CC Pocketの開発自体をCC Pocketで行ってます。
自分で使うことで「ここの操作が面倒」「この情報が足りない」といった不満が見つかり、それを即座にCC Pocket自身で修正する、というサイクルが回ってます。
使い方
1. tailscaleでmacとスマホを接続する
macとスマホ間はtailscale等で繋いでいることを前提としています。
moshiとかで導入済みな人が多いはず？
家で使うだけなら同じWifiで繋がっていればOKなので、このステップは不要です。
2. ブリッジサーバーをmacで起動
mac上でclaude sdkやcodex app-serverを制御するCC Pocket用のサーバーです
以下のコマンドで起動できます
起動後はQRコードや接続先が表示されます
npx @ccpocket/bridge@latest
(BRIDGE_DEMO_MODEを有効にするとTailscale IPやAPIキーがQRコードから除外されるので、デモ動画の撮影時などに便利です)
追記
Tailscale IP別に隠さなくていいらしいです（ニワカだった…）
3. CC Pocketをブリッジサーバーに接続しセッションを始める
起動画面にQRコードの読み取りボタンがあるので、ブリッジサーバーに表示されているQRコードを読み込むと接続できるはずです。
その後は+ボタンで新しいセッションを始めるか、mac上で作ったセッションの履歴が表示されているはずなのでそちらからセッションを再開します。
インストール方法
Storeで公開中です！（iOS審査やたら時間かかった…）
リポジトリも公開してるので、よかったらスターください
まとめ
iPhone Fold欲しい
Discussion