進化が著しい生成AI、Google Gemini。
そんなGeminiには、ご存じのようにCanvasモードというプログラムのコードなどをいい感じに出力してくれる便利な機能があります。
しかし、Canvasモードを使うと最初は表示されるのに、以降に修正を加えた場合に、修正版が表示されず、そもそもCancasを開くボタンが表示されないことが多々あります。
この記事では、その場合の対処法について解説していきます。
実は表示されている
結論から言うと、GeminiのCanvasモードは、修正版が出力されていないかと思いきや、実は表示されています。
しかし、それが非常にわかりにくいです。
ここではサンプルとともに確認する方法を見ていきましょう。
まずはCanvasモードで適当にHTMLのコードを書いてもらいます。
この時点では、「開く」をクリックすれば通常通りCanvas内でHTMLが生成され、プレビューも表示されました。
機能を追加してみる
次は今作成したHTMLを修正してもらいましょう。
なんでもいいのですが、今回はお知らせ欄を追加してもらいます。
すると、以下のように「以下が更新されたtest_page.htmlです」と表示されるものの、その下にCanvasモードを開く欄も、コードも表示されません。
しかし、正しく機能の追加は行われています。
キーワードは「更新」です。
一番最初のtest_page.htmlを作ってもらったときのCanvasに戻ってみましょう。
すると、最初は「テスト用基本ページ」だったのに、「テスト用基本ページ（お知らせ欄付き）」と名前が変更されています。
これを開くと以下のようにプレビューが表示されます。
ちょっとわかりにくいですが、確かにお知らせ欄が追加されています。
つまり、1つ目のCanvasに対して修正を依頼した場合、回答では「以下が更新された○○です」のように、あたかも作り直したかのように回答します。
しかし、実際には1つ目のCanvasを修正する形で反映されるというわけです。
恐らくバグ(ハルシネーションの一種)？です。
さらに追加してみると...
では、さらに修正を依頼してみましょう。
ここでは色を変えてみます。
先ほどまではちょっと青っぽかったので、紫にしてもらいましょう。
今回も「以下が更新されたtest_page.htmlです。」となっていますが、またしても何もありません。
では先ほどと同様に一番最初のCanvasに戻ってみましょう。
はい。名前が「テスト用基本ページ（お知らせ欄付き）」から「テスト用基本ページ（紫色テーマ）」に変更されています。
開いてみると、確かに紫になりました。
(もっとわかりやすい色でやればよかった)
対処法
GeminiのCanvas、実はちゃんと修正されています。
しかし、コードをまるごと再生成してくれるわけではなく、一番最初のCanvasを直接変更するような感じで修正してきます。
正直めちゃくちゃ使いづらいです。
特に大量に修正を繰り返すと、いちいち一番最初に戻らないといけないのが厄介です。
現状の対処法としては、Canvasモードを使わずに通常通りコードを出力させるくらいでしょうか。
この方法なら都度修正したコードを出力してくれます。
ただし、Canvasのようにプレビューはできません。
なので、そのコードを自分のローカル環境などにコピペして動かす必要があります。
ちなみに、HTML、CSS、JavaScriptなら「PLAYCODE」というサイトでCanvasのようにブラウザ上でプレビューを確認することができます。
しかもコードを変更すればリアルタイムでプレビューに反映されます。
つまり、「PLAYCODE」のようなプレビューできるサイトを別のタブで開いておき、Geminiで通常通り出力させたコードをコピペして内容を確認する、というのが一番使いやすいかもしれません。
ちなみに、このようにブラウザ上でコードを実行できるサイトを「プレイグラウンド」というらしいです。
プレイグラウンドのサイトはすべてのプログラミング言語に存在するわけではありませんが、「言語名 プレイグラウンド」と検索してみるとあるかもしれません。
【参考】ChatGPTならどうなる？
ChatGPTにも同様のCanvas機能があります。
ちょっと話はそれますが、ChatGPTでの挙動も見てみましょう。
Geminiのときと同じように、適当なHTMLコードを作ってもらいます。
すると、以下のように適当なHTMLコードが生成されます。
右上にある「プレビュー」をクリックすると、ページが表示されます。
あまり関係ないですが、Geminiより情報量は多めですね。
次に、Geminiのときと同じようにお知らせ欄を追加してもらいます。
すると、以下のように、先ほどのコードをベースとして、お知らせ欄を追加したコードを直後に出力してくれます。
しかもGeminiみたいに余計なことは言わずにコードを即出力してくれます。
「プレビュー」を押せば、ちょっとわかりにくいですが、しっかりお知らせ欄が反映されています。
色も変更してみましょう。
こちらも同様に、今の依頼に対して、修正したコードの全文が直後に表示されます。
当然ながら、プレビューを押すと反映されていることが確認できます。
まとめ
個人的には最近のGeminiはChatGPTを超えるレベルだと思っています。(世間的にもそうかも)
しかし、Canvasに関しては正直めちゃくちゃ使いづらいです。
ChatGPTのように都度コードを生成してくれるようになればいいですね。
