はじめに
ビルド待ちやデプロイ待ちの時間、しょうがないですよね。
たとえ暇そうにしている人がいても、インストール中の画面が見えたら「なんか何もしてないけど、インストール作業してるし…」と思ってそっとしますよね。
そんな感じを演出するために、Infinity Loaderというブラウザ拡張機能を作りました。
この記事では、ジョークアプリとして作り込みつつも、真面目に取り組んだ技術的な知見（ターミナルシミュレーション、ランダム故障、多言語対応など）について共有します。
Infinity Loaderとは
一言で言うと、「無限に続くフェイクのインストール作業してる風画面」を表示するブラウザ拡張機能です。
-
それっぽいコマンド（
npm install,docker pullなど）が流れる -
プログレスバーが99%で止まる、あるいは突然エラーを吐く
-
「Doors OS」という謎のパロディOS上で動作する
ジョークソフトですが、見た目の「本物感」にはこだわりました。
技術スタック
- Frontend: React + Vite + TypeScript
- Styling: Vanilla CSS (Terminalデザイン)
-
i18n: Chrome extension i18n API (
_locales)
工夫した点と技術的Tips
1. ターミナルの「本物感」を出すロジック
単にテキストを流すだけでは面白くありません。以下の3つを組み合わせて「待たされている感」を演出しています。
- タイピング演出: コマンド入力を1文字ずつ表示。
- 非線形プログレスバー: 進捗が一定ではなく、80%くらいから急激に遅くなったり、99%で一時停止したりする「あるある」を実装しました。
- ランダム故障シミュレーター: 稀に「Kernel Panic」などの派手なエラーログが表示され、自動修復される機能を入れました。（Ctrl + e で手動でエラーを出せます。）
// 進捗を遅くするロジックの抜粋
const increment = progress < 80
? getRandomInt(1, 10)
: progress < 95
? getRandomInt(0, 2)
: getRandomInt(0, 1); // 95%以降は牛歩
2. Chrome Extension標準のi18nへの移行
当初はReact内で簡易的な翻訳オブジェクトを持っていましたが、Chrome Web Storeで多言語向けに公開するにあたり、
https://developer.chrome.com/docs/extensions/reference/api/i18n#concepts_and_usage
に記載してある方法で多言語化が必要だったため、chrome.i18n API（_locales フォルダを使用する方式）に移行しました。（いつも忘れる）
Vite環境でこれを扱う際、public/_locales にファイルを置く必要があります。また、React側から呼び出すためにシンプルなラッパーを作成しました。
const getMsg = (key: string) => {
if (typeof chrome !== 'undefined' && chrome.i18n) {
return chrome.i18n.getMessage(key) || key;
}
return key;
}
3. パロディデータの自動生成
npm install {pkg} の {pkg} 部分に、react-fake, typescript-lighting, fs-extra-cheese といった実在しそうで絶妙に違うパロディ名を大量に用意し、ランダムで組み合わせています。
おわりに
「役に立たないものを全力で作る」っていいですよね。
でも、役に立つはずと思って作成したアプリ・拡張機能もあるので、見て気になるものはインストールしていただけると嬉しいです。
https://t-okb-dev.github.io/