やること
・スマホからClaude Codeの操作ができるように
・スマホから開発中の画面を確認できるように
・スマホからClaude Codeでアプリ開発をする
前提
GitHub Codespacesは無料枠があり、それを超えると1時間26円(最小限の2コア環境)掛かります。
無料枠と料金について
2コア(後述の仮想マシンスペック)だと無料枠60時間
プラス1時間で26円
手順
PCブラウザから作業したいGithubリポジトリを開く
URLのgithub.comをgithub.devに変更
https://github.com/ユーザー名/リポジトリ名
https://github.dev/ユーザー名/リポジトリ名
ブラウザ版のVSCodeが開く
右上の右から２つ目のパネル切り替えを選択
ターミナルのGitHub Codespacesで作業を続けるを選択
コマンドパレットでマシンの種類を選択（自分は2coreを選択しました）
マシンの種類について
[メモ]GitHub Codespacesの停止方法
停止方法を記載しますが、デフォルトは30分操作しなかったら停止されます。
codespacesの管理画面からStop codespaceを選択
起動するときはCodespaceの名前を選択
Claude Codeを使えるようにする
ターミナルからClaude Codeのインストール
npm install -g @anthropic-ai/claude-code
ClaudeCodeを起動
Claude Codeの初期設定
Claudeのアカウント認証
ブラウザが開いて承認するとエラーになります。
ターミナルに表示されている長いURLで再度認証する
認証後に表示されたコードをターミナルに貼り付ける
設定をエンターで進めるとClaude Codeが使えるようになります
URLをコピーしてスマホのChromeやSafariから開いて、ターミナルからclaudeを起動
claude
うおおぉお！テンション上がる
開発中の画面をスマホから見れるように
個人的にはスマホから開発サーバー起動して「ブラウザで表示」ボタンから表示する方法が楽でした
npm run dev
PCブラウザの場合は、サーバー起動後
ポートタブの3000番から地球儀🌐アイコンを選択
Continueを選択
ブラウザで表示された画面のURLを、スマホのブラウザで開く
iPhoneの場合、VSCodeのショートカットをホーム画面に作成すると便利でした
スマホからClaude Codeでアプリ開発
地図の下に車や電車でのアクセス情報を追加したい
Claude Codeに指示
実装完了！
画面で確認→アクセス情報が追加されている
楽しすぎる
スマホでAI駆動開発する体験が楽しすぎるので、ぜひやってみてください！