この動画は、OpenAIの開発ツールCodexが持つマルチモーダル機能、特にビジュアル理解と自己チェック能力を活用したフロントエンド開発の実例を紹介している。研究チームのChanningとRomanが、旅行アプリのUIを改善する過程をデモンストレーションし、ホワイトボードでのスケッチから3D地球儀を含むインタラクティブな画面への変換、さらに旅行統計ダッシュボードの追加まで、Codexがいかに効率的にコードを生成し、デスクトップとモバイルの両方でレスポンシブに動作する美しいインターフェースを構築できるかを実演している。従来バックエンドコードでのみ可能だった自己検証機能が、GPT-5 Codexのマルチモーダル能力によってフロントエンド開発にも適用され、開発者の創造的なパートナーとして機能する様子が描かれている。
OpenAI Codexのマルチモーダル能力の紹介
皆さん、こんにちは。私はRomanです。Codexは、あなたがコードを書くあらゆる場所で一緒に作業できるAIチームメイトです。コンピューター上のCodex CLIや統合開発環境の拡張機能を使うこともできますし、ウェブやスマートフォンからいつでもタスクを送信できるCodex Cloudもあります。しかし今日特に注目したいのは、そのマルチモーダル機能という超能力です。
モデルが視覚的な理解を持つだけでなく、自分自身の作業を視覚的にチェックする能力を持つとき、それはさらに魔法のようなものになります。今日はモデルの訓練に携わったChanningが参加してくれていますので、詳しく話を聞いていきましょう。こんにちは、私はCodexの研究チームのChanningです。私たちが重点的に取り組んできた大きなことの一つは、モデルにマルチモーダル能力を活用するためのより多くのツールを与えて、より優れたソフトウェアエンジニアになれるようにすることです。
私が自分の作業をチェックして、物事が視覚的に期待通りに見えることを確認するのと同じように、モデルにも短いイテレーションでそれができるようにしたいのです。素晴らしいですね。それでは実際に例を見ながら、どのように機能するか確認していきましょうか。もちろんです。以前のデベロッパーデイで紹介したデモアプリの一つがあります。
目的地を発見するための画面と、場所を入力できるアシスタント画面があります。さあ、パリについて何を知りたいですか。かなり素晴らしいですよね。でも今のCodexならもっと良くできると思います。次のレベルに引き上げる能力があります。それで、このホーム画面をもっと魅力的にする方法を一緒にホワイトボードで考えてみませんか。
3D地球儀機能の設計
いいですね。3Dの地球儀を配置できますよ。なるほど。そしてユーザーが地球儀を回転させると、探索するピンが見えるようにします。左右にナビゲートすることもできますね。もちろんです。そして各都市の追加の詳細情報も表示します。その通りです。東京のような都市ですね。そうですね。目的地にとって有用かもしれないすべての詳細情報も含めて。
いいですね。それが良い出発点になると思います。ここでスケッチしたアプリの写真を撮るだけでいいはずです。ChatGPTに移動します。そうですね。Codexタスクを追加します。写真を入れて、やりたいことを説明するだけです。Wonderlustのホーム画面を再設計して、左側に3D回転地球儀を表示します。
右側には目的地の詳細を表示します。ユーザーは地球儀を流れるようにナビゲートできるようにします。ピンをクリックすると目的地が表示されるようにします。そしてキーボードの左右の矢印キーもマッピングできます。完璧です。そのプロンプトをCodexに送ります。完璧です。できるはずだと思います。
旅行ログ画面の追加設計
完璧ですね。また、そのタスクを送っている間に、アプリに追加の画面を加えることもできます。旅行ログのようなものと呼びましょうか。なるほど。統計のダッシュボードのようなものですね。全大陸を制覇するための完全なチェックリストを作ることもできます。素晴らしい、いいですね。大陸チェックリストですね。
飲んだワインのボトル数も個人的には入れたいですね。それは素晴らしいアイデアです。わかりました、ワインのボトル数ですね。もちろんです。撮影した写真の数も入れましょうか。いいですね。円グラフか、適切なものを作ってもらいましょう。わかりました。旅行ログという新しい画面をアプリに1つ追加します。これはユーザーにとって楽しくて興味深い統計のダッシュボードのようなものです。
アプリがモバイルでレスポンシブであることを確認してください。そしてデザインも他のすべてと一貫性があることを確認してください。わかりました。これをCodexに送って、作業させましょう。さて、これが動いている間に、Channingさん、あなたがすでにCodexのマルチモーダル機能を使った例を1つか2つ紹介していただけますか。もちろんです、喜んで。
マルチモーダル機能の実践例
やっていきましょう。通常どのように始めるかというと、変更を加えて、Codexにそれをやってもらうようお願いします。ほとんどの場合、正しいことをしてくれます。時には期待以上のこともあります。時には微調整をしたい場合もあって、そのときはスクリーンショットを撮ってアプリに送り返します。フルタイムでフロントエンド開発をしている他の人たちの中には、Playwright MCPを使っている人もいます。
つまり、Claudeがブラウザを開いて実行中のウェブアプリを見る能力を持つのと同じように、ツールを与えることで、彼らのループでモデルが作業中のアプリケーションを見て、自分の作業をチェックできるようにしているのです。つまり、例えばCodex CLIをローカルで使うときにそれを使えるということですね。そしてCodex Cloudでも、今送ったタスクで同じことができると。
まさにその通りです。Cloudでは目標を達成できるように表現力豊かで柔軟なツールセットを提供しています。MCPを通じて同じことをすれば、同じことができます。そうですね。こうしたエージェントコーディング機能を活用できるのは本当に素晴らしいですよね。クラウドコンテナでもローカルでもこれらのツールを使って。例えば、あなたがいじってみた例があれば見てみたいのですが。
ええ、多くの場合、誰かを説得しようとしているときに、最良の方法の一つはたくさんのデータを提示することです。ホワイトボードで作業を進めてグラフなどを作っていくのは素晴らしいのですが、その方法でデータを提示するのは難しいのです。実際、最近多くの人が行っているユースケースは、Codexにデータを引き渡したり、非常に複雑なコードベースを深く掘り下げて、視覚化を提示したり、物事を分解したりして、時には使い捨てのウェブアプリケーションを構築することです。
単一ページのようなもので、アーティファクトを保持しておく必要すらありませんが、スクリーンショットを誰かと共有するかもしれません。それは本当に魅力的なユースケースですね。実際、これを始める前に、モデルにたくさんのオープンデータを与えました。ニューヨーク市は実際にタクシーの情報、つまり市内の乗車に関する情報を公開しています。そこで実際にそのデータだけをコンテナに読み込んで、モデルにそれを訓練させてダッシュボードを構築しようとしました。
データビジュアライゼーションの活用
そして実際、かなり興味深いものが出てきました。異なるテーマや構造を作ってデータを提示する異なる方法などです。基本的に必要なだけの精度を追加できるようになっています。ホワイトボードのところでやったように、非常に薄いスケッチをして、モデルに詳細を埋めてもらうこともできます。
非常に具体的なスクリーンショット、例えばコンポーネントをこのように見せたいというものを撮影してそれを入力すれば、その達成のために最善を尽くしてくれます。そうですね、ナプキンスケッチからFigmaモックアプリケーションまで、あらゆる段階で対応できますね。これをチェックアウトする必要はありません。ローカルで実行する必要もありません。
トップレベルでどのデザインが好きか見るだけで、そこから反復していけます。それでは戻って、ホワイトボードから送った2つのタスクをチェックしましょうか。最初のものは3D地球儀を作るように依頼したもので、それをやってくれたようですね。わあ、すごい。ログを見ると、Three.jsを取り込んでいて、実際にアニメーション化していて、すべてを構築しています。
地球儀の見た目のテクスチャもあります。私には有望に見えますが、アニメーションが実際に動くかどうか見るのが本当に楽しみです。そのプルリクエストをローカルでチェックアウトしてみますか。やりましょう。プルリクエストを作成します。そしてターミナルでそれをチェックアウトして、開発サーバーを起動すればいいはずです。
実装結果の確認
なんてことだ。わかりました。信じられない。地球儀が私たちが言った通りに回転しています。探索方法を伝えるツールチップも上に配置することまで決めてくれました。素晴らしいですね。1つクリックすると、うわあ、動きます。アシスタントを開くボタンまであります。それでは今度は追加したかった旅行ログ画面をチェックして、Codexが何を考え出したか見てみましょう。
いくつかの選択肢を提示してくれました。この1つは本当に良いですね。アプリのデザインと本当にマッチしています。モバイルビューはどうでしょうか。レスポンシブであることを確認するようお願いしましたので、ここで実際に2つのスクリーンショットを撮っていることがわかります。1つはフルデスクトップ解像度、または一般的なデスクトップ解像度で、もう1つは一般的なモバイルビューです。
そして素晴らしいのは、フルスクリーンを撮影していることです。たとえファーストビューのセクションにない部分でも、エラーや重なりがあるかどうか確認できます。そしてこれはどんなものにも適用できるはずですよね。例えばダークモードで動作することを確認してくださいと言えば、必要な数だけスクリーンショットを撮ってくれるでしょう。その通りです。
社内の人々はまさにそれをやっています。ライトモード、ダークモード、レスポンシブ、異なるサイズなど、コンポーネントを通して実行しています。デザインチームにはすべてが良く見えることを確認したい異なるブレークポイントがあって、実際にそれをプロンプトの一部にして、プルリクエストを出す前にこれらすべてをチェックして確認したいと言うことができます。
今後の展望とまとめ
マルチモーダル性について他に興奮していることや、考えていることはありますか。そうですね、私たちが最初に与えたツールの1つはブラウザツールで、ウェブサイトとウェブアプリケーションを見る能力です。自分の作業を短いイテレーティブループでチェックできることが重要になる、他の多くのマルチモーダルソフトウェア開発タスクがあると思います。
モバイルエンジニアリング、さらにはデスクトップアプリケーションをどのように行うかを検討しようとしています。ウェブは本当にループが機能することを確認するための概念実証のようなものでした。ありがとうChanningさん。どういたしまして。これはCodexのマルチモーダル機能の簡単なツアーでした。モデルは自分の作業をチェックできるときにより良いパフォーマンスを発揮することがわかっています。
以前はバックエンドコードでしかそれができませんでした。しかし今では、GPT-5 Codexのマルチモーダルおよびエージェント能力を活用することで、フロントエンドコーディングでもそれを解放しました。そしてこれが、Codexを創造的なパートナーとしてどのようにペアリングできるかについてのアイデアを提供できることを願っています。始めるには、chatgpt.com/codexにアクセスしてください。ご視聴ありがとうございました。
コメント