Skip to main content

リモートブラウザーサポート

Clineのリモートブラウザーフィーチャーにより、AIアシスタントは制御されたブラウザーインスタンスを通じてWebコンテンツと直接対話できます。これにより、いくつかの強力な機能が有効になります：

  • ウェブサイトの表示と対話
  • ローカル実行中のWebアプリケーションのテスト
  • コンソールログとエラーの監視
  • クリック、タイピング、スクロールなどのブラウザーアクションの実行

Caretでのリモートブラウザー​

リモートブラウザーとは？​

リモートブラウザーにより、Clineはウェブサイトを直接表示して対話できます。この機能により、Clineは以下を実行できます：

  • ウェブサイトにアクセスしてコンテンツを表示
  • ローカル実行中のWebアプリケーションのテスト
  • フォームの入力と要素のクリック
  • 見えているもののスクリーンショット撮影
  • より多くのコンテンツを見るためのページスクロール

リモートブラウザーの使用方法​

基本コマンド​

簡単な指示でClineにブラウザーの使用を依頼できます：

  • ウェブサイトを開く: 「ブラウザーを使ってhttps://example.comのウェブサイトを確認してください」
  • 要素をクリック: 「ログインボタンをクリック」
  • テキストを入力: 「検索ボックスに'Hello world'と入力」
  • ページをスクロール: 「より多くのコンテンツを見るために下にスクロール」
  • ブラウザーを閉じる: 「今すぐブラウザーを閉じて」

ワークフローの例​

Webアプリケーションのテスト:

「npm start」で私のReactアプリを起動して、http://localhost:3000で正常に動作しているか確認してもらえますか？

ウェブサイトの分析:

https://example.comにアクセスして、そのデザインとレイアウトについてどう思うか教えてもらえますか？

フォームの入力:

https://example.com/contactに移動して、連絡フォームにテストデータを入力して送信してください。

知っておくべき重要なこと​

一度に一つのブラウザー​

Clineは一度に一つのブラウザーしか使用できません。別のウェブサイトにアクセスしたい場合は、以下のいずれかを実行できます：

  • 同じブラウザーセッション内で新しいURLに移動するようClineに依頼
  • 現在のブラウザーを閉じて新しいブラウザーを開くようClineに依頼

他のツールを使用する前にブラウザーを閉じる必要があります​

ブラウザーの使用後にClineにファイルの編集やコマンドの実行をさせたい場合は、まずブラウザーを閉じるよう依頼する必要があります：

ブラウザーを閉じて、私たちが見た配置問題を修正するためにCSSファイルを更新してください。

Caretが見るもの​

ブラウザーには固定されたビューポートサイズ（デフォルトで900x600ピクセル）があり、小さなラップトップ画面に似ています。Clineは各アクション後にスクリーンショットを共有するため、Clineが見ているものを正確に確認できます。

コンソールログ​

Clineはブラウザーのコンソールログをキャプチャし、Webアプリケーションのデバッグに役立ちます。これらのログは各スクリーンショットと一緒に含まれます。

一般的な使用例​

  • Web開発: ウェブサイトとWebアプリケーションのテスト
  • UI/UXレビュー: ウェブサイトデザインと使いやすさのフィードバック取得
  • コンテンツ調査: 情報収集のためのClineによるウェブサイト閲覧
  • フォームテスト: フォームが正常に動作することの確認
  • レスポンシブデザインテスト: 異なる画面サイズでのウェブサイト表示の確認

トラブルシューティング​

WSLでのVS Codeでリモートブラウザーを使用​

WSLでVS Codeを実行する場合、WindowsがWSLからChromeへの接続を許可するように設定する必要があります。以下の手順に従ってください：

管理者としてPowerShellを開いて実行：​

# WSLがChromeのデバッグポートに接続することを許可
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

VS CodeでClineを設定：​

  1. VS Code設定を開く
  2. 「Caret: Chrome Executable Path」を検索
  3. Chrome実行ファイルのパスに値を設定（例：C:\Program Files\Google\Chrome\Application\chrome.exe）

ClineはWSL内からリモートブラウザーフィーチャーを使用できるようになります。