Claude Code on the webを触ってみた
びーぐるです🐶
2025年10月21日、Anthropic社が提供するAIモデルClaudeを利用したAIコーディングエージェントClaude Code on the webがリサーチプレビューとして公開されました。
このサービスはクラウド型AIコーディングエージェントと呼ばれるもので、ブラウザやiOSのアプリから直接アクセスできる手軽さが特徴です。
現時点ではAndroidアプリ版からは利用できないようです…残念。
本記事では、Claude Code on the webを実際にセットアップし、試してみます。
本当にただ触っただけの記事になりますが、ご了承ください。
後日の記事ではAnthropic社の参入で一層注目されつつあるクラウド型AIコーディングエージェントについて考察したいと思います。
Claude Code on the web(CC on the web)とは？
冒頭で説明した通り、Anthropic社が提供するクラウド型AIコーディングエージェントです。
現在リサーチプレビューのベータ版であり、ProおよびMaxプランのユーザーが利用可能です。
ブラウザからは以下のURLからアクセスできます。
また、詳細なドキュメントは以下にあります。
以下、長いのでCC on the webと略します。
クラウド型AIコーディングエージェントとは？
クラウド型AIコーディングエージェントとは、その名の通りクラウド上で動作するAIコーディングエージェントのことを指します。
一般的にAIコーディングエージェントといえば、Claude CodeのようなCLIツール、GitHub CopilotのようなIDEプラグイン、もしくはCursorのようにIDE自体として提供されているのを思い浮かべるかと思います。
クラウド型のAIコーディングエージェントは、これらとは異なり環境構築やインストールやセットアップが不要で、ブラウザやアプリから直接利用できる手軽さがあります。
主要なモデルプロバイダーからはOpenAIのCodex(Cloud), GoogleのJulesが提供されており、その他DevinやReplit等、多数のサービスが存在します。
当然、慣れ親しんだターミナルの補完性能やIDEの機能は利用できませんが、どこからでもスマホ一つでアクセスできる利便性は魅力でしょう。
CC on the webの導入方法
当然ながら、すでに各サービスのアカウントを持っている場合はそのまま利用可能です。
また、Claudeの他のサービスで既にGitHubアカウントを連携している場合は、一部のプロセスを省略できるはずです。
- GitHubアカウントを作成
CC on the webを利用するためには、GitHubの利用が必須です。
-
Anthropicのアカウントを作成し、ProまたはMaxプランに加入
最安のProプランは月額20ドルです。 -
https://claude.ai/code にアクセスし、Connect to GitHubボタンからアカウントと連携
Claudeのトップページのサイドバーから </>コード というメニューを選択して連携画面へ進むこともできます。 -
GitHubにClaudeアプリをインストール
以下のURLにアクセスし、リポジトリにアクセスできるようにClaudeアプリをインストールします。
一度インストールすれば、以後新規作成したリポジトリであっても自動的に利用可能になります。
これで完了です。あとはチャット欄に指示を入力するだけで、コードの生成や修正、説明等を行ってくれます。
詳細な機能や仕様について
実際に利用する前に、知っておくと良いことをいくつか紹介します。
利用制限
CC on the webは、アカウント内の他のすべてのClaudeサービスと利用制限を共有しています。
CLIのClaude Codeと同様です。
タスクの並列実行
CC on the webでは、複数のタスクを並列で実行できます。
リポジトリAの作業を指示したあと、終わる前にリポジトリBの作業を指示することが可能です。
当然のことながら、複数のタスクを並行して実行すると利用制限に到達するまでの時間が早まりますので、使い所には注意が必要です。
セキュリティ
CC on the web内の各セッションは、独立してAnthropic社管理のバーチャルマシン上で実行されます。
各タスクごとにクラウド上のサンドボックスが用意されると考えれば良いでしょう。
ネットワークアクセスはデフォルトで信頼できる最低限のドメインのみに制限されています。
また、GitHub操作は専用のプロキシを用いて行われ、安全な操作が保証されています。
当然、突如メインブランチを上書きするような暴挙は許されていません。
高いセキュリティが確保されているため、企業内のコードベースであっても安心して利用できる設計となっているということです。
その他の事項
CC on the webの詳細な仕様については、以下のドキュメントに詳しく記載されています。
実際に使ってみた1 - Vibe Codingでヒットアンドブロー
では、実際にCC on the webを使ってみましょう。
私が最初にVibe Codingの企画に参加した際に作成させたのがヒットアンドブローでした。
当時はRoo CodeとGemini 2.5 Proを利用して開発しましたが、今回はCC on the webを使って同じアプリを作成してみます。
もう半年近くも前なのですが、Gemini 2.5 Proはまだ現役の最新モデルです😓
事前準備
まずはGitHub上に新規リポジトリを作成します。
GitHubから新規リポジトリを作成し、Add READMEをOnにしておきます。
これでMainブランチが追加された状態からスタートできます。
任意ですが、CC on the webもClaude.mdを利用できます。
リポジトリ上からClaude.mdを追加し、守ってほしい制約やルールを記述して保存します。
私は今回は
- 応答は日本語で行ってください
- 会話の最後に使用コンテキストとコンテキスト残量を通知してください
とだけ記載しました。
コンテキストに関してはOikonさんの以下のポストを参考にしました。ありがとうございます。
作成フェーズ
実際に作成していきます。
左側のチャット欄に、指示を入力します。
当時もこの程度のアプリケーションであれば、いわゆる狭義のVibe Codingで十分に作成可能でしたので、今回もVibe Codingスタイルで進めてみます。
今回は記述を忘れていますが、mainブランチのClaude.mdを参照するように指示したほうが良いかと思います。稀に無視されることがありますので。
指示を出すとPlanや環境構築等をいい感じに準備した後に実装を行ってくれます。
CLIよりは多少時間がかかりますが、それでも十分高速に完成します。
完成するとリポジトリ内にランダムな文字列が付与されたブランチが自動的に作成されますので、GitHub側から成果物を確認できます。
追加の指示や修正は、下部にあるチャット欄から行います。
このチャット欄にはCLIで開く、PRを作成ボタンがありますので、以下はこの2つの機能について説明します。
「CLIで開く」- セッションのローカルへの移行
CC on the webのセッションは、ローカルのClaude Codeに移行することも可能です。
まずはGitHub上にある現在の作業ブランチをローカルに引っ張ってきます。
そしてこの「CLIで開く」ボタンをクリックすると、クリップボードにclaudeコマンドがコピーされます。
あとは、ローカルのターミナルで作業ブランチに移動し、コマンドをペーストして実行すればこのセッションをローカルで再開できます。
git操作に慣れていないと難しいですが、とても便利な機能です。
「PRを作成」 - プルリクエストの実行
CC on the webで作成したブランチを、このボタンからプルリクエストとして提出できます。
当然、GitHub側から操作しても構いませんが、こちらのほうが手軽です。
このあとは通常通りレビュー→マージの流れになります。
今は多くのAIコードレビューツールがありますので、色々利用してみるとよいでしょう。
私はCodeRabbitを利用しています。パブリックリポジトリであれば無料で利用できます。
使い方はニケちゃんさんの記事が参考になります。
完成
一応動くものが完成しました。
ロジックの破綻や誤解が起こるかな…と少しだけ思ったのですが、特に問題なく動作しました。
「ゲームなのでモダンなUIで、遊ぶ楽しさを演出にて追加してください」は流石に無茶振りすぎたのか、ほどほどの実装です。
こだわるのであれば、何をどのようにするのか、明確に指示するべきです。
他のクラウドAIコーディングエージェントの作品
他のクラウド型AIコーディングエージェントでも同じものを同じプロンプトで作成してみました。
Codex(Cloud)
Jules
Jules版は同じ数字を使ってはいけないようです。
概ねバグもなく、同じようなものが作成できました。
実際に使ってみた2 - 座席表アプリケーション
続いて、もう少し実用的で複雑なものを試してみます。
室内にテーブルと椅子をおいて、座席表を作成できるアプリケーションを作成してみます。
今度はSDD(Spec駆動開発)で実装を行うように指示します。
SDDとはコードを書く前に仕様を定義し、実装計画を立てて、これらをドキュメント(仕様書)に落とし込んでからコーディングを行う手法です。
コーディングは必ず仕様書に従います。
座席表を作成できるアプリケーションを作成してください。
- 最初に会場があり、そこにテーブルを0～6個配置できるようにします
- テーブルには0～8個の「椅子」が配置できます
- 椅子にはメンバーを配置できます。
- メンバーは名前とXのIDを記述できます。
- Spec駆動開発を行ってください。具体的にはアプリケーションの要件定義をSpec.mdに、実装の仕様をDesign.mdに、実装計画をTasks.mdにまとめてからコーディングを行ってください。
- コーディングはこれらのドキュメントに従ってください。
- mainブランチのClaude.mdを参照してください
簡易的なSDDを指示しましたが、かなり詳細にドキュメントを作成したうえで実装を行ってくれました。
結構複雑なReactアプリケーションでバグるかな・・・と思ったのですが、一発でもそこそこうまく動作しました。
実際に使ってみた3 - バグの修正
「座席表アプリケーション」は完成後にいくつかの細かいバグが見つかりました。
CC on the webを使ってこれらのバグを修正依頼を出すと、都度直してくれます。
離席中や別作業中にCC on the webにバグを直してもらい、プルリクを上げてCodeRabbitでレビューして修正する、というサイクルでアプリケーションを改善していきました。
なお、今回の完成品とリポジトリは以下になります。
フォントが小さいのは…後日修正します
まとめ
今回はClaude Code on the webを実際に試してみました。
思い立ったときにスマホからでもコーディングをさせられる手軽さは魅力的で、性能面でも十分に実用的であることが分かりました。
GitやGitHubの操作に慣れる必要はありますが、ビギナーやノンエンジニアにとってVibe Codingに続く新たな「武器」となる可能性を秘めていると考えています。
次の記事では、クラウド型AIコーディングエージェント全般についてもう少し深く考察できればと思います。
Discussion