開発したWebアプリ: dev.wizard-notes.com
Open AI の Reasoning AI の最新モデル o3-mini, o3-mini-high が発表され、コーディング性能が素晴らしいと話題になっています。
ちょうど、イヤホン・ヘッドホンの音質や音量バランスなどの動作検証用に、PCやスマホから利用できるWebオシレータアプリを作りたいと考えていましたが、まとまった作業時間が取れず放置状態になっていました。
そこで、早速試してみたところ、仕様策定、実装、実環境での動作確認まで2時間強くらいで開発できてしまい非常に驚きました。
せっかくなので、開発したアプリの紹介も兼ねて開発の流れを記録したいと思います。
ChatGPT o3-mini / o3-mini-high について
- o3-mini は数学、コーディング、科学における o1 のパフォーマンスに匹敵し、より高速な応答を提供できる
- 特定のユースケースに合わせて最適化するためのオプション（低、中、高）を提供
- 速度と精度のトレードオフ
- o3-mini は ”medium”を使用
- 検索と連動可能
- 回数制限 (2025/2/2 時点)
体感ですが、o1-miniやo1と比べて o3-mini, o3-mini-highは思考や返答がかなり早くなっていると感じました。
性能としても、o3-mini-highは数学的・論理的なトピックでも十分に対話・議論できると思います。
開発の流れ
Plusプランだと o3-mini-high の使用回数が割と少ないので、なるべくo3-mini と 4o を使う方針としました。
仕様策定
まずはアイディアの発案（思考の発散）と仕様の整理をしてほしかったので、一般的な知識に基づいて論理的な回答をしてくれることを期待して o3-mini を使いました。
回答をみるとだいぶ適当で曖昧な要望にもかかわらず、ちゃんとブレストの土台を作ってくれているのがすごいです。
私: イヤホンやスピーカの確認用に、デバイスからいくつかの種類の音を選択して出力するWebアプリを作成したいです。機能としては、どういうところに独自性を持たせたらよいでしょうか。使いやすさを大事にしたいです
o3-mini: 使いやすさを重視しながら、他と差別化できる独自性を出すためのアイディアとして、以下の点を検討してみてはいかがでしょうか。 1. 多彩なテスト音とパラメータのカスタマイズ - 基本トーンの充実: 単純なサイン波やホワイトノイズ、ピンクノイズのほか、ステレオの左右チャンネル独立テスト、周波数スイープ（フェードイン・フェードアウト）、さらには複雑な音響パターン（エコーやリバーブ効果付きなど）も提供する。 - ユーザー定義の設定: ユーザーが周波数範囲、音量、再生時間などを自由に調整できるインターフェースを用意し、細かい調整ができるようにする。 2. 視覚的なフィードバックと解析 - リアルタイムの波形・スペクトル表示: 再生中の音声の波形や周波数スペクトル、レベルメーターを表示することで、視覚的にも正常動作かどうかが確認できる。 - 左右チャンネルのビジュアル比較: ステレオテスト時に左右チャンネルの出力レベルをグラフやアニメーションで比較表示することで、バランスの問題なども簡単に把握できる。 3. シンプルかつ直感的なUI/UX - ワンクリック操作: 初心者でも簡単にテストを開始できるよう、シンプルなボタン配置とわかりやすいラベルを採用する。 - レスポンシブデザイン: PC、スマートフォン、タブレットなどどのデバイスからも快適に操作できるデザインにする。 4. 結果の記録・比較機能 - テスト結果の保存・履歴管理: 各テスト結果をブラウザ内に保存（またはクラウド連携も検討）し、以前の結果と比較できるようにする。これにより、スピーカーやイヤホンの状態変化のトラッキングや、複数デバイスの比較が可能になる。 - 簡単なレポート出力: テスト結果をグラフや統計情報としてエクスポートできる機能を加えると、ユーザーが問題を発見した際のサポート資料としても活用できる。 5. 自動キャリブレーション機能（高度な機能として） - マイクとの連携: ユーザーのデバイス内蔵マイクまたは外部マイクを利用して、実際に再生された音を解析し、自動でキャリブレーションや歪みのチェックを行う。これにより、再生環境に合わせた最適な設定の提案が可能になる。 - 環境音のノイズリダクション: 周囲の環境音と比較しながらテストを実施し、実際の再生環境におけるノイズ耐性の確認も行えると便利です。 6. アクセシビリティと多言語対応 - 視覚・聴覚に配慮したデザイン: 色覚障害のあるユーザーや、補助機能を必要とするユーザーに向けたオプション（文字サイズ調整、音声ガイドなど）を用意する。 - 多言語サポート: 日本語だけでなく英語やその他の言語にも対応することで、グローバルなユーザーにも利用してもらえるようにする。 7. 拡張性とカスタマイズのためのAPI提供 - プラグインやスクリプトの導入: 他の開発者が自分用のテスト音や解析機能を追加できるよう、簡単なAPIやプラグインシステムを提供することで、コミュニティからのフィードバックや拡張が期待できます。 これらの機能を取り入れることで、単なる「音テストツール」以上の価値を提供し、ユーザーにとって使いやすく、かつ独自性のあるWebアプリになるでしょう。特に、ユーザーが直感的に操作できるインターフェースと、視覚的なフィードバック、そして結果の保存や比較ができる点は、日常的にデバイスの状態をチェックしたいユーザーにとって大きな魅力となります。
様々なアイディアを提案してもらいましたが、今回はシンプルなものを作りたかったので、音再生と描画に関する機能のみを実装するように伝えて、整理してもらいました。
o3-mini: 以下は、再生機能に特化したシンプルなアプリの使用（機能）を整理したものです。 --- ### 1. 基本再生機能 - テストサウンド再生 - シンプルなサウンド再生ボタンで、すぐに音が出る状態にする。 - 複数の基本波形（例：正弦波、矩形波、ノイズなど）を用意し、ユーザーが選択できるようにする。 - 周波数スイープ機能 - パラメータ設定： - 周波数範囲：ユーザーが開始周波数と終了周波数を設定できる。 - 再生時間幅：スイープ全体の再生時間を指定できる。 - 動作：設定に基づき、低い周波数から高い周波数（またはその逆）に徐々に変化させながら再生する。 --- ### 2. 視覚化（オシロスコープ風） - 波形表示 - 再生中のサウンドを、シンプルなオシロスコープ風のインターフェースでリアルタイム表示。 - 基本的な波形の動きが確認できるよう、過度な装飾を避けたクリーンなデザイン。 - 調整可能な表示設定 - 縦軸・横軸のスケールや更新速度など、必要に応じてユーザーが調整できるオプション。 --- ### 3. シンプルかつキャッチ―なデザイン - 直感的なUI - メイン機能（テストサウンド再生、周波数スイープ）のボタンやスライダーを大きく配置し、初めてのユーザーでも迷わないレイアウト。 - 視覚化部分は余計な情報を排除し、シンプルかつ洗練された見た目を実現。 - ミニマルなカラーリングとフォント - 清潔感のあるカラースキーム（例：白やグレーのベースにアクセントカラーを使用）で、視認性を高める。 - フォントは読みやすく、操作ボタンには直感的なアイコンを採用。 --- ### 4. 将来的な拡張性 - デバイス診断・測定機能（今後の予定） - 現段階では再生機能に特化するが、ユーザーのフィードバックを受け、後日デバイスの診断や測定機能を追加する可能性を視野に入れる。 --- この整理をもとに、まずは「シンプルで使いやすい再生機能」を中心に開発し、後のアップデートで視覚化や測定機能の拡張を検討するアプローチが望ましいでしょう。
ここまで5分くらいです。
設計・実装・検証
仕様が定まったので、設計・実装工程に入りました。なので、
私: ありがとうございます。それでは、上記の仕様で、WebAudioAPIを用いてcss, html, jsを書いてください。
と伝えて設計・実装してもらいました。
ここで、実際のソフトウェア開発の経験から、基礎的な部分の設計が優れているとテスト工程が非常に楽になります。
そこで、
- o3-mini-high で実装→人間が動作検証→ o3-mini-high に修正依頼（3回程度）
- o3-miniに
- 正常に動作しない場合の対処
- エラーメッセージに対しては o3-min
- GUI部などは別チャットを立ち上げてキャプチャを張り付けて 4o
というような流れで実装・動作検証を進めました。
結果的にはこの方法でアプリは完成しました。ただ、修正を重ねて次第に長くなったコードをo3-mini や 4o に全部投げて修正コードをもらうと、修正したはずの一部が壊れていたりもしました。そのため、コードを部分的に投げるか、場合によっては o3-mini-high を使うのがよいかと思います。
以下は o3-mini-high への1回目のリクエストです。
連鎖的な思考（Chain of Thought: CoT）が可視化されています。
270行くらいのコードが一瞬で生成されてしまい、かつ1回目からちゃんと音が鳴り、基礎的な仕様を満たすように動作しました。
この時点の生成されたコードで最終的な設計実装の6, 7割くらいが完了しているのには大変感動しました。
その後のやりとりも、いろいろ追加機能を注文してもすぐさま反映してくれます。
所感
o3-mini-highを活用することで、基本的な機能だけでも、音信号処理とWebアプリという専門領域のアプリ開発が、数時間という短い期間で実現できました*1。
趣味のプロジェクトでも仕事の案件でも、全工程が迅速に進むのを目の当たりにして、個人で大規模な開発や瞬時のプロトタイピングが可能な「AIペアプログラミング」の時代に突入したと実感しました。
また、今回は私がAIの途中成果物を都度確認・修正指示しましたが、いずれは評価・修正指示を担当するAIエージェントが設計・実装を担当するAIエージェントと対話しながら、プロダクトやサービスを自動的にブラッシュアップする仕組みが構築され、最終的には人間は完成した成果物を体験し、その品質を判断するだけで済む未来が訪れる気もします*2。
