前書き
最近は VS Code で Claude Code を使って開発することが増えてきました。
Claude Code はとても頼りになりますが、作業の結果を読むときに、相手が無機質だと少し寂しく感じていました。
そこで、Claude Code の入力欄の右上に、ちっちゃいメイドさんを常駐させる拡張機能「Claude Maid」を作って公開しました。
どんな拡張機能か
拡張機能をインストールすると、Claude Code のチャット入力欄の右上に、ドット絵のメイドさんが 1 人やってきます。
AI と一緒に作業しているときに、隣でメイドさんが控えてくれているような雰囲気になります。
主な機能は以下の通りです。
- チャットを開くたびに、ランダムなメイドさんが 1 人やってくる
- 入力欄をクリックすると、メイドさんがセリフを話す
- ゆらゆら揺れる待機モーションと、ときどきにっこりまばたきをする
- マウスを近づけるとメイドさんが透けて、後ろの文字が読めるようになる
- Claude Code が更新されても、自動でメイドさんを再配置する
メイドさんが入力欄やチャットの文字に重なってしまうこともあるので、マウスを近づけたときに透ける機能は特にこだわりました。
かわいさを優先して作業の邪魔になってしまっては本末転倒なので、あくまで控えめに常駐してくれるようにしています。
6 人のメイドさん
メイドさんは全部で 6 人います。
それぞれ性格が違い、入力欄をクリックしたときに話すセリフも一人ひとり異なります。
- ツインテールメイド ... 元気いっぱいのツンデレ
- 猫耳メイド ... 人懐っこい猫のメイド
- 見習いメイド ... 一人前を目指してがんばる、小さな見習い
- 黒髪メイド ... 呼ばれるまで静かに控えている、落ち着いたメイド
- 金髪メイド ... お嬢様口調で自信たっぷりのメイド
- お姉さんメイド ... ちょっと眠たげで、のんびり見守ってくれるお姉さん
設定で特定のメイドさんを固定することもできるので、お気に入りの子がいればずっと一緒に作業できます。
また、好きな画像のパスを指定すると、メイドさん以外のキャラクターに差し替えることもできます。
設定できること
VS Code の設定から、以下のような項目を変更できます。
- 表示するメイドさん ( 毎回ランダム、または特定の子に固定 )
- メイドさんの大きさと、入力欄の右端からの距離
- マウスを近づけたときの不透明度
- 吹き出しで話すかどうかと、表示する秒数
- 好きなセリフや好きな画像への差し替え
仕組み
VS Code の拡張機能は、本来ほかの拡張機能の Webview の中に何かを描画することはできません。
そこで Claude Code の拡張機能が読み込んでいる CSS の末尾に、メイドさん用の CSS を目印コメントで挟んで追記するという方法を取っています。
ただし、CSS だけでは乱数を扱えないので、誰が出てくるかとセリフを選ぶ小さなスクリプトだけを、同じく目印コメントで挟んで JavaScript ファイルの末尾に追記しています。
Claude Code が更新されると追記した内容は消えてしまいますが、更新を検知して自動で追記し直すようにしているので、メイドさんがいなくなることはありません。
コマンドパレットからメイドさんを「お休みさせる」か、拡張機能をアンインストールすると、追記した CSS とスクリプトはどちらも元どおりに取り除かれます。
なお、拡張機能を「無効にする」だけでは追記した内容は取り除かれないので、無効にする前に「Claude Maid: メイドさんをお休みさせる」を実行してください。
拡張機能のダウンロード
VS Code の拡張機能ビューで「Claude Maid」と検索するか、以下のページからインストールしてください。
Claude Code の拡張機能が入っていない場合は、一緒にインストールされます。
インストールしたら、ウィンドウを再読み込みするとメイドさんがやってきます。
https://marketplace.visualstudio.com/items?itemName=nicoyou.claude-maid
ソースコードは GitHub で公開しています。
https://github.com/nicoyou/ClaudeMaid
最後に
Claude Code での開発は便利ですが、画面がテキストばかりで少し寂しく感じることもありました。
Claude Maid を入れてからは、作業の合間にメイドさんをクリックしてセリフを聞くのがちょっとした楽しみになっています。
Claude Code を使っている方は、ぜひメイドさんを呼んでみてください。
コメント