Visual Studio Code 用 Webview UI ツールキット
2021年10月11日 David Dossett (@david_dossett) および Hawk Ticehurst (@hawkticehurst) 著
Visual Studio Code 用 Webview UI ツールキットのパブリックプレビューを発表できることを大変嬉しく思います。このツールキットを使用すると、拡張機能開発者は、エディター自体のように見え、操作でき、動作する webview ベースの拡張機能を Visual Studio Code で迅速かつ簡単に作成できます。
Webview UI ツールキットとは？
本質的に、このツールキットは、拡張機能の webview 内でユーザーインターフェースを構築するために開発者が使用できるコンポーネントのライブラリです。ただし、これは、webview がどうしても必要な場合を除き、拡張機能で webview の使用を避けるという推奨事項を変更するものではないことに注意してください。
ライブラリの機能は次のとおりです
- Visual Studio Code デザイン言語の実装: エディターの他の部分と一貫したルックアンドフィールを持つ拡張機能を作成します。
- カラーテーマの自動サポート: すべてのコンポーネントはテーマを念頭に置いて設計されており、現在のエディターテーマを自動的に表示します。
- あらゆる技術スタックを使用可能: このライブラリは web コンポーネントのセットとして提供されるため、開発者は拡張機能がどのような技術スタック (React、Vue、Svelte など) で構築されていても、ツールキットを使用できます。
- すぐに利用できるアクセシビリティ: すべてのコンポーネントには、ウェブ標準に準拠した ARIA ラベルとキーボードナビゲーションが付属しています。
なぜ構築したのか？
私たちは、webview を使用する拡張機能が、ユーザーにとって予測可能で、一貫性があり、アクセスしやすいものであることを保証したいと考えました。
拡張機能が Webview API を使用する場合、webview ガイドラインに準拠した UI を作成する責任は拡張機能の作成者にあります。その結果、webview は Visual Studio Code の他の部分とは異なって表示および動作するリスクがあります。最悪の場合、ユーザーはエディターの他の部分とはまったく似ていない、アクセスできない拡張機能 UI を操作する必要があります。
Webview UI ツールキットを使用することで、私たちはその責任の一部を拡張機能の作成者と共有するようになりました。テーマ設定、アクセシビリティ、およびコア UI コンポーネントの動作/スタイリングの実装の詳細について心配する必要がなくなります。これは、開発の容易さの向上、開発者の速度の向上、そして最終的には、拡張機能を独自のものにする部分に取り組むための時間の増加を意味します！
皆様からのフィードバックをお待ちしています！
皆様が Webview UI ツールキットを試してくれるのを心待ちにしています！1.0 リリースに向けて、webview ベースの拡張機能を作成するエクスペリエンスをどのように改善できるかをお知らせください。
詳細については、Visual Studio Code 用 Webview UI ツールキットのドキュメントを参照してください。さらに、ご質問、問題、または機能リクエストがある場合は、遠慮なくご連絡ください。
ハッピーコーディング、
David と Hawk