VS Codeでタイピングするたびにキャラが動く！自作拡張機能を作ってみた.「Type Diorama」

コーディングを楽しくする「Type Diorama」

プログラミングやドキュメント作成は、時に孤独で地味な作業になりがちです。長時間一人で画面に向かい続けていると、集中力が途切れたり、モチベーションが下がってしまうこともありますよね。

そんなあなたのコーディングライフを、ほんの少しだけ楽しく、そして癒やしに満ちた時間に変えたい！という想いから、VS Code拡張機能「Type Diorama（タイプジオラマ）」を開発しました。

「Diorama」は、文字を入力するたびに、VS Codeの左下タブ（ステータスバー）でお気に入りのキャラクターがアニメーションするという、遊び心あふれる拡張機能です。

Type Diorama ヘルタクルクル-デモ

開発のきっかけ：文字入力＝命の吹き込み

この拡張機能のアイデアは、ユーザーが発話すると、それに反応してGIFアニメーションが動くような、チャットツールの面白い機能から着想を得ました。

「もし、この楽しい反応がVS Codeで、文字を入力する度に起こったらどうだろう？」

コーディングという日常の動作に「命を吹き込む」ようなインタラクションを加えれば、少しでも開発を楽しくできると考え、この「Type Diorama」が誕生しました。

主な機能と特徴

「Type Diorama」の最大の魅力は、シンプル設定できることです。

スプライトシート(アニメーションの各フレームを横一列に並べた画像)を指定し、最大フレームなどを入力すれば設定完了です。（自動化もできましたが、あえて動いているように表示したりできるようにするためマニュアル入力できるようにしています。）

プロジェクト（ワークスペース）ごとに違うキャラクターを設定できるため、気分やプロジェクトのテーマに合わせて使い分けることも可能です。

使い方（How to Use）

1. インストール

VScodeで”diorama“と拡張機能を検索したら出てきます。

2. 設定画面を開く

VS Codeのアクティビティバー（左端のアイコン列）に新しく追加されたDioramaのアイコンをクリックします。

3. 画像をセット＆パラメータ調整

設定画面にて、以下の手順で画像をセットします。

「📂 Select Sprite」ボタンから、PC内の画像ファイル（PNG/JPG等）を選択します。
Width / Height：画像内でアニメーションの1コマが占めるサイズをピクセル（px）単位で入力します。
Frames：アニメーションの総コマ数（例：3コマアニメなら「3」）を入力します。
Scale：キャラクターの表示倍率を入力します。ドット絵などは「2〜4倍」にすると見やすくなります。

4. 画像素材について

画像の推奨フォーマット:

背景透過PNG
横一列にコマが並んでいる形式（Strip format）。

素材の準備の仕方

もちろん手書きでも作れますが、簡単に手に入れたいなら以下の方法で用意できます。

以下のサイトでいろいろミームgifが公開されています。

tenor

gifがいっぱい置いてあるサイト

tenor.com

tenorの利用規約の紹介(一応)

https://tenor.com/ja/legal-terms

利用についての記載(抜粋)

“Tenor を使用すると、コンテンツの提出、保存、送信、受信、共有を行うことができます。お客様のコンテンツは Google 利用規約に記載のとおり、Google にライセンスが付与されるものとします。そのため、コンテンツを Tenor にアップロードすると、Google はそのコンテンツをユーザーに表示し、指示があったときに共有する場合があります。その場合、ユーザー（Tenor の API を介してコンテンツにアクセスするユーザーも含む）はそのコンテンツを表示、共有、変更できます。”

Tenorで提供されるコンテンツは、Tenorの規約に基づきGoogleにライセンスが付与され、コンテンツ提出者がTenorにアップロードした時点で、Googleはそのコンテンツをユーザーに表示・共有する場合があります。

Tenorのコンテンツは、Google利用規約に基づきGoogleにライセンスが付与されており、ユーザーはこれらのGIFを表示、共有、変更することが可能です。

（商用利用や再配布については、個別のコンテンツやTenorの最新の規約を十分にご確認ください。）

※今回の様な(個人のエディタを改善するような)利用なら何の問題もないです。

gifから作る方法

クルクルしているヘルタもこの方法で作りました。

気に入ったgifをダウンロード
“gif to sprite”などの文言で検索するとスプライトシート変換ツールが見つかるはずなので変換して、ダウンロードする。

技術的な裏話

開発技術: TypeScript / VS Code Extension API

　公開する拡張機能の開発は、初めてだったのでできるか不安でしたが、案外(ゼロからサーバ開発するなどと比べて)簡単に作成できました。

開発環境は以下のコードで勝手に作れるみたいです。

npm install -g yo generator-code

開発環境は簡単に作れましたが、表示を連携させるのはちょっと骨が折れました。VSCODEに表示されているタブや枠などは、裏側でサーバ(htmlの配信や更新)が動いており、それの表示をエディタ上に表示するというWebviewで実装されています。この連携に個別に設定したIDを利用するのですが、キャッシュが残っていたのが原因で反映されない、package.jsonの書式が違った、設定画面(アクティビティバー)とメインのエクスプローラの表示間の連携のためのメッセージング実装など、解決に4時間くらいかかりました(´・ω・`)

今回の開発を通してある程度、環境の立て方などを理解できたので、何かいいアイデアが浮かんだら次回作を作ってみようと思います。

ko-fi(サポートしたい物好きさん用) ：