ウェブ上のClaude Code

​

ウェブ上のClaude Codeとは何ですか？

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

​

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

• Proユーザー
• Maxユーザー
• チームプレミアムシートユーザー
• エンタープライズプレミアムシートユーザー

​

始める

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

​

仕組み

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

​

ウェブとターミナル間でのタスク移動

​

ターミナルからウェブへ

& Fix the authentication bug in src/auth/login.ts

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

​

バックグラウンドタスクのヒント

claude --permission-mode plan

& Execute the migration plan we discussed

& Fix the flaky test in auth.spec.ts
& Update the API documentation
& 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」をクリックして、ターミナルに貼り付けられるコマンドをコピーします

​

テレポートの要件

​

クラウド環境

​

デフォルトイメージ

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

​

利用可能なツールの確認

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

API_KEY=your_api_key
DEBUG=true

​

依存関係管理

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

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

​

ローカルとリモート実行

#!/bin/bash

# 例：リモート環境でのみ実行
if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
  exit 0
fi

npm install
pip install -r requirements.txt

​

環境変数の永続化

​

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

​

ネットワークポリシー

​

GitHubプロキシ

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

​

セキュリティプロキシ

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

​

アクセスレベル

​

デフォルトで許可されるドメイン

​

Anthropicサービス

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

​

バージョン管理

• github.com
• www.github.com
• api.github.com
• raw.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
• ghcr.io
• mcr.microsoft.com
• *.data.mcr.microsoft.com

​

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

• 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
• 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
• 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
• 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

​

コンテンツ配信＆ミラー

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

​

スキーマ＆構成

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

​

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

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

​

セキュリティと分離

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

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

​

価格とレート制限

​

制限事項

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

​

ベストプラクティス

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

​

関連リソース

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