初音ミク
VSCode
VisualStudioCode

【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