Webview
VS Code API がサポートする範囲を超えるカスタム機能をVSCで表示する必要がある場合は、完全にカスタマイズ可能なWebviewを使用できます。Webviewは、本当に必要な場合にのみ使用する必要があることを理解することが重要です。
✔️ すべきこと
- Webviewは、本当に必要な場合にのみ使用する
- 拡張機能を適切な文脈でのみアクティブにする
- Webviewはアクティブなウィンドウでのみ開く
- ビュー内のすべての要素がテーマ設定可能であることを確認する(webview-view-sampleとカラートークンのドキュメントを参照)
- ビューがアクセシビリティのガイダンス(色のコントラスト、ARIAラベル、キーボードナビゲーション)に従っていることを確認する
- ツールバーとビューでコマンドアクションを使用する
❌ すべきでないこと
- プロモーション(アップグレード、スポンサーなど)に使用する
- ウィザードに使用する
- すべてのウィンドウで開く
- 拡張機能の更新時に開く(代わりに通知で尋ねる)
- エディターやワークスペースに関係のない機能を追加する
- 既存の機能(ウェルカムページ、設定、構成など)を繰り返す
Webviewの例
簡易ブラウザ
この拡張機能は、エディターの横にブラウザのプレビューを開きます。
この例では、VS Code WebがVS Code内で開発されている様子を示しています。Webviewパネルは、ブラウザのようなウィンドウをレンダリングするために使用されます。
プルリクエスト
この拡張機能は、ワークスペースのリポジトリのプルリクエストをカスタムツリービューに表示し、プルリクエストの詳細ビューにWebviewを使用します。
Webviewビュー
Webviewは任意のビューコンテナ(サイドバーまたはパネル)に配置することもでき、これらの要素はWebviewビューと呼ばれます。同じWebviewのガイダンスがWebviewビューにも適用されます。
このWebviewビューは、ドロップダウン、入力、ボタンを使用するプルリクエストを作成するためのコンテンツを表示します。