ウェブ上の Claude Code

​

ウェブ上の Claude Code とは？

• 質問への回答：コードアーキテクチャと機能の実装方法について質問する
• バグ修正とルーチンタスク：頻繁な操舵を必要としない明確に定義されたタスク
• 並列作業：複数のバグ修正を並列で処理する
• ローカルマシンにないリポジトリ：ローカルにチェックアウトしていないコードで作業する
• バックエンド変更：Claude Code がテストを作成してからそのテストに合格するコードを作成できる場所

​

ウェブ上の Claude Code は誰が使用できますか？

• Pro ユーザー
• Max ユーザー
• Team ユーザー
• Enterprise ユーザー（プレミアムシートまたは Chat + Claude Code シート付き）

​

はじめに

​

ブラウザから

1. claude.ai/code にアクセスします
2. GitHub アカウントを接続します
3. リポジトリに Claude GitHub アプリをインストールします
4. デフォルト環境を選択します
5. コーディングタスクを送信します
6. diff ビューで変更を確認し、コメントで反復処理してから、プルリクエストを作成します

​

ターミナルから

​

仕組み

1. リポジトリのクローン：リポジトリが Anthropic 管理の仮想マシンにクローンされます
2. 環境セットアップ：Claude はコードを含むセキュアなクラウド環境を準備し、設定されている場合はセットアップスクリプトを実行します
3. ネットワーク設定：インターネットアクセスは設定に基づいて構成されます
4. タスク実行：Claude はコードを分析し、変更を加え、テストを実行し、その作業を確認します
5. 完了：完了時に通知され、変更を含むプルリクエストを作成できます
6. 結果：変更がブランチにプッシュされ、プルリクエスト作成の準備ができます

​

diff ビューで変更を確認する

• ファイルごとに変更を確認する
• 特定の変更にコメントして修正をリクエストする
• 表示内容に基づいて Claude との反復処理を続行する

​

Auto-fix プルリクエスト

• ウェブ上の Claude Code で作成された PR：CI ステータスバーを開き、Auto-fix を選択します
• モバイルアプリから：Claude に PR を auto-fix するよう指示します。例えば「watch this PR and fix any CI failures or review comments」
• 既存の PR：PR URL をセッションに貼り付けて、Claude に auto-fix するよう指示します

​

Claude が PR アクティビティにどのように応答するか

• 明確な修正：Claude が修正に確信があり、以前の指示と矛盾しない場合、Claude は変更を加え、プッシュし、セッションで何が行われたかを説明します
• 曖昧なリクエスト：レビュアーのコメントが複数の方法で解釈される可能性がある場合、または建築的に重要なものが含まれている場合、Claude は行動する前にあなたに尋ねます
• 重複または無アクション イベント：イベントが重複している場合、または変更が不要な場合、Claude はセッションでそれを記録して続行します

​

ウェブとターミナル間でタスクを移動する

​

ターミナルからウェブへ

claude --remote "Fix the authentication bug in src/auth/login.ts"

​

リモートタスクのヒント

claude --permission-mode plan

claude --remote "Execute the migration plan in docs/migration-plan.md"

claude --remote "Fix the flaky test in auth.spec.ts"
claude --remote "Update the API documentation"
claude --remote "Refactor the logger to use structured output"

​

ウェブからターミナルへ

• /teleport を使用する：Claude Code 内から /teleport（または /tp）を実行して、ウェブセッションのインタラクティブピッカーを表示します。コミットされていない変更がある場合は、最初にそれらをスタッシュするよう求められます。
• --teleport を使用する：コマンドラインから claude --teleport を実行してインタラクティブセッションピッカーを表示するか、claude --teleport <session-id> を実行して特定のセッションを直接再開します。
• /tasks から：/tasks を実行してバックグラウンドセッションを表示し、t を押してセッションにテレポートします
• ウェブインターフェースから：「Open in CLI」をクリックしてターミナルに貼り付けられるコマンドをコピーします

​

テレポートの要件

​

セッションの共有

​

Enterprise または Teams アカウントから共有する

