「GPT-4o with canvas」がスゴい! 文章作成やコーディング生産性が爆上がり

2024年10月、OpenAIが提供するChatGPTにおいて「GPT-4o with canvas」が登場しました。これは、5月にリリースされた高速・高精度なAIモデル「GPT-4o」をベースにした新機能です。

以前から文章作成やプログラムコーディングにChatGPTを活用してきた人も多いと思いますが、GPT-4o with canvasを使うとそれが一段と効率的になるとのこと。どんな風に使えるのか、解説していきましょう。

なお、GPT-4o with canvasは2024年10月現在、ChatGPTの有料登録ユーザー(Plusは20ドル)向けにβ版として提供されている機能となります。

GPT-4o with canvasを活用するメリットとは？

たとえばコーディングにChatGPTを活用しようとするとき、これまでは目的の機能や動作を実現するためにユーザーが条件などを提示してコード生成してもらい、それを手元のプログラムファイルにコピペする、という手順が通常でした。

または、別途作成したコードをChatGPTに貼り付けて、それを元に改善・修正箇所を教えてもらい、変更後のコードをやはりプログラムファイルに都度コピペしていく、という流れだったかと思います。

コード生成されたものを手元のプログラムファイルにコピペする、という使い方をすることが従来は多かった

しかし、この作業にはいくつか課題がありました。何度もコピペしなければならないという単純な手間の問題だけでなく、ChatGPTとのやりとりの間にコード例が挟まるため閲覧性がどんどん低下していく、というのが1つ。

さらに、コンテキスト長の大きさ、つまりはAIが文脈を記憶しておける容量に制約があり、長くやりとりしていると過去のコードや変更点などをChatGPTが忘れてしまって、一貫したコードを保てないこともありました。

結局、手元のコードと微妙に異なる形で表現されたところはユーザー自身が頭の中で置き換えるか、手元のコード全体をChatGPTに投げてリセットし、改めてそこから再スタートする、みたいなことを繰り返していたと思います。

文章作成時も同様の課題があったと言えますが、こうした非効率な作業を改善できるようにしたのが、今回のGPT-4o with canvasです。ポイントとしては、文章例やコード例をチャットとは別のペイン(ウィンドウ内の別の領域)で扱えるようにして、編集に便利な機能も追加された、というところになります。

プレスリリースの作成に活用してみる

それでは実際にGPT-4o with canvasでテキストを作成しながら、どのような機能になっているのか見てみたいと思います。例として、自社の製品・サービスのプレスリリース作成をお題に進めてみましょう。

プルダウンから「GPT-4o with canvas」を選択

プレスリリースの体裁がそもそもよくわからない、という場合でもChatGPTがあれば心配はいりません。プルダウンから使用モデルに「GPT-4o with canvas」を選び、プレスリリースのひな形を作ってもらうところからスタートすればOKです。

プレスリリースのひな形を作ってもらう

ChatGPTが回答し始めると、すぐにチャットエリアとは別にテキスト編集エリアが立ち上がり、そこにプレスリリースのひな形が表示されます。今のところは製品名や製品の中身に関する情報を何も伝えていないので、必要な情報を記述するところに仮の文言が埋め込まれた状態です。

テキスト編集エリアが拡大し、そこにひな形の文章が生成される

このテキスト編集エリアはユーザーが直接キーボード入力で編集できるので、ひな形の気になる箇所を手動で書き換えていってもかまいません。ですが、せっかくChatGPTを使っているので、AIに積極的にアイデアをもらいながら完成させたいところです。

たとえば製品名や発売日のところにマウスカーソルをかざすと青く強調され、右側にフキダシアイコンが表示されることがわかります。フキダシをクリックするとプロンプト入力欄がポップアップし、この1文に対する指示を出すことが可能です。試しに発売日を教えると、その日付が差し込まれます。

製品名と発売日の上にマウスカーソルをかざすと青く強調表示、右側にフキダシアイコンが見える

フキダシのクリックでプロンプト入力欄がポップアップ。とりあえず発売日を伝えてみる

該当箇所が書き換わる

会社名を直接入力後、本文に適用してもらうこともできる

次に、製品の特徴と思われる機能を箇条書きで記入し、それを元に製品名のアイデアを出してもらうことにしました。記入した箇条書き部分を範囲選択して、ポップアップする入力欄をクリックし、ChatGPTに指示を出すだけです。

ChatGPTに伝えた機能は以下のとおりです

• 編集中のテキストに誤りがあると考えられる場合、リアルタイムに修正候補を提示
• ワンクリックで正しい表現に修正
• 文書タイプに合わせたユーザー辞書を定義できる
• 通信せずにローカルのみで実行することも可能

箇条書きで特徴を書き出し、範囲選択して製品名を提案してもらう

複数の候補を挙げてもらえたので、左側のチャットエリアで気に入ったものを範囲選択し、引用ボタンを押して伝えます。提案された「テキストナビ」という名称を選びました。すると、右側のリリース文内の該当する箇所をすぐさま書き換えてくれました。

