Vueでクリーナーアプリ()作ってみた！

この記事では()というネットミームを多用しています。
知らない方はこちらを見ることをお勧めします。

https://kw-note.com/internet-slang/kuuhaku-kakko/

環境

• Microsoft Windows Pro Version 22H2 (OS Build 19045.5487)
• Powershell
• bun v1.2.3

初期化

PS C:\XXX> bun create vite@latest
? Project name: cleaner
Select a framework: Vue
Select a variant: TypeScript
PS C:\XXX> cd cleaner
PS C:\XXX> bun i

画面

App.vue

<template>

  <template v-if="state==State.Home" class="home">
    <h1>メモリクリーナー</h1>
    <p>デバイスのメモリをクリーンアップします</p>
    <button @click="state=State.Scan">クリーンアップ</button>
  </template>

  <div v-else-if="state==State.Scan" class="scan">
    <h1>スキャン中...</h1>
    <span class="loader">{{ loader }}</span><br>
    <span class="volume">{{ Math.round(progress) }}MB</span>
  </div>

  <div v-else-if="state==State.Clean" class="scan">
    <h1>クリーンアップ中...</h1>
    <span class="loader">{{ loader }}</span><br>
    <span class="volume">{{ Math.round(progress) }}MB / {{ Math.round(volume) }}MB</span>
  </div>

  <div v-else class="complete">
    <h1>クリーンアップが完了しました</h1>
    <p>あなたは安心してデバイスを使えます</p>
  </div>

</template>

変数について軽く説明します。

名前	説明
state	画面の状態です。const enumです。
loader	ローディングのo0ooみたいなやつです。
progress	スキャン()の進行度です。
volume	クリーンアップ()するメモリサイズです。

スタイル

style.css

:root{
  text-align: center;
}

App.vue

<style scoped>
h1{
  padding: 15px;
}
.home h1{
  background:skyblue;
  margin: 0;
  outline: 0;
}
button{
  font-size: 20px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background: springgreen;
  transition: all 0.5s ease;
}
button:hover{
  background: greenyellow;
}
div{ /* 背景を完全に満たすスタイル */
  background: springgreen;
  position: fixed;
  left: 0;
  top:  0;
  width: 100%;
  height: 100%;
  margin: 0;
  display:block;
}
.complete{
  background: greenyellow;
}
.volume{
  font-size: 40px;
}
.loader{
  font-family: monospace;
  white-space:pre;
}
</style>

【本題】クリーンアップ()プログラム

App.vue

<script setup lang="ts">
import { ref, watch } from 'vue';

const enum State{
  Home,
  Scan,
  Clean,
  Complete
}
const state = ref(State.Home);
const progress = ref(0);
const volume = ref(0);
watch(state,()=>{
  if(state.value == State.Scan){
    progress.value = 0;
    volume.value = Math.random() * 100 + 100; //スキャンする量を取得()
    const interval = setInterval(()=>{
      progress.value += Math.random()*2; //スキャン()
      if(progress.value > volume.value){ //スキャンが完了したらクリーンアップ
        clearInterval(interval);
        volume.value = progress.value; //ずれ補正
        setTimeout(()=>state.value = State.Clean, 1000)
      }
    },100)
  }else if(state.value == State.Clean){
    progress.value = 0; // クリーン状況を表示するためリセット
    const interval = setInterval(()=>{
      progress.value += Math.random(); //クリーンアップ処理()
      if(progress.value > volume.value){ //クリーンアップが終わったら終了画面に
        clearInterval(interval);
        state.value = State.Complete;
      }
    },100)
  }
})
// ローディングのやつの処理
const loader = ref("oooo");
let lv = 0;
const l = [ // ローディングテキストを配列で管理
  "oooooo",
  "0ooooo",
  "o0oooo",
  "oo0ooo",
  "ooo0oo",
  "oooo0o",
  "ooooo0",
]
setInterval(()=>{
  lv++;
  loader.value = l[lv%l.length];
  lv %= l.length;
},100)
</script>

スキャン処理解説

1. 進行状況をリセットする
2. スキャンするメモリ量を乱数から取得
3. 100ミリ秒(0.1秒)ごとに進行状況を0~2ずつ変える
4. 決めたスキャンするメモリ量を進行状況が超えたら1秒後にクリーンアップする

クリーンアップ処理解説

1. 進行状況をリセットする
2. 100ミリ秒ごとに進行状況を0~1ずつ変える
3. 決めたスキャンするメモリ量を進行状況が超えたら完了する

元ネタ

The source code of Windows'
troubleshooting program has leaked

#include <windows.h>
#include <stdio.h>

int main() {
    printf("Searching for problems...\n");
    Sleep(60000);
    printf("We didn't find any problems\n");
}

完成品

その他メタデータの編集などありますので実際に生()で見ていただけるとありがたいです。

あとがき

CSSは難しいです。

クリーンアップアプリはマルウェア等が
仕込まれることのあるのでなるべく使わないでください。
どうしても気になるなら再起動してください。
確実にすべてのメモリが解放され、
すべてのタスクが終わります。