みなさん、こんにちは！ タカハシ(@ntakahashi0505)です。
2024/10/04にOpenAIからChatGPTの新機能「Canvas」がリリースされました。
ライティングとコーディングに関しては、これまでの体験を遥かに超える非常に強力なツールとなっています…！
「ChatGPT 4o with Canvas」とは何か、どのように優れているのか、そしてノンプログラマーにとってどのように役立つのか…気になりますよね。
ということで、今回は「ChatGPTの新機能「Canvas」を ノンプログラマー向けにやさしく解説」についてお伝えします。
では、行ってみましょう！
ChatGPT 4o with Canvasとは？
「Canvas」はChatGPTで使うことができる新しいインターフェースです。
Canvasでは、文章の作成や編集といったライティング、コードの作成や編集、解説といったコーディング作業をAIと共同で行うことができます。
2024年10月4日にOpenAIの公式X（旧Twitter）アカウントから発表され、間もなくリリースされました。
Canvasは現在ベータ版であり、有料のPlusプラン、およびTeamプランのユーザーが使用することができます。また、Enterpriseプランについては10月の第2週に公開されます。
気になる、Freeプランではどうかという話ですが、今後正式リリース時にFreeプランのユーザーにも提供されるとのこと…これは大きい！
ChatGPT 4o with Canvasの使い方
AIモデルを選択する左上のプルダウンメニュー、これをモデルピッカーといいますが、ここから「ChatGPT 4o with Canvas」を選びます。
この時点では通常のChatGPTの画面ですが、ここで「～の記事を作成してください」とか「空のCanvas」などと指示をすると、画面構成が切り変わります。これがCanvasです。
Canvasの画面は中央から右側は大きな作業エリアとなっており、ここで文章やプログラムのコードを作成、編集できるようになっています。つまり、エディタとして機能します。
Markdown記法が使えるエディタなので、見出しや箇条書きなどをMarkdown記法で入力していくことができます。
そして、段落ごとに表示される吹き出しアイコンをクリックしたり、文章やコードを範囲選択すると、「編集または説明」という入力欄が表示されます。ここでAIに指示を依頼すると、その内容に応じてAIが文章やコードを追加、編集してくれるのです。
左側にはAIアシスタントとのチャットエリアが配置されており、AIへの全体的な依頼や質問、または範囲選択で依頼したやり取りが記録されます。
右下にはショートカットアイコンがあり、ライティングのときは「長さを調整する」「読解レベル」などの操作を簡単に行うことができます。コーディングのときは、「コメントの追加」「使用する言語の変更」などが可能です。
ChatGPT 4o with Canvasによる作業手順の例
ライティングとコーディングのそれぞれで、どのような作業手順になるのか、例を紹介していきます。
Voicyの下書きを作る具体的な手順
Voicyの下書きを作る手順を見ていきましょう。
まずチャット欄に「○○のテーマで下書きを作成して」と依頼します。
すると、Canvasが展開し、AIが記事を自動作成していきます。
作成された内容は文章形式になっていました。このままだと、収録時に「朗読」のようになってしまいます。そこで、「箇条書き形式の下書きに直してください」と依頼をすると、全体が箇条書きに修正されました。
追加したい項目があれば部分選択して「この下に「Canvasの画面構成」をタイトルとした節を追加して」と指示します。
あとは、手作業で不要な部分はエディタで削除したり、加筆修正をしたりでまとめていきます。
実は、この「ChatGPTの新機能「Canvas」をノンプログラマー向けにやさしく解説」のVoicyの下書きと記事化は、実際にCanvasを用いました。
下書きの作成は、正直、半分くらいは僕自身が加筆修正をする必要がありました。僕が言いたいこと、伝えたいことがAIからはなかなかうまく出てきてくれないからです。
一方で、記事化はかなりスピーディになりました。以下のように全体を直してから、細かい加筆修正をするという流れです。
- 元の下書きをベースに、記事として読めるように直してください。
- 「ChatGPT 4.0」をすべて「ChatGPT 4o」に置換してください。
- 箇条書きではなく、文章に直してください。
コードを作成する手順
次にプログラムのコード作成を見ていきましょう。
まず、「Google Apps ScriptでFizzBuzzのコードを作成てください」と指示します。
すると、Canvasが起動して、コードが生成されます。この時点で、完璧に動作するコードが出力されました。
しかし、Google Apps Script（GAS）のコードは、古いタイプのコードで出力されることが多いのですが、今回もそうでした。ですから、「よりモダンなJavaScriptで書き直して」と依頼をします。すると、新しい書き方に直してくれました。
また、「Logger.log」という命令は、現在では「console.log」を使うことが多いのですが、これは修正されずでした。ですから、「Logger」の部分を選択して「consoleに変更して」と指示します。
一定の形式に則ったプログラムを説明をする「ドキュメンテーションコメント」を入れておくと、見返したりメンテナンスをしたりするときに便利です。ですから、「ドキュメンテーションコメントを追加して」と依頼しました。最初は英語で追加されてしまったので、「ドキュメンテーションコメントを日本語に直して」と依頼して日本語に修正しました。
さらに、FizzBussというのは100回繰り返すのが一般的なのですが、繰り返しの数「100」を引数という仕組みをつかって、任意の数に指定できるように変更を依頼したところ、これもバッチリ対応してくれました。
と、このようにコーディングに関しては、完璧な動作でした。同じことを自分でやろうとするよりも、1/5場合によっては1/10くらいのスピードかも知れません。
Canvasを使ってみた感想
文章の編集では、思い通りにならないこともありますが、直感的に作業を進めることができます。まず、AIに叩き台を出してもらい、もしくは何らかの下書きがある段階で、それを大まかに修正し、その後細かい部分を調整するという流れになるかと思います。完全な完成品を作るのは、まだ人の手が必要なところはあります。
プログラミングに関しては非常に効率的に作業を進められると感じました。使わない手はない感じです。
まとめ
以上、「ChatGPTの新機能「Canvas」を ノンプログラマー向けにやさしく解説」についてお伝えしました。
引き続き、みなさんがいきいきと学び・働くためのヒントをお届けしていきます。次回をお楽しみに！
この話を耳から聴きたい方はこちらからどうぞ！