左側のチャットエリアで気に入った製品名を範囲選択して引用ボタンをクリック

チャット入力欄に引用されるので、それに返信する形で依頼する

製品名がプレスリリースに適用される

製品の利点も自分が考えるのは面倒なのでChatGPTにお願いしてみます。内容としてはその前段の主な機能と被るところもありますが、「通信せずローカルでも実行できる」ところから「プライバシー保護」に強みがあると判断して記載するなど、GPT-4oの賢い一面がかいま見えます。

利点も提案してもらう

機能をもとに考えてくれた

今回の例だとオンラインサービスなので、それを前提にリリース全体を書き換えてもらうととともに、リリースのタイトルも提案してもらいました。しかし、ここまで大幅な変更が発生すると、どこがどう変わったのかわかりにくくなってしまうかもしれません。

オンラインサービスとしてリリース文全体を調整

さらにリリースのタイトルもイイ感じにしてもらう

仕上がってきたプレスリリース。「ついに登場! 文章のパートナー『テキストナビ』があなたの文章をもっとスマー トに!」というタイトルが提案されています

そんなときは画面右上にある「履歴」を意味するボタンをクリックします。直前からの変更箇所を色分けしてわかりやすく表示でき、もし変更前の状態に戻したいときは画面下に表示される「このバージョンに戻す」をクリックすればOKです。

もっと過去の変更履歴も記録されており、画面右上にある「前/次のバージョン」ボタンで確認していけます。過去のバージョンからまた改めてブラッシュアップし直したいときに役立つでしょう。

右上の履歴ボタンをクリックすると、直前からの変更箇所を色分け表示する

ここまでリリース文を作ってきたところで、全体的にもっと長く・短くしたい、言葉遣いを変えたい、装飾を加えてもっと引きつける内容にしたい、みたいな欲が出てくるかもしれません。そこで試したいのが、画面右下にあるボタンです。

画面右下のボタンにマウスカーソルを合わせると、5つの機能が出現

これを使うといちいちプロンプト入力することなく、改善箇所を指摘してくれたり、文章の長さ(詳細度)を段階的に変えたり、この文章を読むだろうターゲットに合わせた表現に変えたり、絵文字を追加したりできます。

「編集を提案する」では改善箇所を指摘してくれる

「長さを調整する」を選ぶとテキスト全体の長さを調整できる

「読解レベル」は読者ターゲットを想定して言葉遣いを変えられる

「絵文字を追加する」で、適度に絵文字を挿入して華やかな印象に

内容に問題がなければ「最終仕上げを追加する」をクリック。再度内容が見直され、きれいに整形された文章に仕上がります。画面右上の「コピーする」でクリップボードにコピーし、テキストファイルやWordファイルなどに貼り付けて保存すれば完成です。

これでほぼ完成、と思ったら「最終仕上げを追加する」を選択

きれいに整形されたテキストに仕上がる

ひとまず完成し、Markdown形式で出力した新サービスの「プレスリリース」は以下のとおりです。

# ✨ 新サービス『テキストナビ』登場！あなたの文章をもっと簡単に、もっと良く！

**サービス名**: テキストナビ
**提供開始日**: 📅 2024年11月1日

**Footprint Technologies株式会社、2024年11月1日発表**

Footprint Technologies株式会社は、新しいオンラインサービス「テキストナビ」をリリースしました。このサービスは、文章をもっとわかりやすく、正確にするために設計されています。最新の技術を活用し、文章を書く際の課題を効率的に解決します。

## サービスの概要

「テキストナビ」は、リアルタイムで文章の修正をサポートするオンラインサービスです。使いやすい画面とリアルタイムの修正提案により、文章の作成が非常に簡単になります。また、プライバシー保護のためにデータはローカルで処理されるため、安心してご利用いただけます。

### 主な機能

- **リアルタイムの修正提案**: 文章を書いている間に修正候補を自動で提案。
- **ワンクリック修正**: ワンクリックで簡単に修正が可能。
- **カスタマイズ可能な辞書**: ユーザーが自分用にカスタマイズできる辞書機能。
- **オフラインでの利用**: オフラインでも全ての機能を利用可能。

## サービスの主な利点

- **簡単な操作**: 複雑な操作を不要にし、誰でも使いやすい設計です。
- **リアルタイムの修正**: 文章を書いているその場でエラーを指摘し、修正案を提案します。
- **プライバシー保護**: データはユーザーのデバイス上で処理されるため、個人情報の安全が確保されます。

## 提供開始と料金プラン

「テキストナビ」は2024年11月1日からオンラインで利用可能です。料金プランについては公式ウェブサイトでご確認ください。

## 詳細情報

