本記事では新しくChatGPTに追加された「Canvasのコードプレビュー」について解説していきます。

• Canvas機能は、チャットのやりとりだけではなく、別タブである“キャンバス”上で文章やコードを編集したり、共同作業を行ったりできる画期的な機能でした。

• 今回の注目点は、そこに「生成したコードを即時プレビュー表示できる」という強力なアップデートが加わったことです。

• さらに、Canvasが o1（Pro / Plus / Team）に対応しました。これまでは o1ファミリーモデルに対応していませんでしたが、今回の対応により、より高度なモデルを使ってCanvasを利用できるようになりました。

• また、macOS向けのChatGPTデスクトップアプリでも、全プランでCanvas機能を自由に使えるようになっています。

ChatGPTがHTML・CSS・JavaScriptといったWeb関連のコードを生成してくれたあと、そのままの画面でプレビューを確認できます。とくにフロントエンド開発や簡易的なWebデザインのテスト、資料づくりなどに活用できます。

Canvas機能の基本概要

Canvas機能とは？

• チャット画面と別タブ（キャンバス）で作業する機能
  従来のChatGPTでは、文章生成結果はチャット欄のやりとりとしてのみ表示されていました。
  
  Canvas機能を使うと、チャットで行った指示に対する生成物を別の編集画面（キャンバス）で表示・編集できます。

• ライティング＆コーディングに便利
  文章作成の場合、キャンバス上で自由にテキストを修正しながら、必要部分を選択して「ここをもっと詳しく」「ここを要約して」など、部分的な指示を送れます。
  
  コーディングの場合、生成されたコードをキャンバス上で編集・追記し、再度ChatGPTに修正を依頼できます。

バージョン管理

Canvas機能では、以下のようなメリットも挙げられます。

1. バージョン復元: 過去のバージョンをさかのぼり、任意の地点にロールバック可能

2. UIカスタマイズ: キャンバス画面が広いので、コードや長文を扱うのに最適

より詳しい解説は、過去に執筆したこちらの記事でもご紹介しています。Canvas機能の基本をまだ知らない方は、あわせてご覧ください。

新機能「コードプレビュー」とは？

Canvas機能で文章やコードを生成・編集できることは以前から可能でしたが、これまでは「HTMLなどのコードを生成しても、実際のブラウザ表示は別の場所で確認する必要がある」のが難点でした。

今回のアップデートで、Canvas画面右上あたりにある“プレビュー”のアイコンをクリックするだけで、生成したWebコードを即時にプレビューできるようになっています。

具体的には以下のような手順です。

① ChatGPTにプロンプトを送信してHTML・CSS・JavaScriptなどのコードを生成。

② Canvas画面が表示されるので、右上にある「▶」（プレビュー）アイコンをクリック。Canvasが表示されないない場合は、新しく追加されたコードブロック右上に表示される Editボタンを押してコードをCanvasに表示させます。

③ すると、キャンバス上にリアルタイムでレンダリングされたWebページが表示されます。

どんな言語に対応している？

現時点では、特にWeb関連（HTML/CSS/JavaScript/React）のプレビューが中心です。
Pythonなどのサーバーサイド言語における実行環境としては機能しません。

機能を使うメリット

1. 即時フィードバック
   コードを生成して、その場で表示結果を確認できます。レイアウト崩れや配色の問題があればすぐに気づけるので、修正がスピーディに行えます。

2. デザイン調整の効率UP
   「もう少しボタンを大きく」「背景色を青系に」など細かいUI調整をする際、都度ローカル環境でHTMLファイルを開き直す手間が不要です。ChatGPTに追加指示してリアルタイムに反映＆プレビューを繰り返せます。

3. チームでの簡易プロトタイピング
   小規模なプロトタイプやクイックモックアップであれば、Canvas上だけでチームメンバーと確認し合えるので、デザイナー・エンジニア間のコミュニケーションロスが減ります。

4. ドキュメンテーションや学習用途
   Web関連の勉強をしている方が、ChatGPTにコードの例を聞いて「なるほど、こうなるのか」とプレビュー結果を即時に見られるのは便利。デモ用の資料を作るときなどにも重宝します。

コードプレビューを使った活用例

ここからは実際に、Canvasのコードプレビュー機能を活かした活用例を4つご紹介します。

アニメーションやボタンの生成

CSSやJavaScriptで動くアニメーション付きボタン、ホバーエフェクト、あるいはページ遷移時のローディングなどを作らせ、Canvasで動作をチェック。