スマホ片手にフリースタイルでAI Agentでコーディングする環境をつくる。
オチ
- code-serverをいれる
- claude codeをいれる
様子
あらすじ
我々はスマホでごろ寝コーディングがしたい(主語がでかい)。
しかしながらスマホでコードをポチポチするのは苦行であり、もっと楽にやりたい、なんなら音声入力でどうにかしたい。
となると、昨今はやりのAI Agentをつかったコーディングが選択肢にあがる。
すでにDevinやReplit がそういった体験を提供しているが、どちらも結構お高いし、「本当に俺はスマホでそんなにソースコード書くのか？」とか、「金はともかく、GitHubやSlackと連携させるのか？(Devin)」とか、「コードが読みにくい(Replit)」とか「PHPを書けない…だと…？(Replit)」という様々な問題があって自分には微妙だった。
そこで私が試したのがcode-serverとclaude codeだった
概要
code-serverはいわゆるVSCodeのモンキーモデルを自分のサーバーに構築し、ウェブブラウザでアクセスすることでVSCodeっぽいものを操作できるものである。
これは本当に簡単にインストールできる。
次に、Claude codeである、これも超簡単にインストールが可能である。
うろおぼえだが、Linux boxがあると仮定して、これくらいで終わる
# super userで実行
curl -fsSL https://code-server.dev/install.sh | sh
# 一般(あなたのユーザー)で実行
sudo systemctl enable --now code-server@$USER
# super userで実行(するのは本当はよくないが、自分は本件専用のVMでつかっているので理解の上)
apt install -y npm
npm install -g @anthropic-ai/claude-code
あとは ~/.config/code-server/config.yaml にパスワードが生成されているのでそれをメモし、
http://{IPアドレス}:8080/
をひらけばOKである。
claude codeは、プロジェクトのdirectoryに移動した上で、シェルから claude とすれば起動する。(super userでインストールしていたら、Pathは通っているとおもう、多分)
Claude codeログイン時の注意
Claudeの認証をブラウザで行う必要があるが、その際には初回実行時に表示されるURLを「コピペして」ひらいて認証するほうがよい。
そのときに認可するコードが表示されるので、それをコピペしてClaude codeのTUIにもどってペーストすれば認証される。
(私はCodeのTerminalから試したとき、PCのブラウザが起動して認可できたが、Callbackがちゃんとうごかなかった)
まあ、このあたりの初期設定はPCでやったほうがよい。
code-serverの注意
VSCodeとは似て非なるものである。Syncはサポートされていないし、拡張もうごかないものが多い(Roo codeとかもうごかない…)
だからこそ、Claude codeがTUIで動くのが光るのだが。
なんなら、コードを生成させるだけならsshクライアントでつないでやったほうがよい、CodeのTerminalパネルはスクロールがちゃんとうごかないからだ。
Codeはあくまでも生成したコードをビューワーとしてみたり、ポートフォワードにつかうのがよいのではないか？
(なお、金をはらってSaasをつかうなら、色々他にもあるので、( https://codeanywhere.com/ とか、https://coder.com/ とか) 色々試してみると良いと思う。ただ、試した限りcode-serverがいっちゃん楽だった)
SSHクライアント
どのようなものでもよいとはおもうのだが、私はiOSの WebSSHというアプリが良い感じだった。
スマホでClaude codeをつかうときに
- 日本語の入力が音声入力でもできる
- カーソルキーが使いやすい
- タブが使いやすい
というのが重要だとおもうからだ。とはいえどんなクライアントでも良いと思う。
あとはお好きに
ブラウザでCodeをひらき、左ペインからDirectoryをOpenして、Terminal Paneから claudeを起動するだけである(あるいは、前述の通りssh clientで実行してもよい)。
あとは普通のAgent型のプログラミングと同じである。好きにプロンプトをいれて、Enterでガンガン許可してプログラミングさせよう。
さまざまなSaas的なAgentプログラミングと異なり、あくまでも自分のPC(サーバー)で実行しているので、その環境にDockerがあればDockerで開発できるし、PHPがはいっていればPHPで開発できる。
え、Linuxわからない？Dockerの入れ方がわからない？それもClaude codeにきけば解決するぞ。つまりClaude codeをいれたらあとは全部claude codeに「Dockerいれて」とかいえばよいのだ。あとはEnterをおしていれば(運がわるくないなら)うごくぞ。
まとめ
これで簡単なPoCとかを気軽にスマホで書けるぞ！！最高！！
しかも普通のLinuxの上でうごいているから、本物のVSCodeがほしい場合はsshでremoteすればよいだけです！便利！！(勿論、それならばRoo Codeとかもつかえる)
ただし、インターネットにPublic IPでつながっている生のサーバーでcode-serverをたてるのはセキュリティ的にあんまりお勧めはしないので注意してください
おまけ
私は余っていたPCにProxmox(VM ホスト専用のLinux)をいれ、そこに この環境専用の LinuxのVMをたてて、Tailscaleで接続できるようにしている。
TailscaleはPCだけでなくスマホで使えるし、Firewallのことをかんがえなくて済むので便利である。
(ただし、2025-03-09 時点での注意 このISSUEはみておいたほうがよい、最新版だとうごかなかったので、一個前のバージョンを私はいれた)
そしてVMなので、Agentがおかしくなって全部を破壊するようなコマンドを発行してもスナップショットから復活させるだけである、最高。
この辺りのことは割愛するが、興味がある人は是非しらべてみてほしい。
Discussion