詳しい情報については、[公式ウェブサイト](#)をご覧いただくか、[広報担当者の連絡先](#)までお問い合わせください。

## 会社情報

Footprint Technologies株式会社は、革新的な技術を使って、お客様により良いサービスを提供することを目指しているグローバル企業です。私たちは、技術を通じて社会に貢献することを目標にしています。

**お問い合わせ先**:

- **広報担当者名**: 山田太郎
- **電話番号**: XX-XXXX-XXXX
- **メールアドレス**: [email protected]
- **ウェブサイト**: [https://website.com/](https://website.com/)

Footprint Technologies株式会社の最新情報は、[Twitter](#)や[Facebook](#)でご確認いただけます。

---

このひな形を基に、具体的な製品情報や会社の特性を追加して、オリジナルのニュースリリースを作成してください。

コーディングに活用してみる

続いて、プログラムコーディングでGPT-4o with canvasがどのように機能するのかも見てみます。

作りたいプログラムの概要を入力してスタート

コーディングでもテキスト作成時と同様に、ChatGPTが自動でやり取りの内容を判定してチャットエリアとテキスト編集エリアが分かれた画面に切り替わります。が、場合によってそうならないこともあるので、その時は「○○のコードをcanvasで編集できるようにして」と指示すると良いでしょう。

最初は従来のスタイルでコードが表示された

「canvasで編集できるようにして」とお願いすると……

テキスト編集エリアが広がる

生成されたコードは、もちろんテキスト編集エリア内で自由に修正が可能。もしくは修正したい箇所を範囲選択してChatGPTに指示してもかまいません。これまでだと手元の実際のコードと同期をとるのにいちいち指示してコード全体を再出力させていたかもしれませんが、そうした手間はほとんど不要になりました。

コード内の特定箇所の修正や意図の確認をしたいときも、以前はどの部分を指しているのか具体的に文章で説明しなければいけなかったところ、範囲選択して質問・指示するだけになったので圧倒的に省力化できます。

コードを範囲指定して質問

どの部分を改善したいかを簡単に指示できる

コードが長くなってくると、ChatGPTに指示したときに変更される箇所がどこなのか把握が難しくなってきますが、そこもテキスト作成のときと同じように変更履歴を確認できるので一目瞭然。もし変更後のコードが期待する動作にならなかったときは前のバージョンに一発で戻せるので、試行錯誤を繰り返すのにも適しています。

履歴ボタンで変更箇所をチェック

ところで、ある程度複雑なプログラムになってくると、処理の内容ごとにファイルを分けたり、関連するデータファイルが必要になってきたりして、それらの編集を並行して行うことも珍しくありません。GPT-4o with canvasではそのあたりも簡易的ながらカバーしており、複数のコードを切り替えてcanvasに表示できる作りにもなっています。

複数のコードを同じチャット内で管理できる

ちなみにコーディングの場合、画面右下のボタンから使える機能が変化します。より適切な処理方法を提案してくれたり、クリックするだけでコード全体に適切なコメント文を挿入したり、プログラムのデバッグ時の参考になるログの標準出力処理を各関数の前後に加えたりでき、予期しない動作につながりそうな箇所に自動で修正を施したりもできます。

「コードレビュー」を選ぶとより適切な処理方法を提案してくれる

「ログを追加する」は、コード内の各所にデバッグに役立つ標準出力の処理などを挿入してくれる

コメントを自動で挿入してもらうとコードを理解しやすくなる

「バグを修正する」を選ぶと不具合につながりそうな箇所を検知して対策してくれる

さらに、現在のプログラミング言語から別の言語(PHP、C++、Python、JavaScript、TypeScript、Java)に変換することも可能です。これによって大きな手間なく精度の高いコーディングが行なえるとともに、メンテのしやすさにも配慮しながら開発を進められるようになっています。

別のプログラミング言語のコードに変換も可能

プラットフォーマーのアプリケーション提供が意味するもの

AIチャットとの対話をベースにしながら、用途を絞ってUIを作り込んだことで、テキスト作成やコーディングの効率を大幅に高めたGPT-4o with canvas。実際に使ってみるとその使いやすさ、利便性の高さにきっと誰もが驚くことと思います。

ただ、注目すべきは機能面だけではありません。この動きが業界の今後を占う試金石になる、という可能性にも目を向けるべきでしょう。

というのも、OpenAIをはじめAIチャットやAIモデルを提供する各社は、今までは基本的にプラットフォーマーとして立ち回ってきたにもかかわらず、今回のGPT-4o with canvasは、そういったところから一歩外に踏み出したと言えなくもないからです。

似たところでは、最近Perplexityがファイナンス分析に活用できる機能を追加したばかり。そのようにAIモデルをバックグラウンドにアプリケーションの形(またはそれに近い形)で提供するスタイルは、今までだとサードパーティのビジネス領域でしたが、プラットフォーマーもそこに手を伸ばしてきたことになります。

Perplexity for Finance:

Real-time stock quotes. Historical earning reports. Industry peer comparisons. Detailed analysis of company financials. All with delightful UI.

Have fun researching the market!pic.twitter.com/BDx6SLQ9uk

— Perplexity (@perplexity_ai)October 15, 2024

こうした動きがますます拡大すれば、独自のAIモデルを持たない企業のサービス展開に影響が出てくることも考えられます。Google Geminiや類似のArtifactsを展開するClaude、OpenAIと協業関係にあるMicrosoftのCopilotも含め、これからの各社AIサービスの動向も要チェックでしょう。