​

Max または Pro アカウントから共有する

​

ウェブ上で定期的なタスクをスケジュールする

​

セッションの管理

​

セッションのアーカイブ

​

セッションの削除

• サイドバーから：アーカイブされたセッションをフィルタリングし、削除するセッションにマウスを合わせて削除アイコンをクリックします
• セッションメニューから：セッションを開き、セッションタイトルの横のドロップダウンをクリックして、削除を選択します

​

クラウド環境

​

デフォルトイメージ

• 一般的なプログラミング言語とランタイム
• 一般的なビルドツールとパッケージマネージャー
• テストフレームワークとリンター

​

利用可能なツールの確認

check-tools

• プログラミング言語とそのバージョン
• 利用可能なパッケージマネージャー
• インストールされた開発ツール

​

言語固有のセットアップ

• Python：pip、poetry、および一般的な科学ライブラリを備えた Python 3.x
• Node.js：npm、yarn、pnpm、および bun を備えた最新 LTS バージョン
• Ruby：バージョン 3.1.6、3.2.6、3.3.6（デフォルト：3.3.6）、gem、bundler、およびバージョン管理用の rbenv
• PHP：バージョン 8.4.14
• Java：Maven および Gradle を備えた OpenJDK
• Go：モジュールサポート付きの最新安定版
• Rust：cargo を備えた Rust ツールチェーン
• C++：GCC および Clang コンパイラ

​

データベース

• PostgreSQL：バージョン 16
• Redis：バージョン 7.0

​

環境設定

1. 環境準備：リポジトリをクローンし、設定されているセットアップスクリプトを実行します。リポジトリは GitHub リポジトリのデフォルトブランチでクローンされます。特定のブランチをチェックアウトする場合は、プロンプトで指定できます。
2. ネットワーク設定：エージェントのインターネットアクセスを設定します。インターネットアクセスはデフォルトで制限されていますが、ニーズに基づいて環境をインターネットなしまたは完全なインターネットアクセスを持つように設定できます。
3. Claude Code 実行：Claude Code を実行してタスクを完了し、コードを作成し、テストを実行し、その作業を確認します。ウェブインターフェースを通じてセッション全体で Claude をガイドおよび操舵できます。Claude は CLAUDE.md で定義したコンテキストを尊重します。
4. 結果：Claude が作業を完了すると、ブランチをリモートにプッシュします。ブランチの PR を作成できるようになります。

API_KEY=your_api_key
DEBUG=true

​

セットアップスクリプト

#!/bin/bash
apt update && apt install -y gh

​

セットアップスクリプト対 SessionStart フック

​

依存関係管理

#!/bin/bash
npm install
pip install -r requirements.txt

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh"
          }
        ]
      }
    ]
  }
}

#!/bin/bash

# Only run in remote environments
if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
  exit 0
fi

npm install
pip install -r requirements.txt
exit 0

​

環境変数を永続化する

​

依存関係管理の制限

• すべてのセッションに対してフックが発火する：SessionStart フックはローカルとリモート環境の両方で実行されます。リモートセッションのみにフックをスコープするフック設定はありません。ローカル実行をスキップするには、上記のように CLAUDE_CODE_REMOTE 環境変数をスクリプトで確認します。
• ネットワークアクセスが必要：インストールコマンドはパッケージレジストリに到達するためにネットワークアクセスが必要です。環境が「No internet」アクセスで設定されている場合、これらのフックは失敗します。「Limited」（デフォルト）または「Full」ネットワークアクセスを使用します。デフォルト許可リストには npm、PyPI、RubyGems、crates.io などの一般的なレジストリが含まれます。
• プロキシ互換性：リモート環境のすべてのアウトバウンドトラフィックはセキュリティプロキシを通じて渡されます。一部のパッケージマネージャーはこのプロキシで正しく機能しません。Bun は既知の例です。
• すべてのセッション開始時に実行：フックはセッションが開始または再開されるたびに実行され、スタートアップレイテンシーが追加されます。依存関係が既に存在するかどうかを確認してから再インストールすることで、インストールスクリプトを高速に保ちます。

