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