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

ビュー

ビューは、サイドバーやパネル内に表示できるコンテンツのコンテナです。ビューには、ツリービュー、ウェルカムビュー、Webviewビューを含めることができ、ビューアクションを表示することも可能です。また、ビューはユーザーによって並べ替えたり、別のビューコンテナ(例:プライマリサイドバーからセカンダリサイドバーへ)に移動したりできます。他の拡張機能も同じビューコンテナにコントリビュートできるため、作成するビューの数は最小限に抑えてください。

✔️ するべきこと

  • 可能な限り既存のアイコンを使用してください
  • 言語ファイルにはファイルアイコンを使用してください
  • データを表示するにはツリービューを使用してください
  • すべてのビューにアイコンを追加してください(アクティビティバーやセカンダリサイドバーに移動された場合、それらはアイコンで表現されるため)
  • ビューの数は最小限に抑えてください
  • 名前の長さは最小限に抑えてください
  • カスタムWebviewビューの使用は制限してください

❌ すべきでないこと

  • 既存の機能を繰り返す
  • ツリーアイテムを単一のアクションアイテムとして使用してください(例:クリックでコマンドを実行するなど)
  • 不要な場合にカスタムWebviewビューを使用しないでください
  • エディタでWebviewを開くには、アクティビティバーアイテム(ビューコンテナ)を使用してください

Views example

この例では、ツリービューを使用してツリービューアイテムのフラットなリストを表示しています。

ビューの配置場所

ビューは、エクスプローラー、ソース管理(SCM)、デバッグといった既存のビューコンテナに配置できます。また、アクティビティバーを介してカスタムビューコンテナに追加することも可能です。さらに、パネル内の任意のビューコンテナにビューを追加したり、セカンダリサイドバーにドラッグしたりすることもできます。

View locations

ビューコンテナ

ビューコンテナは、その名の通り、ビューがレンダリングされる「親」コンテナです。拡張機能は、アクティビティバー/プライマリサイドバー、またはパネルに対してカスタムビューコンテナをコントリビュートできます。ユーザーはビューコンテナ全体をアクティビティバーからパネルへ(またはその逆に)ドラッグしたり、個々のビューを移動したりできます。

Example of a View Container

これはアクティビティバー/プライマリサイドバーに配置されたビューコンテナの例です

Example of a View Container in a Panel

これはパネルに配置されたビューコンテナの例です

ツリービュー

ツリービューは、ビュー内にコンテンツを表示するための強力で柔軟な形式です。単純なフラットリストから深くネストされたツリーまで、あらゆるものを追加できます。

  • アイテムにコンテキストを与えるために説明的なラベルを使用してください(該当する場合)
  • アイテムの種類を区別するために製品アイコンを使用してください(該当する場合)

❌ すべきでないこと

  • コマンドを実行するためのボタンとしてツリービューアイテムを使用してください
  • 必要でない限り、深いネストは避けてください。フォルダやアイテムが数階層あるのが、ほとんどの状況においてバランスが取れています。
  • アイテムに3つ以上のアクションを追加しないでください

Example of a Tree View

ウェルカムビュー

ビューが空の場合、コンテンツを追加して、拡張機能の使い方や始め方をユーザーに案内できます。ウェルカムビューではリンクとアイコンがサポートされています。

✔️ するべきこと

  • ウェルカムビューは必要な場合にのみ使用してください
  • 可能な限りボタンの代わりにリンクを使用してください
  • ボタンは主要なアクションにのみ使用してください
  • リンク先がわかるような明確なリンクテキストを使用してください
  • コンテンツの長さを制限してください
  • ウェルカムビューの数を制限してください
  • ビュー内のボタンの数を制限してください

❌ すべきでないこと

  • 不要な場合にボタンを使用しないでください
  • プロモーションにウェルカムビューを使用しないでください
  • リンクテキストとして一般的な「続きを読む」を使用しないでください

Welcome Views

この例では、拡張機能の主要なアクションを1つと、ドキュメントへの追加リンクを表示しています。

進行状況付きビュー

ビューのIDを参照することで、ビュー内に進行状況を表示することも可能です。

View with progress

ビューアクション

ビューは、ビューのツールバーにビューアクションを公開できます。ノイズや混乱を避けるため、あまり多くのアクションを追加しないよう注意してください。組み込みの製品アイコンを使用すると、拡張機能がネイティブUIに馴染みやすくなります。ただし、カスタムアイコンが必要な場合は、SVGアイコンを提供することもできます。

Example of View Actions

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