​

ネットワークアクセスとセキュリティ

​

ネットワークポリシー

​

GitHub プロキシ

• GitHub 認証をセキュアに管理します。git クライアントはサンドボックス内のスコープ付き認証情報を使用し、プロキシはそれを検証して実際の GitHub 認証トークンに変換します
• 安全性のため git push 操作を現在のワーキングブランチに制限します
• セキュリティ境界を維持しながらシームレスなクローン、フェッチ、PR 操作を有効にします

​

セキュリティプロキシ

• 悪意のあるリクエストに対する保護
• レート制限と不正使用防止
• 強化されたセキュリティのためのコンテンツフィルタリング

​

アクセスレベル

​

デフォルト許可ドメイン

​

Anthropic サービス

• api.anthropic.com
• statsig.anthropic.com
• platform.claude.com
• code.claude.com
• claude.ai

​

バージョン管理

• github.com
• www.github.com
• api.github.com
• npm.pkg.github.com
• raw.githubusercontent.com
• pkg-npm.githubusercontent.com
• objects.githubusercontent.com
• codeload.github.com
• avatars.githubusercontent.com
• camo.githubusercontent.com
• gist.github.com
• gitlab.com
• www.gitlab.com
• registry.gitlab.com
• bitbucket.org
• www.bitbucket.org
• api.bitbucket.org

​

コンテナレジストリ

• registry-1.docker.io
• auth.docker.io
• index.docker.io
• hub.docker.com
• www.docker.com
• production.cloudflare.docker.com
• download.docker.com
• gcr.io
• *.gcr.io
• ghcr.io
• mcr.microsoft.com
• *.data.mcr.microsoft.com
• public.ecr.aws

​

クラウドプラットフォーム

• cloud.google.com
• accounts.google.com
• gcloud.google.com
• *.googleapis.com
• storage.googleapis.com
• compute.googleapis.com
• container.googleapis.com
• azure.com
• portal.azure.com
• microsoft.com
• www.microsoft.com
• *.microsoftonline.com
• packages.microsoft.com
• dotnet.microsoft.com
• dot.net
• visualstudio.com
• dev.azure.com
• *.amazonaws.com
• *.api.aws
• oracle.com
• www.oracle.com
• java.com
• www.java.com
• java.net
• www.java.net
• download.oracle.com
• yum.oracle.com

​

パッケージマネージャー - JavaScript/Node

• registry.npmjs.org
• www.npmjs.com
• www.npmjs.org
• npmjs.com
• npmjs.org
• yarnpkg.com
• registry.yarnpkg.com

​

パッケージマネージャー - Python

• pypi.org
• www.pypi.org
• files.pythonhosted.org
• pythonhosted.org
• test.pypi.org
• pypi.python.org
• pypa.io
• www.pypa.io

​

パッケージマネージャー - Ruby

• rubygems.org
• www.rubygems.org
• api.rubygems.org
• index.rubygems.org
• ruby-lang.org
• www.ruby-lang.org
• rubyforge.org
• www.rubyforge.org
• rubyonrails.org
• www.rubyonrails.org
• rvm.io
• get.rvm.io

​

パッケージマネージャー - Rust

• crates.io
• www.crates.io
• index.crates.io
• static.crates.io
• rustup.rs
• static.rust-lang.org
• www.rust-lang.org

​

パッケージマネージャー - Go

• proxy.golang.org
• sum.golang.org
• index.golang.org
• golang.org
• www.golang.org
• goproxy.io
• pkg.go.dev

​

パッケージマネージャー - JVM

• maven.org
• repo.maven.org
• central.maven.org
• repo1.maven.org
• jcenter.bintray.com
• gradle.org
• www.gradle.org
• services.gradle.org
• plugins.gradle.org
• kotlin.org
• www.kotlin.org
• spring.io
• repo.spring.io

​

パッケージマネージャー - その他の言語

