ChatGPTの画面内でコード生成物のプレビュー表示やコード編集が可能に

ChatGPTがアップデートされ、生成したゲームのプレビュー表示やコードの編集をChatGPTの画面内で実行できるようになりました。すでに日本の無料ユーザー向けにも展開されていたので実際に使ってみました。

まずChatGPTに「テトリスをプレイ可能なウェブページ」のHTMLコードを生成してもらいます。

出力が完了したら、コード表示エリアの右上にある赤枠で囲ったトグルスイッチをクリック。

チャット欄の内部に「テトリスをプレイできるウェブページ」のプレビューが表示されました。

プレビュー画面右上の拡大ボタンをクリック。

ChatGPTの画面内にプレビュー画面が大きく表示されました。この画面で実際に矢印キーを使ってテトリスをプレイ可能です。

さらに、コードを編集することもできます。まずプレビュー画面の左上にある「コードを表示する」をクリック。

画面左側にコードが表示されました。

コード表示エリアはエディターになっていて、コードを自由に書き換えられます。コードを書き換えるとリアルタイムでプレビュー画面に反映されます。

プレビュー表示機能やコード編集機能は無料ユーザーでも利用可能です。