エージェント型開発を探求する -

Webview

VS Code APIでサポートされている範囲を超えたカスタム機能を表示する必要がある場合は、完全にカスタマイズ可能な Webview を使用できます。Webviewは、どうしても必要な場合にのみ使用すべきであることを理解しておくことが重要です。

✔️ するべきこと

  • どうしても必要な場合にのみWebviewを使用する
  • コンテキストに応じて適切な場合にのみ拡張機能をアクティブにする
  • アクティブなウィンドウに対してのみWebviewを開く
  • ビュー内のすべての要素がテーマ設定可能であることを確認する(webview-view-sample および カラー トークン のドキュメントを参照)
  • ビューが アクセシビリティ ガイダンス(色のコントラスト、ARIAラベル、キーボードナビゲーション)に従っていることを確認する
  • ツールバーやビュー内でコマンドアクションを使用する

❌ すべきでないこと

  • プロモーション(アップグレード、スポンサーなど)に使用する
  • ウィザードに使用する
  • すべてのウィンドウで開く
  • 拡張機能の更新時に開く(代わりに通知を使用してください)
  • エディターやワークスペースに関連のない機能を追加する
  • 既存の機能(ウェルカムページ、設定、構成など)を繰り返す

Webviewの例

Simple Browser

この拡張機能は、エディターの横にブラウザプレビューを開きます。

Weview sample - Browser

この例では、VS Code WebがVS Code内で開発されている様子を示しています。Webviewパネルを使用して、ブラウザのようなウィンドウをレンダリングします。

Pull Request

この拡張機能は、ワークスペースのリポジトリのプルリクエストをカスタムツリービューに表示し、Webviewを使用してプルリクエストの詳細ビューを表示します。

Webview sample - Pull Request

Webviewビュー

Webviewは任意のビューコンテナ(サイドバーまたはパネル)に配置することもでき、これらの要素は Webviewビュー と呼ばれます。Webviewに関する同じガイダンスがWebviewビューにも適用されます。

Webview View

このWebviewビューは、ドロップダウン、入力、ボタンを使用したプルリクエスト作成用のコンテンツを表示します。

© . This site is unofficial and not affiliated with Microsoft.