【Claude Code 連載 第25回】Claude Code をウェブで始める(claude-code-on-the-web / 入門)

スポンサーリンク
【Claude Code 連載 第25回】Claude Code をウェブで始める(claude-code-on-the-web / 入門) 用語解説
【Claude Code 連載 第25回】Claude Code をウェブで始める(claude-code-on-the-web / 入門)
この記事は約8分で読めます。
よっしー
よっしー

こんにちは。よっしーです(^^)

スポンサーリンク

背景

この連載では、Claude Codeの公式ドキュメントを1ページずつ読み解いていきます。公式ドキュメントは情報が網羅されている分、「結局どの機能を、どんな場面で使えばいいのか」は自分で考える必要があり、読むのに意外と時間がかかります。そこで、私が実務で使うために読み込んだ内容を「使う場面→実例コード」の順に整理して残していくことにしました。専門家の解説というより、一次情報を読んだ記録です。推測や動作を確認していない部分には、その都度そう書きます。

一言でいうと何か

自分のマシンではなく、Anthropic が管理するクラウドの仮想マシンで Claude Code を動かし、ブラウザや Claude モバイルアプリ(claude.ai/code)からタスクを送る仕組みです。GitHub リポジトリを接続すると、Claude がそれを分離された VM にクローンし、変更を加え、レビュー用のブランチをプッシュします。ローカルのセットアップは不要で、セッションはデバイス間で永続化されるため、ラップトップで始めたタスクを後でスマホからレビューできます。なお元ページによれば、この機能は研究プレビュー段階です。

どういう場面で役立つか

複数の独立したタスクを同時に回したいとき。各タスクが独自のセッションとブランチを取得するため、複数の worktree を自分で管理せずに並列で進められます。

手元にクローンしていないリポジトリで作業したいとき。Claude がセッションごとにリポジトリを新規クローンするため、チェックアウトの手間が要りません。コードベースの理解や実装のトレースといった「コードの質問・探索」も、ローカルチェックアウトなしで行えます。

明確に定義できて、頻繁な舵取りが要らないタスクを投げて放置したいとき。タスクを送って別のことをし、完了したら結果をレビューする、という進め方に向きます。

不要・向かないケース:ローカルの設定・ツール・環境が必要な作業には向かず、その場合は Claude Code をローカルで実行するか Remote Control を使うほうが適します(元ページの明記)。GitHub を全く接続したくない場合も Remote Control が案内されています。また Zero Data Retention が有効な組織は、/web-setup を含むクラウドセッション機能を利用できません。

セットアップと実行の実例

前提条件と実行方法の比較

利用対象は Pro・Max・Team、および premium seats または Chat + Claude Code seats を持つ Enterprise ユーザー(研究プレビュー)です。開始には GitHub リポジトリが必要です。新規プロジェクトなら、先に GitHub で空のリポジトリを作成しておきます。

元ページは実行方法を「On the web / Remote Control / Terminal CLI / Desktop app」で比較しています。要点は、On the web は Anthropic クラウド VM で動き、ローカル設定は使わず(リポジトリのみ)、GitHub が必要で、切断しても動き続け、権限モードは Accept edits・Plan・Auto、ネットワークは環境ごとに設定可能、という点です。ローカルで動く他方式とはこの「実行場所」と「ローカル設定の可否」が主な違いになります。

セッションが動く流れ

タスクを送ると、(1) リポジトリが VM にクローンされ、設定があればセットアップスクリプトが実行され、(2) 環境のアクセスレベルに基づいてネットワークが設定され、(3) Claude が分析・変更・テスト実行・自己チェックを行い(全体を監視・舵取りしても、完了後に戻ってきてもよい)、(4) 停止ポイントでブランチを GitHub にプッシュします。ブランチをプッシュしてもセッションは閉じず、PR 作成やさらなる編集は同じ会話の中で続けられます。

GitHub 接続と環境作成(2つの経路)

セットアップは1回限りです。ブラウザからは、claude.ai/code にサインインし、プロンプトに従って Claude GitHub App をインストールしてリポジトリアクセスを許可し、続いてクラウド環境を作成します。環境作成フォームには、表示名の Name、セッションが到達できる範囲を決める Network access(既定の Trusted は npm・PyPI・RubyGems などの一般的なパッケージレジストリへの接続を許しつつ、一般的なインターネットアクセスはブロック)、全セッションで使える Environment variables(.env 形式。値をクォートで囲むとクォートごと保存されるので囲まない)、Claude Code 起動前に走る Setup script(VM に無いシステムツールの導入用。結果はキャッシュされ毎回は再実行されない)があります。最初はデフォルトのまま Create environment で作れます。

