はじめに
はじめまして。
オークファン入社歴一年目、インフラエンジニア歴一年目の @aucfan-0540 です。
業務では主に AWS を用いたインフラ環境の構築等に携わっています。
突然ですが、業務中に「なんか…ほめられたいな…」という気分になること、ありますよね！
特に私は、入社初日に「IP アドレスってなんですか？」と曇りなき目でたずね、先輩を絶句させた文系出身の初心者エンジニアなので、ネットワークに関しても AWS に関しても毎日覚えることがたくさんあります。
いまは日々の業務をこなすのに精一杯で、ほめてもらえるほどの実績はまだまだ残せそうにないです。
…でも、ほめてもらいたい……
自己肯定感を爆上げしたい……
……そうだ、VSCode にほめてもらおう！
ということで、無限にホメてくれる VSCode Power Mode を作ってみることにしました。
VSCode Power Mode とは？
タイピングの際、カーソルに寄り添って爆発などを引き起こしてくれるご機嫌な拡張機能です。
デフォルトで備わっているアニメーションを三つほど紹介します。
Magic
Flames
Fireworks
その他のアニメーション、詳細はこちら
https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode
今回はこちらの拡張機能に手を加えて、無限にほめてもらおうと思います。
ほめてもらうまでの道のり
大まかな手順としては
- GIF アニメーションを用意する
- Power Mode のディレクトリ配下に プリセット.js を追加する
- Power Mode の設定ファイルに作成したプリセットの定義を追加する
- Power Mode の設定ファイルにプリセット名を追加する
もっとざっくり言うと
- GIF アニメーションを用意する
- Power Mode の設定ファイルに追加する
です。それではやっていきましょう。
1. GIF アニメーションを用意する
上記で紹介した炎や花火のように、タイピングをしたら再生される GIF アニメーションを用意します。
今回はほめてもらうことが目的のため、文系出身の語彙力を生かし、心に響くほめ言葉を厳選して簡単なアニメーションを作成しました。
それがこちらです。
この時点でもうワクワクがとまらないですね。はやくほめてもらいたいです。
GIF アニメーションを作成するときは、背景を透過すると極力タイピングの邪魔にならないどんなテーマにも対応できて良い感じです。
こちらは base64 にエンコードして使用します。
2. Power Mode のディレクトリ配下に js を追加する
がんばって作成したアニメーションを使用して js を作成します。
Power Mode をインストール後 \hoovercj.vscode-power-mode-2.2.0\out\src\config\を開くと、以下のように各プリセットの js ファイルが格納されています。
ここに プリセット名.js を追加しましょう。
今回はsaikou.jsにします。
"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 ファイルの定義を追記します。
"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に以下のような配列があります。
そこへ作成したプリセット名を追記してください。
"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 を選択して再起動します。
{
"powermode.enabled":true,
"powermode.presets":"saikou",
"powermode.enableShake": false
}
ドキドキ
sugoku homete kureru ! !
所感
初心者すぎて技術共有できることが何もないょ……と毎日枕を濡らしていたところ、まるで天啓のような煌めきを放つ一筋の光 VSCode Power Mode が差し、意気揚々とこちらの記事を作成しました。
みなさんもぜひ、お気に入りの GIF があれば試してみてください。
私は邪魔だったのですぐオフにしました。
★メリークリスマス★
お借りしたもの
- 5000兆円ジェネレーター
さいごに
株式会社オークファンではエンジニアを募集しております。
ご興味持っていただけた方はぜひ！