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

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

今回は、Visual Studio Code(以下、VS Code)でちょっと気になった拡張機能についてご紹介します。海外の方が公開されている拡張機能のようですが、試しにインストールしてみました。
★こちらの拡張機能をインストールすると、VS Codeが「サポート対象外」になります
★こちらの操作は自己責任でお願いします

# live2d
[https://marketplace.visualstudio.com/items?itemName=shenyu1996.live2d](https://marketplace.visualstudio.com/items?itemName=shenyu1996.live2d)
[<img src="https://4okddg.by.files.1drv.com/y4m42yMc8GRxxe9h7LD7oUyvUQIQEXjBdoh_10lgtrGX-qHRKlD6SBdUPRt2rSQStApf2Bs52EplAMfkX_uDxZ3tYpyg16tNEm8ErcaflWCDXizGx9Cxpsyb8jiF3B9lqkmmVf7ZPs7Cw0B9vCSIqVTD-bTen-bMcZvqUgJG0r01qwWad3Ksb5_duWCl1XA8tSiSgQkUhqnNqAo75dMyM0ygw?width=1170&height=426&cropmode=none" width="600">](https://marketplace.visualstudio.com/items?itemName=shenyu1996.live2d)

# 拡張機能のインストール方法
インストール方法は通常の拡張機能と同様です。VS Codeの拡張機能アイコンより **「live2d」** を検索して **「インストール」** ボタンよりインストールすることができます。
<img src="https://4okbdg.by.files.1drv.com/y4mOIe-8IFIsYmBZQ0lH6lzdc-sn0dtCTxbLL6m37uZMH6xuWGf5JxmXTK0ClcxOnL8kAgLY1Wn71w3XeNNC4UVb_StQ4y4xojEUFgWLwkuswIkeezDbLGHZMBNtHRmx-ioL_6FchYIy39ZjoqapcurvKVhgj0bbCUDA40gtxktYuC3fV00xsnxs5DqveBTBGqbLRmF6EIvpx473tRiuKjtRg?width=1972&height=1308&cropmode=none" width="600">
 

# 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** を検索して選択し、実行します。  
<img src="https://4okcdg.by.files.1drv.com/y4mnxmVBtescEru7m5jmr4bCS_BTtbY_CymGINYM21irrM3d3QAWHB84dUUnDYjFWrPl6NA1Rd_GF-XdA5ATydqwtX6x_UnXPX-FrjaPDjtFQkAwLDfbcmq9z1Xs41vPVK__r-NKEFNaA3sn9Pzbe5kNZep5BfZjsk8PhDBECBRJ91_N1bn1cyYD-GRBGfR7RL6pqhU_yBlH8ptYRVHKU5UfQ?width=1788&height=1206&cropmode=none" width="600">
2. メッセージに従ってVS Codeを再起動します。  
<img src="https://4okadg.by.files.1drv.com/y4mctYmqN63oA8g1vDsSxYkyESON4qeNtOH7pXexcQRsqqIgxgFE79drmwj_Wg0Sa8CEBN6oIcSIxih1kTvIHXunvyqeFF_1VdJYdwmxnHsoYm7j91YP5DN9wrxOep0F156zX0IvmP3yI6RgyRtiCdc5xrgpLy-ZQiXWrzW5IGYlRTy6UDYbNbIFRXRcrqu9ATMtbIV4mZObVTAEp_JSKz3kQ?width=720&height=80&cropmode=none" width="500">
3. メッセージが表示されますが、**×** で閉じるか、設定アイコンから **今後は表示しない** に設定しておきます。  
<img src="https://4okzdg.by.files.1drv.com/y4m3GbK5JIosycM3s-RAPnUwKNhC2hCKYqEdDb7TwbVPfIlClpAN4CHujG8Ng5JCtKiHH48sGbvw9B4n9YqWAgYEXZoFAa870dhJY2olR5B17TVVfFy208OAP2_t3LR0ulUyOT-RJ768Jo4d2ykA74xprP3ocKuOrk8Hf8ehYg8C1khbp6cK-bsIKrwFEv_YsZ5E4BWtuw1QTa0GOPxfNBLGQ?width=894&height=204&cropmode=none" width="500">  
**[Memo]** このメッセージに関する情報はVS CodeサイトのFAQをご確認ください。
  * [VS Code公式サイト(英語) | Installation appears to be corrupt [Unsupported]](https://code.visualstudio.com/docs/supporting/faq#_installation-appears-to-be-corrupt-unsupported)
  * [VS Code非公式サイト(日本語) | VS Codeが破損しているようです](https://vscode-doc-jp.github.io/docs/supporting/faq.html#VS-Code%E3%81%8C%E7%A0%B4%E6%90%8D%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%88%E3%81%86%E3%81%A7%E3%81%99)

※複数回再起動を行わないと反映されないことが多々あるようです（コメント欄参照）
　うまく反映されない場合、複数VScodeの再起動を行ってください。

4. 初音ミクさん召喚！
<img src="https://4okydg.by.files.1drv.com/y4mLs9tgF-4NHw3S9cBT17ND97yUPM8bMdPy4gdFUKe3EifFNc2aCsTUy8eUipQwKXGczvMG5PgO13aKUSsuhQrL8eAQk-qzIvCM-EihjhzsmJ4SN-lH3tvQCxQJR6mmzCcTvUoPZ4Bdl178CFx6iboJz-3GlNT4gvcjtJOZahwqcbhq42xhnyF-wV64_mS02IuXoweTeOnJgb-x-KIH0Mqtw?width=1784&height=1236&cropmode=none" width="600">

5. マウスカーソルの動く方向にミクさんが向いてくれます。
6. ミクさんを移動させたい場合は、カーソルを当てて左クリックで操作します。

今回は以上です。

Have a nice Geek Life♪

※Twitterで最新情報配信中 [@ayatokura](https://twitter.com/ayatokura)