すでに GitHub CLI(gh)を使っているなら、ブラウザを開かずターミナルからセットアップできます。まだなら GitHub CLI を認証します。

gh auth login

次に Claude Code CLI で /login を実行して claude.ai アカウントにサインインし(サインイン済みなら不要)、続いて次を実行します。

/web-setup

/web-setup はローカルの gh トークンを Claude アカウントに同期し、クラウド環境がまだ無ければ Trusted ネットワークアクセスかつセットアップスクリプト無しの環境を作成します。GitHub CLI が未インストール/未認証ならブラウザのオンボーディングフローが開きます。完了後は、--cloud でターミナルからクラウドセッションを開始したり、/schedule で定期タスクを設定したりできます。

タスクを送る

GitHub 接続と環境作成が済んだら、claude.ai/code またはモバイルアプリの Code タブでリポジトリ(とブランチ)を選び、権限モードを選んでタスクを説明します。モードは既定が Accept edits(承認を待たず変更してブランチをプッシュ)で、アプローチ提案と編集前の許可待ちにしたいなら Plan Mode に切り替えます(クラウドセッションは Manual・Bypass を提供しません)。タスク説明は具体的にするほど良く、ファイルや関数名を挙げる、エラー出力を貼る、症状でなく期待動作を書く、といった指定が推奨されています。各タスクは独自のセッションとブランチを取得します。

セッションを事前入力する(URL クエリ)

claude.ai/code の URL にクエリパラメータを付けると、新しいセッションのプロンプト・リポジトリ・環境を事前入力できます(issue tracker のボタンなどの統合構築に使えます)。主なパラメータは、プロンプトを入れる prompt(別名 q)、長いプロンプトを取得する URL を指す prompt_url、事前選択する owner/repo を並べる repositories(別名 repo)、事前選択する環境名/ID の environment です。各値は URL エンコードします。

https://claude.ai/code?prompt=Fix%20the%20login%20bug&repositories=acme/webapp

この例は、プロンプトとリポジトリが選択済みの状態でフォームを開きます。

レビューと反復

Claude が停止したら、diff インジケーター(例 +42 -18)を選んで diff ビューを開き、左のファイルリストと右の変更を確認します。diff 内の任意の行を選んでフィードバックを入力すると、次のメッセージ送信までキューされてまとめて渡されます(Claude は src/auth.ts:47 のような位置情報つきで受け取るため、どこの話かを説明せずに済みます)。diff が良ければ diff ビュー上部の Create PR で PR を作成でき、PR 作成後もセッションはライブのままなので、CI 失敗やレビュアーのコメントを貼って対応を依頼できます。

トラブルシューティング(要点)

元ページはセットアップ時のつまずきを個別に列挙しています。大別すると、GitHub 接続まわり(接続アカウントがそのリポジトリにアクセスできるか、Auto-fix には App のインストールが必要、Private も Public と同じ認可が必要)、認証まわり(/web-setup が「Unknown command」等になるのは Claude Code CLI 内で実行していない、または claude.ai サブスクリプションでサインインしていないため。/login で解決)、環境作成の失敗(/web-setup で手動作成、またはブラウザの Create environment 手順)、セットアップスクリプト(0以外終了で開始をブロック。set -x でデバッグ、非必須コマンドは || true、重い処理は並列化や SessionStart フックへ移してキャッシュ構築の約5分予算に収める)に整理できます。なお「タブを閉じてもセッションが動き続ける」のは仕様で、不要なら archive/delete できます。個別メッセージと対処の全文は公式ページを参照してください。

まとめ

Claude Code on the web は、GitHub リポジトリを接続してクラウド VM 上でタスクを回し、ブランチのプッシュから PR 作成・反復まで同じ会話の中で完結させる、ローカル不要の実行方式です(研究プレビュー)。並列タスク、クローンしていないリポジトリ、放置できる明確なタスク、コードの探索に向き、ローカル設定が要る作業や GitHub を使いたくない場合はローカル実行や Remote Control が案内されます。セットアップはブラウザ経由か、gh auth login/web-setup によるターミナル経由の2通りです。次のステップとして、完全リファレンス・Routines(自動化)・CLAUDE.md(常設の指示)が挙げられています。

次回は、この入門ページが「完全なリファレンス」として案内している「Use Claude Code on the web」(/docs/ja/claude-code-on-the-web)本編を取り上げる予定です。


この記事は執筆時点の公式ドキュメントに基づいています。最新の情報は必ず公式ドキュメントをご確認ください。

よっしー
よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)

コメント

タイトルとURLをコピーしました