無限にホメてくれる VSCode Power Mode で自己肯定感を爆上げする

# はじめに

はじめまして。
オークファン入社歴一年目、インフラエンジニア歴一年目の @aucfan-0540 です。
業務では主に AWS を用いたインフラ環境の構築等に携わっています。


突然ですが、業務中に「なんか…ほめられたいな…」という気分になること、ありますよね！

特に私は、入社初日に「IP アドレスってなんですか？」と曇りなき目でたずね、先輩を絶句させた文系出身の初心者エンジニアなので、ネットワークに関しても AWS に関しても毎日覚えることがたくさんあります。
いまは日々の業務をこなすのに精一杯で、ほめてもらえるほどの実績はまだまだ残せそうにないです。

<br>
…でも、ほめてもらいたい……
<br>
自己肯定感を**爆上げ**したい……
<br>
……そうだ、**VSCode にほめてもらおう！**
<br>
ということで、無限にホメてくれる VSCode Power Mode を作ってみることにしました。


# VSCode Power Mode とは？

タイピングの際、カーソルに寄り添って爆発などを引き起こしてくれるご機嫌な拡張機能です。
デフォルトで備わっているアニメーションを三つほど紹介します。

**Magic**
![magic.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/62cbfbf3-f4f4-8858-c044-b88a9f5a6133.gif)



**Flames**
![flams2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/87eb664a-9edd-d059-6bed-5d9a40367924.gif)





**Fireworks**
![fireworks.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/1394c667-aa63-322a-626d-7b390498e161.gif)



その他のアニメーション、詳細はこちら
https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode

今回はこちらの拡張機能に手を加えて、無限にほめてもらおうと思います。

# ほめてもらうまでの道のり

大まかな手順としては

 1. GIF アニメーションを用意する
 2. Power Mode のディレクトリ配下に プリセット.js を追加する
 3. Power Mode の設定ファイルに作成したプリセットの定義を追加する
 4. Power Mode の設定ファイルにプリセット名を追加する


もっとざっくり言うと

1. GIF アニメーションを用意する
2. Power Mode の設定ファイルに追加する

です。それではやっていきましょう。

##  1. GIF アニメーションを用意する

上記で紹介した炎や花火のように、タイピングをしたら再生される GIF アニメーションを用意します。

今回はほめてもらうことが目的のため、文系出身の語彙力を生かし、心に響くほめ言葉を厳選して簡単なアニメーションを作成しました。

それがこちらです。
<br>
<br>
<img width="200" alt="R2uzD7ic4rx4ERaxt1MZ1638771445-1638771550.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/2df8fa1e-d2e0-1232-bea4-a0c0b6831d40.gif">
<br>
<br>
<br>
この時点でもう**ワクワクがとまらない**ですね。はやくほめてもらいたいです。

GIF アニメーションを作成するときは、背景を透過すると~~極力タイピングの邪魔にならない~~どんなテーマにも対応できて良い感じです。

こちらは base64 にエンコードして使用します。


##  2.  Power Mode のディレクトリ配下に js を追加する

がんばって作成したアニメーションを使用して js を作成します。


`Power Mode` をインストール後 `\hoovercj.vscode-power-mode-2.2.0\out\src\config\`を開くと、以下のように各プリセットの js ファイルが格納されています。

![hulairu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/64c07971-4bf6-323d-a024-5e5d8b28299a.png)



ここに `プリセット名.js` を追加しましょう。

今回は`saikou.js`にします。


```javascript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const saikou = "base64エンコードした GIF 情報";

// 大きさや位置、GIF アニメーションを繰り返す回数などが設定できます。

exports.Saikou = {
    enableShake: true,
    enableExplosions: true,
    maxExplosions: 1,
    explosionSize: 6,
    explosionFrequency: 3,
    explosionOrder: 'random',
    gifMode: 'continue',
    explosionDuration: 1100,
    explosionOffset: .35,
    backgroundMode: 'image',
    customExplosions: [
        saikou,
    ],
};
//# sourceMappingURL=saikou.js.map
```


##  3. Power Mode の設定ファイルに作成したプリセットの定義を追加する

`\hoovercj.vscode-power-mode-2.2.0\out\src\extension.js` に前項目で作成した js ファイルの定義を追記します。

```javascript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vscode = require("vscode");
const particles_1 = require("./config/particles");
const fireworks_1 = require("./config/fireworks");
const flames_1 = require("./config/flames");
const magic_1 = require("./config/magic");
const clippy_1 = require("./config/clippy");
const rift_1 = require("./config/rift");
const saikou_1 = require("./config/saikou"); // ← ここ！
const screen_shaker_1 = require("./screen-shaker/screen-shaker");
const cursor_exploder_1 = require("./cursor-exploder/cursor-exploder");
const progress_bar_timer_1 = require("./progress-bar-timer");
const status_bar_item_1 = require("./status-bar-item");
const DEFAULT_THEME_ID = 'particles';
const DEFAULT_THEME_CONFIG = particles_1.Particles;
// 中略
// Themes
let themes = {
    fireworks: fireworks_1.Fireworks,
    particles: particles_1.Particles,
    flames: flames_1.Flames,
    magic: magic_1.Magic,
    clippy: clippy_1.Clippy,
    ["simple-rift"]: rift_1.SimpleRift,
    ["exploding-rift"]: rift_1.ExplodingRift,
    saikou: saikou_1.Saikou, // ← ここ！
};
// 後略
```

##  4. Power Mode の設定ファイルにプリセット名を追加する

 `\hoovercj.vscode-power-mode-2.2.0\package.json`に以下のような配列があります。
そこへ作成したプリセット名を追記してください。

```json
"powermode.presets": {
   "type": "string",
   "enum": [
       "particles",
       "fireworks",
       "flames",
       "magic",
       "clippy",
       "simple-rift",
       "exploding-rift",
       "saikou"
    ],
   "default": "particles",
   "description": "Choose between different preset gifs to use when powermode is activated"
},
```

これでほめられる手筈はすべて整いました。


# さっそくほめられよう！

`VSCode` の `settings.json` 内で `powermode` を有効化した後、プリセット名に `saikou` を選択して再起動します。

```json
{
 "powermode.enabled":true,
 "powermode.presets":"saikou",
 "powermode.enableShake": false
}
```

<br>
<br>
<br>
ドキドキ
<br>
<br>
<br>
![sugoi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2302869/fa8f38b2-2aa1-564d-7519-8046aa47ab50.gif)
<br>
<br>
<br>
**sugoku homete kureru ! !**
<br>
<br>
<br>

# 所感

初心者すぎて技術共有できることが何もないょ……と毎日枕を濡らしていたところ、まるで天啓のような煌めきを放つ一筋の光 `VSCode Power Mode` が差し、意気揚々とこちらの記事を作成しました。

みなさんもぜひ、お気に入りの GIF があれば試してみてください。
私は邪魔だったのですぐオフにしました。

★メリークリスマス★

## お借りしたもの

 - 5000兆円ジェネレーター
   - https://auri.ga/5000generator/

# さいごに

株式会社オークファンではエンジニアを募集しております。
ご興味持っていただけた方はぜひ！