この記事はクソアプリアドベントカレンダー シリーズ3 22日目の投稿です！
さて、何をやりましょうかと考えたときに丁度クリスマスが近いので、リア充破壊系をやりたいな。と思った訳なのですが...
やりたいテーマが見つからない！！😭
悩んだ末に、そういえばVSCodeの拡張機能作った事ないから作ってみよう～という気分になったので、さくっとやってみました！
その名も！Chaosman！です。
早速どういったものかを先にお見せしましょう...
ネタ見せ
ここに良くありそうな、幸せの押し売りサイトがありますね。(架空のサイトです)
ソースコードはこんなのです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>素敵な出会いに感謝しよう</title>
</head>
<body>
<header>
<h1>素敵な出会いに感謝しよう</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">メッセージ</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<img src="img/images.jpg" alt="素敵な出会いに感謝しよう" width="500px" height="500px">
<p>あなたの理想で最高のパートナーを見つけましょう</p>
</section>
<section class="profiles">
<div class="profile-card">
<img src="img/img1.png" alt="プロフィール1">
<h2>素敵太郎・素敵花子</h2>
<p>共通の趣味: 星座鑑賞</p>
<button>2人の最高の出会いを見る</button>
</div>
<div class="profile-card">
<img src="img/img2.png" alt="プロフィール2">
<h2>素晴光一・素晴咲</h2>
<p>共通の趣味: カフェめぐり</p>
<button>2人の最高の出会いを見る</button>
</div>
<div class="profile-card">
<img src="img/img3.png" alt="プロフィール3">
<h2>最高拓哉・最高かおり</h2>
<p>共通の趣味: 海で最高の友達達と騒ぐ</p>
<button>2人の最高の出会いを見る</button>
</div>
</section>
</main>
<footer>
<p>© 2023 素敵な出会いに感謝しよう. All rights reserved.</p>
</footer>
</body>
</html>
そしてこの「Chaosman」が有効化している状態で、このhtmlファイルを「保存」をすると...
👇のコードに差し替えられてしまいます！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>呪!</title>
</head>
<body>
<header>
<h1>呪!</h1>
<nav>
<ul>
<li><a href="#">呪!</a></li>
<li><a href="#">呪!</a></li>
<li><a href="#">呪!</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<img src="https://test-***" alt="呪!" width="500px" height="500px">
<p>呪!</p>
</section>
<section class="profiles">
<div class="profile-card">
<img src="https://test-***" alt="プロフィール1">
<h2>呪!</h2>
<p>呪!</p>
<button>呪!</button>
</div>
<div class="profile-card">
<img src="https://test-***" alt="プロフィール2">
<h2>呪!</h2>
<p>呪!</p>
<button>呪!</button>
</div>
<div class="profile-card">
<img src="https://test-***" alt="プロフィール3">
<h2>呪!</h2>
<p>呪!</p>
<button>呪!</button>
</div>
</section>
</main>
<footer>
<p>© 2023 呪!. All rights reserved.</p>
</footer>
</body>
</html>
ソースコードのリア充感満載だった文言が「呪!」という文字に変化し、画像も差し替わってしまいました！
サイトはこうなります👇
そう！この「Chaosman」はリア充感のあるサイトを破壊するLinter(?)だったのです！！😇
解説 - VS Code拡張つくってみる
手順に関しては以下を参考にしながら進めました。
意外と簡単で、参考記事も多いので、ここでわざわざ全ての解説は致しません🙏
内容はいたってシンプルで、「保存」をトリガーにChatGptのAPIを叩いて、内容を書き換えてもらっているだけです。
なので、拡張機能の設定画面にAPIキーの入力箇所を設けてます。
htmlファイル限定で動作するようにしています。
...
export function activate(context: vscode.ExtensionContext) {
//保存をトリガーに動く
let disposableSave = vscode.workspace.onDidSaveTextDocument(async (document: vscode.TextDocument) => {
const activeEditor = vscode.window.activeTextEditor;
//html以外は早期リターン
if (document.languageId !== 'html' || !document.fileName.endsWith('.html')) {
return;
}
...
chatGptへのプロンプトは👇です。
const system_content =
'与えられたコード内にポジティブな文章があったら、それらを全て「呪!」という文字に置き換えてください。また<img>タグのsrc属性に指定されたURLを全て「https://test-****」に置き換えてください。';
さいごに
この拡張機能はパーティーグッズ的な感覚で作ったので、公開まではしてません。
やってみると意外と簡単だったので、なんとか数時間で一応形にする事ができました。
今後も自分なりの拡張機能や、世の中の役に立つ機能を作ってマーケットプレイスへ公開しようと思います！
さて、最後に、軽く告知させて頂きます🙌
実は、こんなイベントを開催、運営してます！
アプリだけでなく、デザインや企画アイディアなど...訳の分からない制作物であれば何でもOKというイベントです！
私はこの「Chaosman」を発表しようと思います～
もし、ご興味ある方いたらぜひお気軽にご参加くださいね😁
それでは、最後までご覧頂き有難うございました！！