リア充破壊系のクソアプリつくってみた (VS Code拡張機能で)

この記事はクソアプリアドベントカレンダー シリーズ3 22日目の投稿です！

https://qiita.com/advent-calendar/2023/kuso-app

さて、何をやりましょうかと考えたときに丁度クリスマスが近いので、リア充破壊系をやりたいな。と思った訳なのですが...

やりたいテーマが見つからない！！😭

悩んだ末に、そういえば**VSCodeの拡張機能**作った事ないから作ってみよう～という気分になったので、さくっとやってみました！

その名も！Chaosman！です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821082/773c5726-896e-c3a4-045f-5de451cb2fd3.png)

早速どういったものかを先にお見せしましょう...

## ネタ見せ

ここに良くありそうな、幸せの押し売りサイトがありますね。(架空のサイトです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821082/34120d1b-2334-a4f1-3d2a-f984b1389a64.png)

ソースコードはこんなのです。
```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="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>&copy; 2023 素敵な出会いに感謝しよう. All rights reserved.</p>
    </footer>
</body>
</html>
```

そしてこの「Chaosman」が有効化している状態で、このhtmlファイルを「保存」をすると...

👇のコードに差し替えられてしまいます！
```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>&copy; 2023 呪!. All rights reserved.</p>
    </footer>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821082/0196792e-5ab9-f3cd-faaa-32720311531f.png)

ソースコードのリア充感満載だった文言が「呪!」という文字に変化し、画像も差し替わってしまいました！

サイトはこうなります👇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821082/2711c700-f712-8c5c-fc42-71fd0eaa3b48.png)

そう！この「Chaosman」はリア充感のあるサイトを破壊するLinter(?)だったのです！！😇

## 解説 - VS Code拡張つくってみる
手順に関しては以下を参考にしながら進めました。
意外と簡単で、参考記事も多いので、ここでわざわざ全ての解説は致しません🙏

https://dev.classmethod.jp/articles/easy-vs-code-extension-development/

https://code.visualstudio.com/api/get-started/your-first-extension

内容はいたってシンプルで、「保存」をトリガーにChatGptのAPIを叩いて、内容を書き換えてもらっているだけです。

https://platform.openai.com/docs/api-reference/chat/create

なので、拡張機能の設定画面にAPIキーの入力箇所を設けてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821082/ad53b7cb-77de-c6ce-097c-661429c9ffea.png)

`html`ファイル限定で動作するようにしています。
```typescript
...
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へのプロンプトは👇です。

```typescript
const system_content =
        '与えられたコード内にポジティブな文章があったら、それらを全て「呪!」という文字に置き換えてください。また<img>タグのsrc属性に指定されたURLを全て「https://test-****」に置き換えてください。';
```
## さいごに
この拡張機能はパーティーグッズ的な感覚で作ったので、公開まではしてません。

やってみると意外と簡単だったので、なんとか数時間で一応形にする事ができました。

今後も自分なりの拡張機能や、世の中の役に立つ機能を作ってマーケットプレイスへ公開しようと思います！

さて、最後に、軽く告知させて頂きます🙌

実は、こんなイベントを開催、運営してます！

https://jackassons.connpass.com/event/300732/

アプリだけでなく、デザインや企画アイディアなど...訳の分からない制作物であれば何でもOKというイベントです！

私はこの「Chaosman」を発表しようと思います～

もし、ご興味ある方いたらぜひお気軽にご参加くださいね😁

それでは、最後までご覧頂き有難うございました！！