2024-10-18WEELメディア事業部AIライターの2scです。みなさん!OpenAIが発表したChatGPTの新機能「Canvas」は、もう使いましたか?このCanvasは、生成したコンテンツを微修正できる便利機能!OpenAI曰く、「生成AIのマルチモーダル化に匹敵する革命」なんだそうです。changes」アイコンを使って、文章やコードの修正前後の変化を簡単に確認できるようになりました。この機能のおかげで、編集作業がますます効率化されています!実際すごくて、JavaScriptの知識がない筆者でも、Canvasを駆使すれば以下のようなゲームが作れてしまいます。当記事では、そんなCanvasを徹底解剖!そのすごいところや使い方、実際に使ってみた様子まで余すところなくお伝えしていきます。完読いただくと、ChatGPTでのライティング&コーディングがますます捗っちゃうかも......ぜひぜひ、最後までお読みくださいね!目次OpenAIが送るChatGPTの新機能「Canvas」とは?2024年10月3日(米国時間)にOpenAIは、ChatGPTの最新機能「Canvas」のベータ版を発表しました!このCanvasは、生成した文章・ソースコードの気になる箇所を指定してピンポイントで修正ができる便利機能。Claudeの「Artifacts」と同じように、専用のウィンドウからコンテンツに微修正が加えられます。PlusとTeamから順次公開(今後は無料含む他プランでも利用可能に)以上のとおり。Canvasはこれまで生成AIのネックだった「コンテンツをピンポイントで修正できない」という点を見事、克服しています。OpenAI曰く、これはマルチモーダル化(GPT-4V)に匹敵する進化なんだそうです!OpenAI・ChatGPTの「Canvas」のすごいところまずは、OpenAIが自信を持って送り出す文章&コード編集機能「Canvas」のすごいところを4点ご紹介します。以下、起動時のギミックから詳しくみていきましょう!特定のトリガーワードで起動できるCanvasはモデル選択後、特定の「トリガーワード」を含む命令にだけ反応して、自動で立ち上がります。具体的には「猫の記事を書いて」というプロンプトでは起動しますが、「猫の可愛いところを挙げて」というプロンプトでは起動しないといった調整がなされているのです。他のトリガーワードの例としては、下記が挙げられます。執筆ソースコードCanvasを使って(過去のチャットにも適用可)その他、プログラミング系全般...etc.トリガーワードに該当しないものアイデアを出して教えて列挙して...etc.この機構の実現にあたってOpenAIは、あえてトリガーワードへの反応性を鈍くする調整をGPT-4oに加えています。間違いなく適切なトリガーワードにだけ反応できるようにした結果......以上のとおり、Canvasを備えたGPT-4oは素のモデルよりも正確な反応が可能になりました。執筆タスクでは83%、コーディングタスクでは94%も反応精度がUPしています。任意の箇所にだけ修正が加えられるこれまで、ChatGPTで生成したコンテンツの修正については運任せな部分もありました。「気になる部分だけ修正しようとすると、コンテンツ全体が別のものに書き変わってしまった......」という経験は、ChatGPTユーザーなら誰しもが味わっているはずです。大丈夫!今回登場したCanvasなら、プロンプトで指定した箇所だけをピンポイントで修正できるようになっています。OpenAIによると......修正箇所を明記して部分修正を命じた場合、Canvasを備えたGPT-4oは素のモデルよりも18%増しで適切な修正ができるとのこと。実際に、Canvasで修正箇所を示してみると......以上のとおり完璧です。物語の第一章だけを書き換えたり、主人公の名前だけを書き換えたりといった修正ができてしまいます。高品質なコメントが添えられるCanvasは文章の改善点を示したり、ソースコードにコメントアウトを添えたりといったコメント機能も完備。コンテンツ全体を俯瞰して、正確かつ高品質なコメントが添えられるようになっています。このコメント機能についても、OpenAIの工夫が光ります。o1による合成データを学習に使用。コスト・工数を抑えながらも、コメントの品質改善に成功しました。そんな企業努力の結果......Canvas搭載のGPT-4oでは素のモデルよりも、コメントの正確性が30%UP・質が16%UPしています。編集時にショートカットボタンが使えるCanvasではプロンプトによる修正のほかに、「ショートカットボタン」を押すだけの簡易修正も可能。OpenAIは以下のとおり、文章生成時とソースコード生成時のそれぞれで、5種類のショートカットボタンを用意してくれています。PHPに変換これなら、あまり深く考えなくてもいいコンテンツが作れる......かもしれませんね!なお、最強のコード生成AIについて詳しく知りたい方は、下記の記事を合わせてご確認ください。Llamaの概要や導入方法、そして実際に触ってみた感想を紹介します。これはLlama2をベースにしたコード生成LLMです。プログラム...OpenAI・ChatGPTの「Canvas」が使える料金プランChatGPTの超便利機能・Canvasですが、リリースは有料プランから順番に行われる予定です。無料版ChatGPT以上のとおり。無料プランでもCanvasが使えるとのことで、今後に期待ができそうです!なお、ChatGPTの有料プラン・Teamについて詳しく知りたい方は、下記の記事を合わせてご確認ください。Planの詳細を解説します。チームビジネスを効率化させたい企業担当者の方におすすめの記事です。OpenAI・ChatGPTの「Canvas」の使い方ここでは、OpenAIが送るChatGPTの新機能・Canvasの使い方を画像付きでお伝えしていきます。ChatGPTのホーム画面に有料アカウントでログインしてみましょう。すると......このように、お馴染みのホーム画面が現れます。4o)をクリックしてみてください。canvas」が表示されているはずです。こちらをクリックすると、Canvasが使えるようになります。あとは、トリガーワードを含むプロンプトをいつものテキストボックスに入力するだけ。今回は試しに「泣ける歌詞を書いて」と入力してみましょう!するとこのように、Canvas機能のウィンドウが自動で立ち上がります。ここから画面左下のテキストボックス、あるいは画面右下のショートカットボタン(青枠部分)を介しての修正が可能です。続いては、テキストボックスに「もっとヘビメタっぽい歌詞で」と入力してみます。すると、ウィンドウ中のコンテンツが書き変わって......以上のとおり、修正が反映されました。ここでは、画面右上のボタン(青枠部分)から「修正前への復元」「修正後への復元」「コンテンツのコピー」も行えます。ちなみに、Canvas機能を終了したい場合は、ウィンドウ左上「×」のクリックでウィンドウが閉じられます。Canvas機能を再開したい場合は......該当するチャットから縮小表示されているウィンドウ右上(青枠部分)をクリックするだけでOKです。OpenAI・ChatGPTの「Canvas」の実力を徹底検証!さて、ここからはみなさんお待ちかねの実験パートです。以上4点の検証を行なっていこうと思います。ファンタジー小説の修正から試していきましょう!ファンタジー小説の修正まずは、Canvasでのライティングを検証!ChatGPT上でファンタジー小説を制作・修正してみます。その前に、Canvasが正確にトリガーワードを拾えるかどうかだけ、確かめておきましょう!試しにトリガーワードを含まない命令「ファンタジー小説のアイデアを出して」をChatGPTに入力してみると......以上のとおりお見事!Canvasは起動しないでいてくれます。続いてアイデアのうちの1つ「忘れられた王国の影」で草案を書いてもらうと......こちらも上出来。Canvasが自動で立ち上がって、草案がウィンドウに表示されました。今度は本題、Canvasでの修正を検証していきます。物は試しということで、ChatGPTが生成してくれた物語を異世界転生物に変えていきましょう!「主人公は21世紀・現代の日本出身で異世界転生したことにしてほしいです」と入力してみると......以上のとおり、パーフェクト。第一章が異世界転生の流れに修正されました!続いては、主人公の名前を変えてみます。ChatGPT」をクリックしてみると......このようにテキストボックスが現れました。あとは「アレンを日本人的な漢字の名前にして」と入力するだけでOKです!今度は、ショートカットボタンでの修正も試していきます。ショートカットボタンの出し方は......以上のとおり、画面右下の鉛筆マークにマウスカーソルを合わせるだけOKです。emojis」をクリックしてみましょう!すると......このように、絵文字マシマシの草案が返ってきます。edits」もクリックしてみると......お見事!ChatGPTが英語のコメントを添えてくれました。このコメントを和訳してもらうと......以上のとおり、わかりやすい改善案が返ってきていますね。これは「OpenAIの発表内容に偽りなし」といえるんじゃないでしょうか。あとは、採択したいコメントにカーソルを合わせて「Apply」を押すだけで、ChatGPTが勝手に内容を修正してくれます。lengthそれぞれ、ショートカットボタンを押した後にスライダーを動かすだけでOK。こちらも適用しました。polish」で文法・一貫性チェックを実施し、テキストウィンドウに「Wordで出力」と入力してみると......お見事です!完成した文章が、Wordファイルとしてダウンロードできるようになりました。気になる成果物は、というと......以上のとおり、ちょうどいい長さの異世界転生物になっています。絵文字が消えているのは残念ですが、それ以外は文句なしです。続いては、Canvasを使って生成した文章を1枚のWebページに収めてみます。手始めに「チョコレートに関するweb記事」と、ChatGPTに入力してみると......以上のとおりCanvasが立ち上がりました。length」で内容を最短にしてみると......このように、内容が簡潔になります。今度は「WEELチョコレート」のPR記事に修正していきます。level」から内容を高校生レベルにしてみると......お見事!読みやすいPR記事が返ってきました。edits」での提案を反映したり、一部内容を表に起こしたりしてみました。その結果は......以上のとおり完璧。こちらをWebページに使いましょう!それでは、生成した記事をHTMLファイルに変えながら、挿入画像も生成してもらいます。ChatGPTに命令してみると......このように、CanvasでもDALL-E3が起動して画像生成ができました!お見事です。最後に、完成したHTMLコードをファイルにまとめていきます。ダウンロードする旨をChatGPTに伝えると......以上のとおり、ダウンロード用のリンクが出現。こちらを押すだけでダウンロードができます。肝心のWebページはというと......最高の仕上がりです!記事本文はもちろん、画像・表・リンクボタンも本格的なPR記事のものになっています。これなら、企業の広報にもChatGPTが使えちゃうかもしれません。次は趣向を変えて、Canvasでのコーディングも試していきます。今回は「萌えイラストを使ったレトロなブロック崩しゲーム」をChatGPTに作ってもらいましょう!手始めに、ChatGPTに「ブラウザで遊べるブロック崩しゲーム」を注文してみます。すると......このように、Canvasが起動してコードが返ってきました。このコードをHTMLファイルとしてダウロードした後、ブラウザで起動してみます。気になる結果は......お見事です!ブロック崩しゲームになっています。萌えイラストを表示させるにはゲームの枠が狭すぎます。いうことで、ゲームの枠を広くして、ついでにブロックの色もコバルトブルーに変えちゃいましょう!するとこのように、修正が加わります。この修正後のコードをダウンロード&起動してみると......命令は反映されていますね。左上に寄っているブロックが気になります。それと、クリアした後の話ですが、何も表示されないのが残念です。OVER」がそれぞれ、表示されています。ブロックも中央に再配置されていて、文句なしの仕上がりですね。あとは、以下の修正も実施して、背景の萌えイラストが映えるようにしました。背景の透かしを白から透明に変更そして、肝心の萌えイラストは......このように、DALL-E3で用意しています。bugs」を押してデバッグをしてみると......お見事!ChatGPTは、クリア&ゲームオーバー時のメッセージの無限ループを解消してくれました。完成したHTMLコードと画像をダウンロード&起動してみます。気になる結果は......見事、往年のアーケードのような風情あるブロック崩しゲームが完成しました。これなら、個人のゲーム制作が捗りそうですね。logs」を適用済み。右クリックで「検証」を選択してConsoleを覗いてみると......このように、ログが表示されます。最後に、ChatGPTのライバル・Claudeの類似機能「Artifacts」もお見せします。Canvasと比較してみましょう!手始めに、「ブロック崩しゲーム」をClaudeに注文してみると......このように、ゲームのソースコード(JavaScript)が返ってきました。続いては、こちらをブラウザで遊べるようにするためのHTMLコードも生成してもらいましょう。気になる結果は......このように、ChatGPT以上に親切!Canvasにない「プレビュー」が生成されて、その場でゲームが試せるようになっています。プレビュー右下の「Publish」をクリックすると......以上のとおり、プレビューのシェアまでできちゃうんです。ちなみに、シェアしたプレビューは......このように閲覧が可能。確認しながらコンテンツを修正したい場合は、Canvasよりも圧倒的にArtifactsがおすすめです。使い分け方は好みの問題になるでしょう。最後に、X(旧Twitter)でバズっていたCanvasの活用事例を3つご紹介します。本家・OpenAIの投稿から、詳しくみていきましょう!今回解説する事例において、弊社がX(旧Twitter)で発見した参考となるツイートを紹介させていただいております。取り下げなどのご連絡は、弊社公式X(旧Twitter)からご連絡ください。活用事例1.アップロードした文書からWeb記事を生成OpenAIは、CanvasでのWeb記事の制作事例をXに投稿しています。2024和訳キャンバスは別ウィンドウで開き、あなたとChatGPTが並んでアイデアを練ることができます。キャンバスでは、ChatGPTが編集を提案し、長さを調整し、読みのレベルを変更し、インラインフィードバックを提供することができます。キャンバスに直接書き込んで編集することもできます。以上のとおり、アップロードした文書からWeb記事を制作するというデモ動画です。level」を大学生レベルに変えたりとショートカットボタンを駆使しています。これなら、各種資料作成も楽チンなはず。みなさんもぜひぜひ、真似してみてください!活用事例2.Rustでのサーバー立て同じくOpenAIは、コーディングのデモ動画も公開中。「プログラミング言語・Rustを使ってサーバーを立てて」という命令で、各機能を紹介しています。2024和訳コードを書くとき、canvasを使えばChatGPTの変更を簡単に追跡し、理解することができます。他のコーディング言語への移植も可能です。comments」でのコメントアウトなどなど、ショートカットボタンが大活躍していますね。これからは、仕事道具もゲームもCanvasで作る時代......なのかもしれません。最後に、OpenAI以外のCanvasの活用事例も1つだけご紹介します。以下の投稿者はCanvasを使って、CG用JavaScriptライブラリ・ThreeJSでの「正八胞体(四次元の立体図形)」の描画を試みています。2024和訳ChatGPTの新しいキャンバスインターフェイスはゲームチェンジャーです。ThreeJSでテッセラクト/ハイパーキューブのビジュアライザーを作るのに使ったところだ。チャット、インラインコメント、そしてGPT-4oがコードに魔法をかけるのを見るという、統一されたUXが気に入っています。クロードアーティファクトは今、真剣な競争相手を持っている。Canvasで微調整したコードは見事、宇宙空間に正八胞体が浮かぶ様子を描画できています。3Dモデル生成ができるAIモデルについて詳しく知りたい方は、下記の記事を合わせてご確認ください。この記事では3Dモデル生成AIについて解説しています。3Dモデル生成AIを活用すれば、従来よりも圧倒的に早く3Dアセットを作成が可能。作業効率の大幅改善が期待できます。商...OpenAIの「Canvas」で、生成も修正も思うがまま当記事では、OpenAIが送るChatGPTの便利機能「Canvas」をご紹介しました。Canvasなら、これまでのChatGPTでは難しかった生成コンテンツの微修正が可能です。具体的には......「Canvas」ができること特定のトリガーワードで起動できる任意の箇所にだけ修正が加えられる高品質なコメントが添えられる編集時にショートカットボタンが使える以上の仕様で、意のままに文章&ソースコードが修正できます。使い方によりますが、Canvasなら小説や記事はもちろん、凝ったWebページやブラウザゲームまで楽々作れる......かもしれません。・自社専用のAIチャットボットの開発などの開発実績がございます。「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。→無料で相談する生成AIを社内で活用していきたい方へ「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。セミナー内容や料金については、ご相談ください。各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。集計期間:1週間まだデータがありません。高いAIプロフェッショナル集団」を目指して私たちは、AIに関わるすべての人に向けて、透明性の高い適切な情報発信と開発を行います。「WEELは、一番地に足ついたAI情報を教えてくれる」と思っていただけるよう、透明性高い事業運営を行なって参ります。透明性の高い適切な情報発信と開発を行います。透明性高い事業運営を行なって参ります。