【実録】Codexと「対話」して1時間半でデスクトップアプリを完成させる。VibeCodingの衝撃

「コードを書く」のではなく「完成を定義する」。

最近、エンジニアの間で話題の VibeCoding（バイブコーディング）。また4月からOpenAI のCodexが物凄く進化してきて、完全にAI開発ツールのTopになりました。この２つを使うと、従来の「設計→実装→テスト」という重厚なプロセスを飛び越え、AIと「ノリ（Vibe）」を合わせながら爆速でプロダクトを作ることが実験できました。

今回は、メディア処理ツール 『MediaSplitter AI』 をVibeCodingで開発した際の全記録を公開します。PRD（製品要件定義書）と手書きの画面イメージを渡してから、AI（Whisper）内蔵のデスクトップアプリとしてビルドするまで、Codexが実質的にわずか 約1時間半 だけでアプリケションを完成させました👍。

1. プロジェクト概要：MediaSplitter AI とは？

動画編集ソフトを立ち上げるほどではないけれど、「ここからここまでを切り抜きたい」「ついでに文字起こしもしたい」という日常的なニーズを解消するツールです。

• コア機能: 高速動画分割（FFmpeg）、AI文字起こし（Whisper）、音声抽出。
• 技術スタック: Tauri (Rust) + SvelteKit + Tailwind CSS。

2. 開発ログ：爆速のタイムライン

STEP 1: PRDからMVPを一気に生成 (Codex処理： 8分間)

まず、Markdown形式のPRDとイメージ画像をAIに投げました。

AIはわずか8分で、以下の機能を備えたWebベースのプロトタイプを構築。

• 成果: ダークモードのプロ向けUI、プレビュー再生、FFmpegによるストリームコピー（再エンコードなしの高速処理）。
• Vibeのポイント: 「まずは動くものを作る」という指示に対し、Node.jsサーバーとフロントエンドの構成を瞬時に提案してきました。

STEP 2: UI/UXの「心地よさ」を追求 (Codex処理： 10分間)

「StartとEndをボタンで打ちたい」「範囲を視覚的に見たい」といった、ユーザー体験に直結する部分を調整。

• 追加機能: タイムライン上への縦線表示、選択範囲のハイライト。
• 気づき: VibeCodingでは、「もう少しこうして」という曖昧な表現をAIがコードに落とし込んでくれるため、微調整のループが非常に速いです。

STEP 3: Tauriによるデスクトップ化 (Codex処理： 15分間)

Webアプリとして完成したものを、Mac/Windowsで動くデスクトップアプリ（Tauri）へ移行。

• 技術的ブレイクスルー: ブラウザでは困難な「ローカルファイルの直接操作」を、Rust側のバックエンド処理に切り替え。GitHub Actionsの設定まで自動生成。

STEP 4: AI文字起こしの統合と「ポータビリティ問題」の解決 (人間とCodex複数回会話： 1時間)

ここが最もドラマチックな場面でした。当初はPython版のWhisperを使っていましたが、配布時の環境依存（Pythonやライブラリのインストール）がネックに。

• 解決策: whisper.cpp（Rustバインディング）への切り替えを提案。
• 最終形態: FFmpegバイナリとWhisperの学習済みモデルをアプリ内に「同梱」する設定を完遂。
• 成果: 「インストールするだけで、どのPCでもAI文字起こしができる」真のポータブルアプリが誕生。

3. VibeCodingを成功させる3つの秘訣

今回の開発を通じて見えた、AI駆動開発のコツを紹介します。

① PRD（要件定義）をしっかり渡す

AIは魔法使いではありません。最初に「何を作りたいか」「ターゲットは誰か」を明確なドキュメント（PRD.md）として渡すことで、AIの出力の精度（Vibe）が劇的に向上します。

② 「捨てやすさ」を許容する

途中で「純粋なHTML版も作って」と依頼したように、異なる構成を試すコストが極めて低いです。正解に固執せず、複数のパターンを生成させて最適なものを選ぶ「オーケストレーター」の視点が重要です。

③ 環境構築の壁をAIと一緒に乗り越える

今回の「Pythonの環境エラー」のように、エンジニアが一番嫌がる環境構築のトラブルも、エラーログをそのまま貼ればAIが仮想環境（venv）や代替案（C++版への移行）を提示してくれます。

4. 結論：VibeCodingは「興味」だけで始められる

