「ChatGPT-4o with canvas」は、ChatGPTを活用して執筆やコーディングのプロジェクトを進めるための新しいインターフェースです。
執筆やコーディングを別ウィンドウで行える機能を提供し、AIとユーザーが共同でアウトプットを洗練させていくことが可能です。
2024年12月には、従来のテキスト編集やコーディング機能がさらに強化され、すべてのユーザーに無料で提供されるようになりました。
また、メインモデルと統合され、キャンバス機能がシームレスに動作するようになりました。
本記事では、発表会で紹介された新機能を含め、その特徴や使い方から実践的な活用事例まで、ChatGPT-4o with Canvasの全貌に迫ります。
ChatGPT-4o with canvas とは？
ChatGPT-4o with canvasは、OpenAIが開発した最新のAIアシスタントツールです。
ChatGPTを活用して執筆やコーディングのプロジェクトを進めるための新しいインターフェースで、以下の特徴があります。
別ウインドウでChatGPTとの共同作業が可能
ChatGPT-4o with canvasの最大の特徴は、AIとのチャットを行いながら、同時に別ウィンドウでテキストやコードの編集が可能なことです。
AIからの提案をリアルタイムで反映させたり、アイデアを即座に形にすることができ、ユーザーは会話の流れを維持しながら具体的な成果物を作り上げることが可能です。
ライティングやコーディングに特化している
ChatGPT-4o with canvasは、特にライティングとコーディングのタスクに焦点を当てて設計されています。
ライティング面では、文章の構成や推敲、編集提案などの機能が充実しており、高品質な文章作成をサポートします。
コーディングに関しては、バグ修正、コードレビュー、他言語への変換など、プログラマーの作業効率を大幅に向上させる機能が搭載されています。
ただし、ClaudeのArtifactsのようなUI表示機能はありません。
ChatGPT-4o with canvasは、テキストまたはグラフィックの直接的な操作と編集を実現し、ユーザーはより直感的にAIとの共同作業を行うことができます。
プロジェクト管理の強化
ChatGPT-4o with canvasは、対話型AIアシスタントの機能に加え、効果的なプロジェクト管理ツールとしての側面も持ち合わせています。
主な機能は以下の通りです。
- テキストやコードの直接編集
-
別ウィンドウでリアルタイムに編集可能。
- バージョン管理
-
異なるバージョンの保存と比較ができる。
- ショートカット機能
-
ライティングやコーディングに特化した効率的な操作。
- プロジェクトの継続性
-
セッション間でプロジェクトの状態を保持。
これらの機能により、ユーザーは長期的なプロジェクトを効率的に管理し、生産性を向上させることができます。
ChatGPT-4o with canvas は無料で全ユーザーに開放
ChatGPT-4o with Canvasは2024年10月に発表され、これまではChatGPT Plusユーザー向けに提供されていました。
しかし、2024年12月10日以降、すべてのユーザーに無料で提供され、さらに新機能が追加されました。
現在、Web版およびWindows版アプリで利用可能です。
ChatGPTの料金プランの詳細やプランごとの機能の違いは以下の記事を参照ください。
ChatGPT-4o with canvas の始め方
ChatGPT-4o with Canvasの使用は簡単で、以下の手順で始められます。
以前のようにモデル選択欄からCanvasを選ぶ必要はなく、プロンプト入力欄から簡単にCanvasを起動できます。
プロンプト入力欄右上の矢印マーク、もしくは下部の「ツールを表示」のアイコンよりCanvasを起動できます。
a) 自動表示: 特定のタスク（長文の作成やコーディングなど）を依頼すると、自動的にエディタが表示されます。
b) 手動表示: 画面右上の「キャンバスで開く」ボタンをクリックすることで、いつでもエディタを開くことができます。
表示されたエディタ内で直接テキストの入力や編集が可能です。AIの提案を反映させたり、自身のアイデアを書き込んだりできます。
ChatGPT-4o with canvas の使い方
ChatGPT-4o with canvasは、従来の対話機能に加えて、高度な編集機能やプロジェクト管理機能を備えています。
主な使い方を見ていきましょう。
エディタ内で直接入力・編集する
先ほどと同様、画面上部のドロップダウンメニューから「GPT-4 with Canvas」を選択した状態で以下の操作を進めてください。
通常のChatGPTと同様に、チャット欄にプロンプトを入力します。
a) 自動表示: 特定のタスク（長文の作成やコーディングなど）を依頼すると、自動的にエディタが表示されます。
b) 手動表示: 画面右上の「キャンバスで開く」ボタンをクリックすることで、いつでもエディタを開くことができます。
表示されたエディタ内で直接テキストの入力や編集が可能です。
AIの提案を反映させたり、自身のアイデアを書き込んだりできます。
ライティング用のショートカットを使う
ライティング作業時には、エディタの右下に便利なショートカットが表示されます。
これ活用すると、文章作成をよりスムーズに進められます。
- 絵文字の追加
-
文章に適切な絵文字を挿入できます。
右下の鉛筆マークから「絵文字を追加する」を選択します。
以下のように、適切な箇所に絵文字が追加されます。
- 最終的な推敲
-
文章全体を見直し、改善点を提案します。
右下の鉛筆マークから「編集を提案する」を選択します。
提案が表示された箇所は、黄色のマーカーが付きます。
- 読みやすさの調整
-
文章の流れや構造を整えます。
右下の鉛筆マークから「読解レベル」を選択します。
ターゲットに合わせて、最適なレベルを選択します。
選択したレベルに合わせて、文章全体が書き換わります。
- 文の長さの調整
-
長すぎる文を適切な長さに分割します。
右下の鉛筆マークから「長さを調節する」を選択します。
長くしたい場合は「もっと長く」、短くしたい場合は「もっと短く」を選択します。
希望に合わせて文章の長さが書き換わります。
コーディング用のショートカットを使う
コーディング作業時には、エディタの右下に特別なショートカットが表示されます。
これらを活用することで、プログラミングの効率が大幅に上がります。
- 別言語への変換
-
既存のコードを他のプログラミング言語に変換します。
希望する言語を選択します。
試しにPHPを選択してみると、以下のように正しい形に書き換わりました。
- バグの修正
-
コード内のエラーや問題点を見つけて修正します。
htmlに統合され、読みやすい形に修正されました。
- コメントの追加
-
コードの理解を助けるコメントを自動で挿入します。
コードにインラインコメントを追加し、各セクションの目的が説明されました。
- ログの追加
-
デバッグ用のログ出力を適切な箇所に追加します。
ログ/プリント文をコードに挿入し、各主要な部分の動作を確認できるようになりました。
- コードレビュー
-
コードの品質や効率性をチェックし、改善点を提案します。
修正の必要がある箇所がハイライトされ、修正内容が提案されます。
これらのショートカットを使えば、コーディングの質を高めながら開発速度を上げることができます。
特に大規模なプロジェクトや複雑なアルゴリズムを扱う際に重宝するでしょう。
バージョン管理を使う
ChatGPT-4o with canvasには便利なバージョン管理機能が備わっています。
この機能を使うことで、作業の過程を記録し、必要に応じて以前の状態に戻すことができます。
- 前のバージョンに戻す
-
エディターの内容を前の状態に戻したい場合は、エディター上部の「前のバージョン」をクリックします。
一度、前のバージョンが表示された状態で、このバージョンに戻すか、最新バージョンに戻るかが選択できます。
- 次のバージョン
-
次のバージョンを選択したい場合はエディター上部の「次のバージョン」をクリックします。
Canvas内でのPythonコード実行
2024年12月の正式なアップデート以降、生成したコードはCanvas上でそのまま実行ができるようになりました。
従来、生成または編集されたコードが機能するか確認するためには、コードをコピーして自身のシステムで実行する必要がありましたが、Canvas内でコードの実行まで完結することができます。
これにより、AnthropicのClaude Artifactsと同様、コードから作成したサンプルウェブページをプレビューする機能に近づきました。
開発者やアナリストは、チャートを最終化する前に数式やデータを調整することができます。
GPTs（カスタムGPT）でのCanvas起動
2024年12月以降、GPTs（カスタムGPT）でもCanvasを利用できるようになりました。
GPTs（カスタムGPT）とはChatGPTを特定の目的に合わせてカスタマイズできる機能です。
GPTs（カスタムGPT）については以下の記事で紹介しています。
既存のGPTs（カスタムGPT）については、キャンバスはデフォルトで有効になっていません。
ただし、以下の手順でカスタムGPTの設定画面でキャンバスを有効化することで、この機能を追加できます。
ChatGPT-4o with canvas の活用事例
ChatGPT-4o with canvasは、様々な場面で活用できる強力なツールです。
ここでは、具体的な活用事例をいくつか紹介します。
活用事例①：コーディング作業の最適化
ChatGPT-4o with canvas内でPythonコードを実行し、リアルタイムで結果を確認することで、デバックおよび即時実行と結果の表示まで行うことができます。
まず、例として簡単な数あてゲームのコードをエディターに読み込ませます。
「コードレビュー」を行うと、以下のように改善しべき事項がハイライトされ、改善された状態でエディターに反映されます。
「バグの修正」を行うことで、エラーのないプログラムを作成できます。
コードをエディタに入力し、AIに実行を依頼することで、ブラウザ上での動作をシミュレートできます。
さらに、機能の追加や修正をその場で行い、即座に結果を確認できるため、迅速な開発とテストが可能になります。
これにより、アイデアを素早くプロトタイプ化し、動作確認することができ、Webアプリケーション開発の初期段階で非常に有効です。
活用事例②：Webサイトの作成
簡単なワイヤーフレームを基に、Webサイトのコーディングができます。
ワイヤーフレーム等から、html/cssを生成させます。
生成されたhtmlを基に、コードレビューを行い、改善を繰り返します。
スタイルを整えるためのcssを追加します。
htmlやcssが出来上がったら、全体にエラーがないか「バグを修正する」でチェックします。
「コードを確認しましたが、バグは見つかりませんでした。」が表示されれば、問題なく機能するはずです。
ダウンロード用の.htmlファイルを書き出します。
書き出したhtmlを開いて、表示内容を確認します。
以下のように、問題なく生成できていることが分かりました。
ChatGPT-4o with canvasにはプレビュー表示用のUIはないので、ローカル環境等で別途確認する必要があります。
活用事例③：長文レポートの作成と編集
ChatGPT-4o with canvasは、長文のレポートや論文の作成にも非常に有効です。
AIのサポートを受けながら、エディタ上で直接文章を編集できるため、効率的に高品質な文章を作成できます。
今回は、「地球温暖化の影響と対策」というテーマでレポートを作成してみます。
チャット欄で「地球温暖化の影響と対策についてのレポート構成を提案してください」と入力します。
AIが提案した構成を確認し、必要に応じて見出しの順序を変更したり、新しい項目を追加したりします。
例）構成をもっとシンプルにしたい場合
「もっと短く」を選択すると、
見出し内のテキストをシンプルに修正できます。
各見出しごとに、AIに詳細な内容の提案を求めます。
例えば、「2. 地球温暖化の原因」について、チャット欄で「地球温暖化の主な原因について、最新の科学的知見を踏まえて解説してください」と依頼します。
AIの回答をエディタにコピーし、必要に応じて編集を繰り返します。
各セクションの文章を書き進めながら、時折AIに文章の改善を依頼します。
例えば、「この段落をより簡潔で分かりやすい表現に修正してください」とチャット欄で依頼し、AIの提案をエディタ上で反映させます。
レポートの最後に参考文献リストを作成する際、AIに適切な引用形式を確認します。
また、本文中の引用についても、「この引用は適切でしょうか？より信頼性の高い出典はありますか？」などとAIに質問し、アドバイスを得ます。
このプロセスを通じて、AIのサポートを受けながら、エディタ上で直接文章を編集・改善していくことで、効率的に高品質なレポートを作成できます。
まとめ
ChatGPT-4o with canvasは、アイデアの具現化からプロジェクトの完成まで、創造的な作業プロセス全体をワンストップでサポートします。
AIとのシームレスな協働により、作業効率が大幅に向上し、より質の高い成果物を生み出すことができます。
OpenAIは、「今後もキャンバスの機能改善や新機能の提供を続ける」と述べています。
今後のアップデートにも注目し、さらに進化したCanvasを活用してみてください。