はじめに
皆さんこんにちは！エンジニアの細川です。
皆さんはClaude Code使ってますか？
僕は数カ月前にClaude Codeのデモを見て感激して、絶賛趣味開発に利用中です！
普段Claude Codeを使っていると、「出先でスマホで開発を進められたらいいのに…」なんて思うことはありませんか？
ぱっと思いつくのは、スマホでterminalアプリを利用してssh接続などかと思いますが、スマホでterminal開いたりssh接続の設定をしたりするのって意外に面倒ですよね？
今回はClaude Code UIとVSCodeのLocal Port Forwardingを利用して手軽に出先でClaude Codeにアクセスし開発を行える方法についてご紹介します！
今回必要なもの
- Claude Code
- VSCode
- GitHubアカウント
- Claude Code UI ← 本記事でセットアップ手順を解説します
Claude Code UIとは？
Claude Code UIはClaude Code およびCursor CLI向けのデスクトップおよびモバイル向けのUIツールです。
アクティブなプロジェクトやセッションを表示して、自由に変更を加えることができます。レスポンシブデザインになっており、PCでもスマートフォンでも、優れたUIで開発を行うことができます。
Claude Codeは基本的にCLI上で動作しますが、Claude Code UIを利用することでチャットのような形式でClaude Codeを利用することができます。過去のセッションへのアクセスも容易で、いくつもterminalを開く必要はありません。
UI内にてGitのコミットやpush pullなども行えるので、開発がClaude Code UI内で完結します。
スマホでterminalを触るのはなかなか大変ですが、Claude Code UIなら、非常に触りやすく使い勝手もいいかと思います。
Claude Code UIの準備
では早速Claude Code UIのセットアップをしていきましょう！
前提
- Node.js v20以上
Claude Codeがインストールされて設定済みであること- もしくは
Cursor CLIがインストールされて設定済みであること
インストール方法
-
git clone https://github.com/siteboon/claudecodeui.git # ディレクトリに移動 cd claudecodeui -
依存関係のインストール
npm install -
envファイルの設定
cp .env.example .env # Edit .env with your preferred settings.env.exampleの中身はこちらです。適宜ポートなどは変更してください。# Backend server port (Express API + WebSocket server) #API server PORT=3001 #Frontend port VITE_PORT=5173 -
アプリケーションの開始
# Development mode (with hot reload) npm run dev -
ブラウザでアクセス
http://localhost:5173
ブラウザで初回アクセス時は、ユーザー名とパスワードを設定する必要があります。
また、セキュリティ上の理由でデフォルトではファイル更新などができないようになっているので、適宜設定から有効化してください。
これでシンプルなGUIでClaude Codeを利用することができます！
ローカルのポート開放
上記手順で同一ネットワーク内では接続できると思いますが、出先でスマホでも触れるといいですよね？
今回はローカルで動かしているClaude Code UIをVSCodeのLocal Port Forwardingという機能を使って外部からでもアクセス可能なようにしたいと思います。
Local Port ForwardingはClaude Code UIに限らず、ローカルで動かしているアプリなどを手軽に公開できる機能になっています。
今回はWSL上でアプリを動かしている場合の手順を解説します。
手順
-
まずアプリを起動します
今回は
Claude Code UIの想定です。僕はWSL上で
Claude Code UIを動かしているので、この時点でホスト側にポートが自動転送されます。(WSL上で起動したサービスにlocalhost:ポート番号でアクセス可能)
-
Ctrl + Shift + Nなどで、ホスト側でVSCodeを起動します。
-
Ctrl + Shift + @などでターミナルを起動し、ポートタブへ移動します
-
「ポートの転送」をクリックし、転送したい、ポート番号を入力します
今回は
Claude Code UIのデフォルトの5173を入力します -
すると初回はGithubへのサインインを求められます
ブラウザでContinue
Authorize Visual-Studio-Codeをクリックします。
-
しばらく待ってこの状態になれば、外部からアクセスすることができます
-
スマホでこのURLにアクセスすると、まずGitHubへのサインインを求められます
-
これで認証すると、次に以下のような画面が出るので続行をクリックします
-
これで、先ほど公開したページにアクセスすることができます。
-
Claude Code UIの場合、初回は最初に設定したユーザーネームとパスワードでログインする必要があります。(これは接続するアプリケーションによります。)
-
ログインするとスマホでもClaude Codeを利用することができます！
スマホで見やすいようにレイアウトが調整されていますね！
他の方法とのメリット・デメリット
こちらの記事などでClaude Code UIを用いてスマホで接続する方法を共有してくださっていました。
こちらの記事などと違うポイントについては外部公開の方法になります。
参考にさせていただいた記事では、Cloudflare Tunnelというツールを利用されていました。
Cloudflare Tunnelを利用するには独自ドメインが必要になります。(なしでも利用することはできますが、安定的に利用するには必要です)
Cloudflare TunnelとVSCodeのLocal Port Forwardingのメリットデメリットをまとめてみました！
| 方式 | メリット | デメリット |
|---|---|---|
| Cloudflare Tunnel |
設定によってはかなりセキュアに運用できる ドメインを登録すれば、URLが毎回変わらない |
ドメインの準備が必要
|
| VSCodeのLocalPortForwarding |
セットアップの手間がほぼない 何も設定しなくてもデフォルトで認証必須で公開可能 |
URLが毎回変わる デフォルト以上の安全策を講じるのが手間 |
Cloudflareを使い慣れている方にとってはCloudflareを使われた方がいいかと思いますが、知識がない状態で設定するとセキュリティリスクが怖かったので、今回はデフォルトで認証必須のLocal Port Forwardingを採用しました。
まとめ
Claude Code UIを利用するとGUIでClaude Codeを使える！Local Port Forwardingでセットアップほぼなしでローカルのポートをセキュアに公開できる！
今後の展望
まだ、Claude Code UIを試し始めたところなので、詳しい使い方はまだまだ分からない点が多いです。今現時点で以下の問題があり、いろいろ試行錯誤していきたいと思います！
- Gitコマンド実行時のsshキーのパスフレーズ入力をUIからできない
- devContainer内で利用していたセッションにアクセスできない。
おわりに
今回は、Claude Codeを外出先でスマホからでも利用できる方法を紹介しました！
これで、ローカルで起動さえしておけばスマホで開発が進みますね！
皆さんもぜひ使ってみてください！
他にもClaude Codeやその他生成AIに関する様々な情報を公開していますので、ぜひご覧ください！(リンクはこちら)
今回参考にさせていただいた記事
- https://zenn.dev/nogu66/articles/claudecodeui
- https://qiita.com/sigeta/items/d9c673c1f9dde80e1291
- https://github.com/siteboon/claudecodeui