「プログラミングができないとアプリは作れない」という時代は終わりました。今回の MediaSplitter AI は、複雑なRustのコードやFFmpegのコマンドを一行も手書きすることなく、Codexとの対話だけで完成しました。

総作業時間: 95分

書いたコード: 0行（すべてCodexによる生成と調整）

もし、あなたのデスクトップに「いつか作りたいアイデアのメモ」があるなら、今すぐCodexにそのメモを投げ込んでみてください。その瞬間から、あなたのVibeCodingが始まります。

技術スタックのまとめ（今回使用したもの）

• Frontend: HTML5, CSS3 (Tailwind), JavaScript
• Backend: Node.js (初期), Rust / Tauri (最終)
• AI: OpenAI Whisper (whisper-rs)
• Engine: FFmpeg (Stream Copy)

執筆者の独り言:

1時間前までブラウザで動いていたものが、気づけばMacの.appファイルとしてデスクトップで動いている。この全能感こそがCodexの醍醐味です。

ソースコード公開中：https://github.com/perfact-tang/mediaeditor

また、PRD(要件定義書)の内容は下記となります。

🛠️ MediaSplitter AI：製品要件定義書

1. プロジェクト概要

• 製品名: MediaSplitter AI (仮)
• コンセプト: 「切る、出す、書き起こす」を最短ステップで。AI（Whisper）と高速エンジン（FFmpeg）を搭載した、Mac/Win両対応のメディア処理ツール。
• コア価値: 動画編集ソフトを開くほどではない「切り出し・書き出し・文字起こし」作業を、数クリックで完結させる。

2. 機能要件

2.1 入力・メディア管理

2.2 編集・プレビュー（UIの核）

• 高性能プレイヤー: 0.5x 〜 5.0x の可変速再生。
• 波形表示タイムライン: 音声の大きさを視覚化し、切りどころを判断しやすくする。
• セグメント管理: * 「＋」ボタンまたはショートカットキーで現在地を分割点として登録。
  • リスト形式で開始〜終了時間を表示し、個別に削除・微調整が可能。

2.3 分割・抽出ロジック

• 高速分割（Stream Copy）: 再エンコードを行わず、画質劣化なしで瞬時に切り出し（FFmpeg利用）。
• 自動検出（オプション）: * 静音検出: 無音区間を自動判別してカット点を打つ。
  • シーン検出: 映像の切り替わりを検知（将来拡張）。

2.4 AI 文字起こし (Transcription)

• エンジン: OpenAI Whisper を採用（ローカル実行優先）。
• 出力: プレーンテキスト（.txt）および字幕ファイル（.srt）形式。
• 言語: 日本語・中国語・韓国語・英語・自動判別に対応。

2.5 出力設定 (Output)

• 一括処理: 指定した全セグメントを1クリックで一括書き出し。
• マルチ出力トグル: 1つの区間に対し「動画・音声・テキスト」を個別にチェックして同時出力。

3. 画面設計イメージ

図で描いていただいた直感的なレイアウトを採用します。

4. 技術スタック（推奨）

• Framework: Tauri (軽量・高速・Mac/Win両対応)
• Frontend: Sveletkit + Tailwind CSS
• Backend (Rust):
  • ffmpeg-next: 動画・音声の高速切り出し。
  • whisper-rs: ローカルでのAI文字起こし。
• Build/Distribution: GitHub Actions による .dmg (Mac) と .msi (Win) の自動ビルド。

5. ロードマップ：3段階の開発ステップ

【Phase 1】MVP（最小機能版）

「まずは動くものを作る」

• 動画・音声の読み込みと再生。
• 手動での区間指定 ＋ FFmpegによる動画分割（再エンコードなし）。
• Mac/Win両方でのビルド確認。

【Phase 2】AI & 高機能化

「図の要件をすべて満たす」

• Whisperによる文字起こし機能の実装。
• 音声波形の表示。
• 出力チェックボックス（動画/音声/文字）の連動。

【Phase 3】プロ仕様への磨き込み

「さらに便利に」

• 静音自動検出機能。
• 字幕の動画焼き込み（Hardsub）機能。
• GPU加速（処理の高速化）対応。

📝 開発者（あなた）へのメッセージ

この統合案は、「手軽さ」と「多機能」のバランスを重視しています。特にTauriとRustを使うことで、ユーザーは「重い編集ソフトを立ち上げるストレス」から解放されるはずです。