Claude Code UIにスマホからリモートアクセスする

公開日:
目次

スマホからClaude Code UIを使う方法を試してみたので、備忘録として残します。

既存の方法と課題

スマホからClaude Codeを使う方法はいくつかあります。

公式Web版 は設定不要で気軽に使えますが、GitHubリポジトリ限定でローカルファイルにアクセスできない等で機能にも制限があります。

SSH経由 でローカルPCに接続する方法もありますが、ターミナル操作が必要でスマホでは使いにくいです。

キーボードが使えない環境だとターミナル操作はしんどいです。

Claude Code UIで解決

Claude Code UIを使えば、GUI操作でClaude Codeを使えます。ローカルファイルにもアクセス可能で、スマホとの相性が良いです。

以下がスマホでの表示画面です。チャット形式でClaude Codeと対話できます。

Image from Gyazo

  • キーボード不要:タップ操作でファイル選択やGit操作ができる
  • 視認性が高い:ファイルエクスプローラーやコードが見やすく表示される
  • どこでも作業:外出先でもちょっとしたコード修正ができる

スマホからアクセスする仕組み

Claude Code UIはローカルPCで動作するため、そのままではスマホからアクセスできません。Cloudflare Tunnelを使うことで、インターネット経由でローカルサーバーに安全にアクセスできるようになります[1]

構成は以下のようになります。

スマホ(ブラウザ)
    ↓ HTTPS
Cloudflare Tunnel
    ↓
ローカルPC(Claude Code UI)
    ↓
Claude Code

Claude Code UIの起動

Claude Code UIをセットアップして起動します。詳しいセットアップ方法は下記を参照してください。

起動後、http://localhost:3001 でアクセスできます。

Cloudflare Tunnelの設定

Claude Code UIのインストールが完了したら、Cloudflare Tunnelを使ってローカルサーバーを外部に公開します。

cloudflaredをインストールします(Macの場合)。

brew install cloudflare/cloudflare/cloudflared

ローカルサーバーを公開します。

cloudflared tunnel --url http://localhost:3001

コマンド実行後、ターミナルに https://random-words.trycloudflare.com のような一時URLが表示されます。このURLにスマホのブラウザからアクセスすれば、Claude Code UIを操作できます。

使用上の留意点

Claude Code UIを使う際は、以下の点に注意してください。

  • PCの起動が必要:ローカルPCが起動していないとアクセスできません
  • ネットワーク環境:PCがインターネットに接続されている必要があります
  • セッションの初期化:新しいプロジェクトを使う場合は、事前にそのディレクトリで claude コマンドを一度実行しておく必要があります

固定URLと認証の設定

上記の方法では毎回URLが変わり、認証もないためセキュリティ上の懸念があります。独自ドメインを持っている場合は、Cloudflareダッシュボードから固定URLでのアクセスやメール認証の追加が可能です。

脚注
  1. Claude Code UI と Cloudflare Tunnelでスマホから快適にAIコーディング - Zenn ↩︎