Zenn
Open10

VSCode拡張機能 CodeZoo

VS Code
まさきちまさきち

コミットすればするほど猫が成長するコマンド

  • git commitを行ったタイミングで猫が3段階に成長
  • 特定のコマンドを打ち込み遊び（Play）や餌やり（Feed）を行うことが可能
  • ターミナルで色をつける
  • serde を使って状態保存（JSON）
+-----------------------------+
|        🐱 CodeZoo           |
|                                      |
|     (cat image here)        |
|     [Play]  [Feed]   |
|                             |
|  ❤️ Affection: 75%          |
|  💤 Energy: 40%             |
+-----------------------------+
  • Git commit 時に処理：git/hooks/post-commitにスクリプトを記載git commit 実行直後に Rustアプリ（例：codezoo play）を呼び出せる。
  • 特定のコマンド処理：std::env::args()を使ってCLI引数（例：play, feed）を受け取り処理を行う
  • ターミナルの色づけ：colored クレートなどのターミナル制御ライブラリ
  • serde を使って状態保存（JSON）：serde + serde_json クレートを使用した構造体の保存と読み込み

vscode-pets

vscode-petsのようなVScodeの拡張機能を作成したい。

https://github.com/MASAKi-cell/codeZoo


拡張機能の要件

・VScode内で猫を育成する。
・ 3段階に成長する。
・最初はなついていない 餌やり、おもちゃで遊ぶことを複数回繰り返すと好感度が上がる。
・育成と作業の連動: VS Codeでのタスク（一定時間の作業、commit）を完了するたびに、リワードを猫に与えられる仕組み。
・ UIの作成: WebviewまたはStatusBarを使って猫を表示する 。
・ ステート管理: データを永続化（VS Codeのグローバルステート）し、拡張機能を再起動しても猫の状態が保持されるようにする。


【実装内容】

  • 猫の描写
  • 猫を動作させる
  • UIの作成: WebviewまたはStatusBarを使って猫を表示する
  • 「餌やり」、「おもちゃ」のボタン表示
  • 「満腹度」「エネルギー」のステータス表示
  • ステート管理: データを永続化（VS Codeのグローバルステート）し、拡張機能を再起動しても猫の状態が保持されるようにする。
  • デバッグ: 各機能をテストし、挙動が期待通りか確認。


VScode拡張機能公開までの流れ

https://qiita.com/happy663/items/cbd82a0c214a548db857


猫のアニメーションを探す。

https://lottiefiles.com/

Hidden comment
Hidden comment
まさきちまさきち

WebView API

https://code.visualstudio.com/api/extension-guides/webview

WebViewは、ローカルリソースに直接アクセスできない独立したコンテキストで実行される。拡張機能から画像、スタイルシート、その他のリソースを読み込む場合、あるいはユーザーの現在のワークスペースからコンテンツを読み込む場合は、Webview.asWebviewUriローカルfile:URIを、VS Codeがローカルリソースのサブセットを読み込むために使用できる特別なURIに変換する関数を使用する必要がある。
（Webview に外部ファイルを読み込ませる際は webview.asWebviewUri() を必ず通す必要がある）

まさきちまさきち

アニメーションの生成

requestAnimationFrame()

https://ics.media/entry/210414/

  1. ペットの動きをユーザーの操作に連動。
  2. ユーザーのマウス移動に反応
  3. ペットが大きくなる。

WebviewとVS Code APIの間でメッセージ通信
WebviewからVS Codeへのメッセージ送信

const vscode = acquireVsCodeApi();
vscode.postMessage({ type: 'move', direction: 'left' });

逆にVS CodeからWebviewへメッセージを送るには、postMessageメソッドを使用

panel.webview.postMessage({ command: 'movePet', direction: 'right' });
Hidden comment
まさきちまさきち

vscode Global State

Mementoの場合

https://vshaxe.github.io/vscode-extern/vscode/Memento.html


ExtensionContextの場合

https://code.visualstudio.com/api/extension-capabilities/common-capabilities

ExtensionContext.workspaceStateでキー/値のペアを書き込み可能

// on activate
const versionKey = 'shown.version';
context.globalState.setKeysForSync([versionKey]);

// later on show page
const currentVersion = context.extension.packageJSON.version;
const lastVersionShown = context.globalState.get(versionKey);
if (isHigher(currentVersion, lastVersionShown)) {
    context.globalState.update(versionKey, currentVersion);
}
まさきちまさきち

猫の描写

  • PNGやGIF画像
  • SVG画像
  • CSSアニメーション： webviewでHTMLと組み合わせて使用できる
  • Canvas APIまたはWebGL
  • Blenderで作成 / Three.js