Edited at

【Visual Studio Code】初音ミクさんを召喚できる拡張機能「live2d」

皆さん、こんにちは。戸倉彩です。

今回は、Visual Studio Code(以下、VS Code)でちょっと気になった拡張機能についてご紹介します。海外の方が公開されている拡張機能のようですが、試しにインストールしてみました。

★こちらの拡張機能をインストールすると、VS Codeが「サポート対象外」になります

★こちらの操作は自己責任でお願いします


live2d

https://marketplace.visualstudio.com/items?itemName=shenyu1996.live2d


拡張機能のインストール方法

インストール方法は通常の拡張機能と同様です。VS Codeの拡張機能アイコンより 「live2d」 を検索して 「インストール」 ボタンよりインストールすることができます。


Visual Studio Code の設定方法

F1を押してコマンドパレットからPreferences: Open Setting(JSON)を検索し、編集画面を開きます。

settings.jsonファイル内の live2d.model で初音ミクさんを召喚するために miku を指定します。その他にも起動時に配置する場所や透明度など下記のようにjson形式で記述することで設定することが可能です。

Setting(JSON)を表示した際、右側に表示されるUser Settingのカッコ内に以下を記載してください(初音ミクを表示する場合)。


settings.json

    "live2d.width": 300,  // 

"live2d.height": 400, // 高さ
"live2d.bottom": 300, // 底辺位置
"live2d.right": 20, // 右側位置
"live2d.model": "miku", // キャラクター名を指定
"live2d.headPos": 0.5, // 重心
"live2d.scale": 2, // スケール
"live2d.opacity": 0.7, // 透明度
"live2d.hoverOpacity": 1 // ホバー透明度


live2d の使い方


  1. コマンドパレットから live2dinstall を検索して選択し、実行します。



  2. メッセージに従ってVS Codeを再起動します。



  3. メッセージが表示されますが、× で閉じるか、設定アイコンから 今後は表示しない に設定しておきます。



    [Memo] このメッセージに関する情報はVS CodeサイトのFAQをご確認ください。



※複数回再起動を行わないと反映されないことが多々あるようです(コメント欄参照)

 うまく反映されない場合、複数VScodeの再起動を行ってください。


  1. 初音ミクさん召喚!


  2. マウスカーソルの動く方向にミクさんが向いてくれます。


  3. ミクさんを移動させたい場合は、カーソルを当てて左クリックで操作します。


今回は以上です。

Have a nice Geek Life♪

※Twitterで最新情報配信中 @ayatokura