• packagist.org（PHP Composer）
• www.packagist.org
• repo.packagist.org
• nuget.org（.NET NuGet）
• www.nuget.org
• api.nuget.org
• pub.dev（Dart/Flutter）
• api.pub.dev
• hex.pm（Elixir/Erlang）
• www.hex.pm
• cpan.org（Perl CPAN）
• www.cpan.org
• metacpan.org
• www.metacpan.org
• api.metacpan.org
• cocoapods.org（iOS/macOS）
• www.cocoapods.org
• cdn.cocoapods.org
• haskell.org
• www.haskell.org
• hackage.haskell.org
• swift.org
• www.swift.org

​

Linux ディストリビューション

• archive.ubuntu.com
• security.ubuntu.com
• ubuntu.com
• www.ubuntu.com
• *.ubuntu.com
• ppa.launchpad.net
• launchpad.net
• www.launchpad.net

​

開発ツール＆プラットフォーム

• dl.k8s.io（Kubernetes）
• pkgs.k8s.io
• k8s.io
• www.k8s.io
• releases.hashicorp.com（HashiCorp）
• apt.releases.hashicorp.com
• rpm.releases.hashicorp.com
• archive.releases.hashicorp.com
• hashicorp.com
• www.hashicorp.com
• repo.anaconda.com（Anaconda/Conda）
• conda.anaconda.org
• anaconda.org
• www.anaconda.com
• anaconda.com
• continuum.io
• apache.org（Apache）
• www.apache.org
• archive.apache.org
• downloads.apache.org
• eclipse.org（Eclipse）
• www.eclipse.org
• download.eclipse.org
• nodejs.org（Node.js）
• www.nodejs.org

​

クラウドサービス＆監視

• statsig.com
• www.statsig.com
• api.statsig.com
• sentry.io
• *.sentry.io
• http-intake.logs.datadoghq.com
• *.datadoghq.com
• *.datadoghq.eu

​

コンテンツ配信＆ミラー

• sourceforge.net
• *.sourceforge.net
• packagecloud.io
• *.packagecloud.io

​

スキーマ＆設定

• json-schema.org
• www.json-schema.org
• json.schemastore.org
• www.schemastore.org

​

Model Context Protocol

• *.modelcontextprotocol.io

​

カスタマイズされたネットワークアクセスのセキュリティベストプラクティス

1. 最小権限の原則：必要な最小限のネットワークアクセスのみを有効にします
2. 定期的に監査する：許可されたドメインを定期的に確認します
3. HTTPS を使用する：常に HTTP エンドポイントより HTTPS エンドポイントを優先します

​

セキュリティと分離

• 分離された仮想マシン：各セッションは分離された Anthropic 管理の VM で実行されます
• ネットワークアクセス制御：ネットワークアクセスはデフォルトで制限され、無効にできます

• 認証情報保護：機密認証情報（git 認証情報や署名キーなど）はサンドボックス内の Claude Code と一緒にありません。認証はスコープ付き認証情報を使用するセキュアプロキシを通じて処理されます
• セキュアな分析：コードは PR を作成する前に分離された VM 内で分析および変更されます

​

価格とレート制限

​

制限事項

• リポジトリ認証：ウェブからローカルにセッションを移動できるのは、同じアカウントに認証されている場合のみです
• プラットフォーム制限：ウェブ上の Claude Code は GitHub でホストされているコードでのみ機能します。自己ホスト型の GitHub Enterprise Server インスタンスは Teams および Enterprise プランでサポートされています。GitLab およびその他の非 GitHub リポジトリはクラウドセッションで使用できません

​

ベストプラクティス

1. 環境セットアップを自動化する：セットアップスクリプトを使用して Claude Code が起動する前に依存関係をインストールし、ツールを設定します。より高度なシナリオの場合は、SessionStart フックを設定します。
2. 要件を文書化する：CLAUDE.md ファイルで依存関係とコマンドを明確に指定します。AGENTS.md ファイルがある場合は、@AGENTS.md を使用して CLAUDE.md でソースして、単一の情報源を維持できます。

​

関連リソース

• フック設定
• 設定リファレンス
• セキュリティ
• データ使用