拡張機能の制作｜俺用に改良したAntigravityをプリティに仕上げるお作法（後編）— サイドバーUIとVSIX配布
📝 記事について：
本記事は、５０近辺のくたびれたおっさん（貧乏）の筆者が、サイトやコードを作っていく際に気になったものをまとめたものです。
利用するかもしれない製品・サービスについて、公開情報を調べています。内容の正確性については、必ず公式情報やデータソースをご確認ください。
前編では環境構築とF5でのテストまでお伝えしました。
後編では、サイドバーに時計・カレンダーを表示するしくみと、
完成した拡張機能を .vsix にまとめて、ほかの Antigravity にインストールするまでを、やさしくまとめます。
📦 制作物ダウンロード
記事で紹介している拡張機能のプロジェクト一式と配布用パッケージです。前編のページにも同じリンクがあります。
- antigravity-clock-ext.zip（プロジェクト一式）
- antigravity-clock-ext-0.0.1.zip（配布用パッケージ）
本記事では詳細なコードは省き、「お作法」や「こういう感じで」というニュアンスで説明しています。
実際のコードは上記の配布物（ZIP）内にあります。説明や手順の詳細は、当サイトのインタラクティブ記事の別カテゴリで記述する予定です。
Core Insights
① サイドバーとWebview → ② 時計・カレンダーUI → ③ VSIXで配布・インストール
-
1 サイドバーとWebview
トップバーではなくサイドバーに置く理由
安定性のため、エディタの根幹（トップバーなど）への変更は制限されています。代わりにサイドバー内の「Webview」で、HTML/CSS/JS を自由に使ったUIを作れます。
-
2 時計・カレンダーUI
Extension Development Host で確認
F5や「実行とデバッグ」から起動する「Extension Development Host」の左側に、拡張機能用のアイコン（時計など）が現れ、クリックすると時計とカレンダーが表示されます。
-
3 VSIXで配布・インストール
vsce package と Install from VSIX
vsce で .vsix を作成し、別の Antigravity では拡張機能ビューから「Install from VSIX...」でローカルインストールできます。
1. サイドバーと Webview の考え方
Antigravity（VS Code）では、安定性とセキュリティのため、メインのメニューバーやトップバーなど「エディタの根幹」をがらりと変えることはできません。
そのかわり、サイドバー（Activity Bar）やメインのパネルの中に、「小さなブラウザのような画面」＝Webviewを用意できます。VS Code 公式の Webview API では「拡張が制御する iframe のようなもの」と説明されています。
Webview は、Antigravity（VS Code）がのっている Electron と同じく Chromium ベースで動くため、中身は Chrome 系の表示エンジンです（MS の WebView2 とは別物で、エディタ本体と同じ Chromium が使われます）。
図：サイドバー（Activity Bar）と Webview。左側のアイコンで拡張機能を開くと、右に「小さなブラウザのような画面」として時計とカレンダーが表示されます。（クリックで拡大）
（筆者メモ：Electron は昔、Windows アプリ制作で使っていた凄まじいフレームワークです。JavaScript でデスクトップアプリが作れるのですが、VS Code がその上に乗っているとは思っておらず、ここまできれいに作れるのかと驚きました。）
ここでは、いつもの HTML・CSS・JavaScript がそのまま使えるので、アナログ時計のアニメーションやカレンダーの表示など、Webでできる表現をそのままエディタに持ち込めます。
2. Extension Development Host と、拡張機能を起動するボタン
前編で F5 を押すと、「Extension Development Host」という別ウィンドウが開きます。ここが拡張機能のテスト用の Antigravity です。
F5 以外では、メニュー「実行」→「デバッグの開始」、または左サイドバーの「実行とデバッグ」ビュー（Ctrl+Shift+D）を開いて緑の再生ボタン（▶）からも同じように起動できます。
左側のサイドバーに、今回つくった拡張機能用のアイコン（時計のアイコンなど）が並び、それをクリックすると、右側に拡張機能のパネルが開きます。
図：Extension Development Host の画面。左側に今回作成した拡張機能を起動する時計のアイコンがあります。（クリックで拡大）
3. 時計とカレンダーが表示されたUI
拡張機能のパネルを開くと、アナログ時計とカレンダーが表示されます。
自分でこうしたUIを足していくことで、Antigravity を「開発だけじゃなく、オフィスワークでも使いやすい、自由度の高いLLMツール」の土台にしていく、という使い方ができます。
図：拡張機能を開いたところ。時計とカレンダーが表示されています。（クリックで拡大）
4. デバッグが終わったら、配布用パッケージ（.vsix）を作る
自分だけで使うならフォルダのままでもよいですが、ほかのパソコンの Antigravity や、同じチームの人に渡すときは、vsce で vsce package を実行し、.vsix という1つのファイルにまとめます。
そのときに、次のような「お作法」を守っておくと安心です。
配布前のお作法（一覧）
| 項目 | 内容 |
|---|---|
| Repository の明記 | package.json に、コードがどこ（GitHub など）で管理されているかを書いておく。 |
| LICENSE の追加 | 誰が作ったか、どんな条件で使ってよいか（例：MITライセンス）を明示する。 |
| .vscodeignore | 配布に不要な開発用ファイル（.ts のソースなど）を除外し、パッケージを軽く・きれいに保つ。 |
.vscodeignore で .ts を除外しても、パッケージにはコンパイル後の .js が含まれるため、特殊な処理をしなければ実質「ソースコードが読める形で配布される」ことになります。ソースを見せたくない場合は、バンドル・難読化のほか、ロジックを WebAssembly（WASM） に寄せる方法などが知られています。詳細は Publishing Extensions（VS Code 公式） の「Using .vscodeignore」や Extension API を参照してください。
図：デバッグが完了したので配布パッケージ（.vsix）を作成し、ほかの Antigravity で「Install from VSIX...」からローカルインストールしたときの画面。
インストール済みの「Antigravity Clock & Calendar」と、メニューの「Install from VSIX...」が確認できます。（クリックで拡大）
今回の例では、Antigravity（VSCode OSS 1.107.0、Node.js 22.x）で、時計＆カレンダーの拡張機能「antigravity-clock-ext」をビルドし、antigravity-clock-ext-0.0.1.vsix として配布できる状態までを紹介しました。
前編はこちらからどうぞ。
Artist's Perspective
「貧乏なくたびれたおっさんが、俺用に改良したAntigravityだ、プリティすぎてお前には＊＊＊だよ～～と言うためのハードルはすごい高い……というのは別にして、
LLMがくっついているこのツールには、コード開発以上の恩恵があると思いました。なので、拡張機能で何ができるのか、何があったらいいのか、どうつくったらいいのかを考えると、さらにくたびれますなぁ～～～～(-_-)zzz」
データソース・参考リンク
本記事は以下の情報源を参考にしています。
内容の正確性については、必ず元のデータソースをご確認ください。