Day 30。最終日。OSを作った。
本物じゃない。ブラウザ上のフェイクOS。でも、起動して、ログインして、ファイルマネージャーを開いて、ウィンドウをリサイズして、角にスナップして、ワークスペースを切り替えて、neofetchが動くターミナルを開いて、壁紙を変えて、今月作った29個のプロジェクトをアプリとして起動できる、そういうフェイク。
これがまとめのプロジェクト。過去30日間のすべてのプロジェクトがこの中に入っている。
プロンプト#
「ウェブベースのデスクトップOSを作って。ドラッグ、リサイズ、最小化、最大化、スナップ付きのウィンドウ管理。複数ワークスペース。タスクバー、スタートメニュー、スポットライト検索、Alt+Tab。ブートシーケンス、ログイン画面、ロック画面、スクリーンセーバー。アクセントカラー付きのダーク/ライトテーマ。パララックス付きの壁紙。デスクトップウィジェット。内蔵アプリ：ファイルマネージャー、テキストエディタ、neofetch付きターミナル、ブラウザ、電卓、設定、ミュージックプレイヤー、画像ビューア、ペイント、カレンダー。そしてVibe30の全プロジェクトをインストール済みアプリとしてアクセスできるようにして。」
チャレンジ最大のプロンプトで、最大のプロジェクト。
どうやって作ったか#
Watchfireがこれを25個のタスクに分解してくれた。チャレンジ中の最高タスク数ではないけど（コードエディタは43だった）、スコープの広さは一番。これは1つのアプリじゃない。他のすべてのアプリを内包するシェルだった。
タスクはOS構築（と呼べるなら）に期待されるすべてをカバーしていた：コアのウィンドウ管理、ワークスペースシステム、タスクバーとシステムトレイ、スタートメニュー、スポットライト検索、Alt+Tabスイッチャー、ブートとログインフロー、ロック画面とスクリーンセーバー、テーマエンジン、パララックス付き壁紙システム、デスクトップウィジェット、そして各内蔵アプリがそれぞれのタスク。最後のタスクは30個のVibe30プロジェクトすべてを起動可能なアプリとして統合し、ウェルカムツアーを構築することだった。
30日間で一番手を動かした。コードを書くんじゃなく、インタラクションのテスト。ウィンドウスナップにはエッジケースが山ほどある。角にドラッグしたら？スナップ済みウィンドウを最大化したら？ウィンドウをドラッグ中にワークスペースを切り替えたら？そういうのを試しては報告するの繰り返し。
出来上がったもの#
起動する。ロードバーとシステムメッセージがスクロールするブートシーケンスアニメーションがある。それからログイン画面。そしてデスクトップが読み込まれる。
ウィンドウ管理が実際に動く。 ウィンドウをドラッグ。どの端や角でも掴んでリサイズ。タイトルバーをダブルクリックで最大化。左端にドラッグで左スナップ、右端で右スナップ、角で4分割スナップ。タスクバーに最小化してクリックで復元。シンプルに聞こえるけど、百万個の細かいインタラクションの詳細がある。
4つのワークスペース。 Ctrl+1からCtrl+4で切り替え、またはタスクバーでクリック。各ワークスペースに独自のウィンドウセット。本物のマルチデスクトップのように感じる。
タスクバーがガチ。 スタートメニューボタン、ピン留めアプリ、開いているウィンドウのインジケーター、ワークスペーススイッチャー、時計付きシステムトレイ。スタートメニューをクリックするとカテゴリ別のアプリランチャーが出る。Cmd+Kでスポットライト検索、タイプすればどのアプリも即座に見つかる。Alt+Tabでプレビュー付きウィンドウスイッチャー。
ダークとライトテーマ、9つのアクセントカラー。 設定を開いて、テーマを選んで、アクセントカラーを選べば、OS全体が再描画される。マウスの動きに反応するパララックスエフェクト付きの壁紙が4種類。
内蔵アプリが動く。 ファイルマネージャーは仮想ファイルシステムをブラウズする。テキストエディタはアンドゥ/リドゥができて、ファイルの保存/オープンも可能。ターミナルはコマンドを実行し、miniOsのシステム情報を表示するneofetchも動く。電卓はキーボード入力に対応。ペイントでお絵かきできる。カレンダーも動く。
そしてVibe30アプリ。 30個のプロジェクトすべてがスタートメニューに独自のカテゴリで表示される。ウェブプロジェクトはminiOsウィンドウ内の埋め込みiframeで開く。ブラウザで動かせないTUIやネイティブプロジェクトは、リポジトリとライブデモへのリンク付きプロジェクトカードを表示する。プラットフォーマーを1つのウィンドウで、スネークを別のウィンドウで、ワードルを3つ目のウィンドウで動かしながら、バックグラウンドでミュージックプレイヤーを再生できる。
この最後の部分がまとめプロジェクトたる所以。ただのOSクローンじゃない。チャレンジ全体のコンテナだ。
バグレポート#
全プロジェクト中、一番長いバグリストだった：
- ウィンドウの下端リサイズハンドルが小さすぎた
- 最大化済みウィンドウで角スナップが効かなかった
- ウィンドウにフォーカスがあるとスクリーンセーバーが発動しなかった
- ウィンドウを最小化した後のAlt+Tab順序がおかしかった
- ワークスペース切り替え時にスポットライト検索結果が更新されなかった
- X-Frame-Optionsヘッダーのせいで一部のVibe30 iframeが読み込めなかった
- ブートシーケンスが速すぎた（皮肉なバグレポートだけど、リアルに感じさせる必要があった）
- Safariでパララックスエフェクトがガタついた
ウィンドウ管理のエッジケースがメインテーマだった。スナップが動いたと思うたびに、壊れる別の組み合わせが見つかった。
数字#
- 25個のWatchfireタスク アーキテクチャからウェルカムツアーまで
- 30個のVibe30プロジェクト 起動可能なアプリとして統合
- 10個の内蔵アプリ（ファイルマネージャー、テキストエディタ、ターミナル、ブラウザ、電卓、設定、ミュージックプレイヤー、画像ビューア、ペイント、カレンダー）
- 4ワークスペース、9アクセントカラー、4壁紙、2テーマ
- Next.js 16, React 19, TypeScript, Tailwind CSS 4
試してみて#
デスクトップでの体験がベスト。キーボードショートカットを試してみて：Cmd+Kでスポットライト、Ctrl+1-4でワークスペース、Alt+Tabでウィンドウ切り替え。
Day 30の評決#
何度考えてもこの荒唐無稽さに戻ってくる。AIにOSを作ってくれと頼んだら、作ってくれた。フェイクのタスクバーがあるだけで中身のないおもちゃデモじゃない。本物のウィンドウ管理、本物のワークスペース分離、本物のキーボードナビゲーション、本物のテーマ機能、そして40個の動くアプリケーションが中に入っている。
本物のOSか？明らかに違う。でも本物のソフトウェアだ。ウィンドウスナップだけでも、自分一人で正しく実装するのは大変だろう。このチャレンジの30プロジェクトすべてがその中で、同時に、それぞれのウィンドウで、別々のワークスペースで動く。
Day 1では一文からプラットフォーマーを作った。Day 30では、そのプラットフォーマーと、その間に作ったすべてを内包するオペレーティングシステムを作った。
30プロジェクト。30日間。完了。
これは30 Days of Vibe Codingの30日目です。これが最後のプロジェクトですが、もう1つ投稿があります：30日間で30プロジェクトを出荷して学んだことすべてをまとめた完全なラップアップです。
