メインコンテンツへスキップ
  1. 記事/

30 Days of Vibe Coding - Day 23 - RetroOS

Nuno Coração
著者
Nuno Coração
Principal Product Manager @ Docker
目次
30 Days of Vibe Coding - この記事は連載の一部です
パート 23: この記事

Day 23。AIにWindows 95を作ってもらった。

プロンプト
#

今回は純粋にノスタルジー全開で:

「ブラウザ上で動くWindows 95風のデスクトップ環境を作って。タスクバー、スタートメニュー、ドラッグ&リサイズ可能なウィンドウ、そしてメモ帳、電卓、ペイント、マインスイーパー、ターミナル、Internet Explorer、マイコンピュータなどのクラシックアプリを入れて。起動シーケンス、ピクセルアートのSVGアイコン、効果音、壁紙選択、CRTエフェクト、ブルースクリーンのイースターエッグも追加して。」

自分で試してみてね こちら

どうやって作ったか
#

Watchfireがこれを10個のタスクに分解してくれた。今回のスコープはヤバかった。これは単体のアプリじゃない。ウィンドウマネージャー、タスクバー、スタートメニュー、そして7つの独立したアプリケーションが全部その中で動く、まるごとOS UIなんだ。それぞれが独自の動作、独自のウィンドウ装飾、独自のインタラクションを持っている。

タスクリストはまずデスクトップシェル(タスクバー、スタートメニュー、ウィンドウ管理)から始まって、次に各アプリケーションを一つずつ、最後に起動シーケンス、ブルースクリーン、CRTスキャンラインエフェクト、効果音といった仕上げまでカバーしていた。

できあがったもの
#

こいつ、ちゃんと起動する。

起動画面

ページを読み込むと「RetroOS 95 - Click anywhere to start.」と表示された黒い画面が出てくる。クリックすると、本物そっくりのテキストモードPOSTシーケンスがスクロールしていく。そして「Starting RetroOS…」のプログレスバーが表示されてからデスクトップがロードされる。

POSTシーケンス

ロードバー

するとデスクトップが現れて、ちゃんとそれっぽく見える。あの独特なティール色。下部のごついグレーのタスクバー。隅にあるスタートボタン。左側に並んだデスクトップアイコンは、ピクセルアートのSVGアイコンで本当に1995年感がある。

デスクトップ

**スタートメニューがちゃんと動く。**スタートをクリックすると、プログラム、ドキュメント、設定、検索、ヘルプ、ファイル名を指定して実行、シャットダウンが並んだクラシックなカスケードメニューが出てくる。アプリもそこに一覧表示されている。Win95の代名詞だったあの立体的なベベルボーダーまで再現されている。

スタートメニュー

**ターミナルが意外と本格的。**ただの見た目だけの飾りじゃない。dirを実行するとAUTOEXEC.BATやCONFIG.SYSが並んだ偽のファイルリストが表示される。日付フォーマットやバイト数まで、出力フォーマットがDOSそっくり。verと打つとバージョン文字列まで返ってくる。

ターミナル

ターミナルのdir出力

**電卓がちゃんと動く。**ボタン配置、凹んだディスプレイ、ベベルフレーム。ちゃんと計算できる。パソコンの授業で暇な時に開いてたあの電卓そのまんま。

電卓とターミナル

**ペイントが使える。**キャンバス、下部のカラーパレット、そして実際に描ける。ツール選択もある。顔を描いてみた。だって1997年にMS Paintでみんながやってたことだから。

ペイントアプリ

**Internet Explorerに偽のホームページがある。**カラフルなテキスト、訪問者カウンター、ゲストブックリンクが載ったレトロ風「Welcome to my Homepage」ページが表示される。この作り込みには参った。

IEと他のアプリ

**マイコンピュータにドライブが表示される。**フロッピーのA:、ハードドライブのC:、CD-ROMのD:。存在しないファイルシステムのファイルブラウザだけど、見た目は完璧。

マイコンピュータ

**マインスイーパーがプレイできる。**上部にカウンターとスマイルフェイスが付いたクラシックなグリッド。数字、旗、地雷。本物そのもの。

**全てのウィンドウがドラッグ&リサイズ可能。**重ねたり、動かしたり、タスクバーに最小化したりできて、タスクバーには本物のOSと同じように開いているウィンドウが全部表示される。ウィンドウ管理システム全体がちゃんと動いている。

複数ウィンドウを開いた状態

そしてブルースクリーンのイースターエッグ。トリガー方法はネタバレしないけど、ちゃんと入ってるし、見た目もリアル。

バグレポート
#

正直、ここで報告することはあまりない。ウィンドウ管理は最初から動いた。アプリも全部正しくロードされた。気づいたのは主にこれくらい:

  • ウィンドウを下に引っ張りすぎるとタスクバーと重なることがある
  • 小さい画面だとCRTエフェクトがちょっとキツい
  • マインスイーパーの最初のクリックで地雷に当たることがある(本物は最初のクリックを保護してくれた)

些細なことだ。コアな体験は最初からしっかりしていた。

試してみて
#

RetroOSを起動する

黒い画面をクリックして起動。スタートをクリックして探検。全部開いてみて。ターミナルコマンドを試して。ペイントで何か描いて。マインスイーパーで遊んで。ブルースクリーンを見つけて。

ペイントと電卓を並べて表示

マイコンピュータのファイルブラウザ

Day 23の評価
#

これはノスタルジー要素だけで作る価値があるプロジェクトの一つ。でもそれ以上に、技術的なスコープが印象的だ。ウィンドウマネージャー、7つの独立したアプリ、起動シーケンス、効果音、キーボードショートカット、偽のファイルシステム、偽のインターネット。全部一回のプロンプトセッションから生まれた。

すごいのはディテールへのこだわり。ティール色のデスクトップ。ウィンドウ装飾の特定のグレー。ベベルボーダー。ウィンドウがアクティブな時と非アクティブな時のタスクバーボタンの見た目の違い。こういう細部を正確にしろなんて誰も言ってない。AIはWindows 95がどんな見た目だったか知っていて、その美学を完璧に再現した。

90年代半ばにベージュ色のタワーPCで初めてスタートボタンをクリックした世代なら、ぜひこれを試してほしい。あの頃に戻れるよ。


これは30 Days of Vibe Codingの23日目です。AIを使ったコーディングで30日間毎日プロジェクトを出荷するチャレンジをフォローしてね。

30 Days of Vibe Coding - この記事は連載の一部です
パート 23: この記事

関連記事