概要
少し前に「Claude Code on the web」なるものがデビューしたらしいのでちょっと触ってみる。
前提
- Claude CodeのProプラン、Maxプランを契約していること
- Githubのアカウントを持っていること
- ClaudeのアカウントとGithubのアカウントが紐付いていること
方法
-
下記にアクセスして「Githubに接続」をクリック
-
内容を確認し、ご自身の責任で「Authorize Claude」を押下
-
ネットワーク接続系の設定を選択する必要があるらしい、とりあえず「おすすめ」を選択
-
下記のような画面が開く
-
下記の赤矢印部分で自分のアカウントのパブリックリポジトリを選択する事ができる（プライベートリポジトリは一覧に出ないが「リポジトリが見つかりませんか？プライベートリポジトリにClaude GitHubアプリをインストールすると、ここからアクセスできるようになります。」と書かれているのでパブリックリポジトリしか命令できないというわけではなさそう。）
-
今回動作を試すためにGithubにこちらのリポジトリを作った（リモートリポジトリを作っただけで初回コミットもない状態）
-
検索でヒットしたリポジトリを選択
-
とりあえず「Hello "Claude Code on the web"」を表示するHTMLとCSSを用意してもらおうと思うので下記の様にお願いしてみる
「Hello "Claude Code on the web"」を表示するhtmlとcssを用意してください
-
入力後に「Enter」を押下したところ下記のようなダイアログが出たので「アプリをインストール」をクリックして従ってみる
-
別タブでGithubが開くので自身のアカウントを選択
-
現存するすべてのリポジトリにClaude Codeのアプリを入れることもできるらしいがとりあえず今回用意したリポジトリを指定していれてみる
-
Claude Code on the webの画面に戻ると下記の様にでていたのでうまくいったっぽい
-
下記の赤矢印部分をクリックして「Enter」を押下してみる
-
リポジトリを読んでから実装が始まった模様（この間もリポジトリの選択や命令の入力が可能っぽい。これが噂の「並列実行」）
-
勝手にブランチを作って作業してくれた模様
-
リポジトリを見てみるとたしかに作業がされてブランチの作成、コミット、プッシュも終わっている
-
ただ「リモートリポジトリを用意してデフォルトブランチのpush」もしなかったのでClaude Codeが作成したブランチがデフォルトブランチとして扱われてしまった
-
この状態は困るのでローカルリポジトリ作って、mainブランチ作って、pushしてGithub上でmainブランチをデフォルトブランチに設定した（mainブランチ作成もローカルPCにてClaude Codeを使って作成した）
-
on the webの画面に戻ってプルリクを作ってみる
-
Githubの画面が開くのでプルリクを手動で作る事ができそうだった（mainブランチも作らずに色々作業してしまったのでこのままだとプルリクは作れなさそうだが。。）
-
その後on the webにお願いして作業ブランチをmainから切り直してもらったらいい感じにPR作成画面まで遷移できた（プルリクタイトルやプルリク説明もちゃんと入っていた。）
-
ちなみに作ってもらったHTML + CSSのペライチはこちら
参考文献