続 Gemini 3 Pro Canvas 機能を使ってみたレポート

先日、「Gemini 3 Pro Canvas 機能を使ってみたレポート」をアップしたんですが、その影響があり、当サイトへのアクセスが急激に伸びています。

この記事を書いた時は、特に汎用性のない基礎中の基礎と思い記事を書いたんですが、ここまで需要があるようでしたら、細かい機能や知っておきたいポイントも知っていただかないと・・・という気になりました。

ということで、本記事は、前回アップした「Gemini 3 Pro Canvas 機能を使ってみたレポート」から先に一歩進んだ記事になるべく、また違ったポイントを紹介させていただきたく思います。
前述の前編記事とあわせてご覧ください。

Gemini 3 Pro Canvasの一歩進んだ機能をレビュー

プロンプト

以下の内容をプロンプトとして打ち込みました。

抑えるべきポイントは以下のポイントです。

• 5ページ構成・・・というリクエストに、どのように応えてくれるのか？
• スクリプトやSVGを用いて動的な要素をつくってほしい・・・というリクエストにどのように応えてくれるのか？

ということで進めてまいります。

「5ページ構成」と「動的要素」についての対応は・・・

上記のプロンプトを打ったところ、以下のように返信がありました。

ということで、見事にポイントとなる部分に対して応えていただけましたね。

「5ページ構成」に対する Gemini の対応

最初に「5ページ構成」について、書いておきますと、「5ページ構成」はjavascriptでコンテンツを出し分ける形で対応されていました。
凄いですね。
結局、どこまでいっても単一ページという構成は変わらなさそうですが、見事に5ページ構成を実現してくれました。

「動的要素」に対する Gemini の対応

「動的要素」は、SVGをスクリプトで動かすことで対応されていました。
見事にメイン画像の部分はSVGでふわふわ動いております。
この部分だけを使うために、プロンプトをつくったりすれば、今後、SVGで動的なコンテンツをつくることがもっと容易になっていく未来が見えますね。
凄いですね。

サンプルコード

さて、ここで実際に書き出されたサンプルコードです。
ドキュメントにコピペいたしましたので、これをコピペいただき、ご自身のサーバーにアップしてみてください。

「機能を追加」を実装

さて、今回は、上記のプロンプトでページを作成したあと、「Gemini 機能を追加」をしてみました。
以下のキャプチャの赤枠をご覧ください。
（さっきのサンプルコードは全て実装した後のコードです。）

「機能を追加」のボタンをクリックすると、以下のように返信がありました。

そうしますと、グローバルナビにリンクが追加されました。

ここまで手軽に使えるAPIを見たのは初めてかもしれません。笑
勝手に機能が追加されていくというですね。驚

デザインはともかくとして、機能とコンテンツは見事なものが出来上がってきました。
因みにですが、追加された機能のコンテンツは以下のようなツールになっています。

因みにですが、「Gemini 機能を追加」のボタンの下の「選択して質問」をクリックすると、ブラウザ上に選択ツールが出てきて領域を選ぶことができるようになります。
気になる箇所がある場合は「選択して質問」をしてみてください。

いやはや、凄い凄い。

まとめ

いかがでしたでしょうか。
これは、もはや初心者の学習用の枠に留まらないくらいのコードや仕様になってきた気がいたします。

派生するポイントをどんどんプロンプトに打ち込めば、かなりリアルなWEBサイトが出来ありますね。
ただ、どこまでいっても複数ページではないと考えられるため、仕様的に制限はかかりそうです。

デザインに関してもプロンプトをうつ必要がありそうな気もしています。

ただ、LPとして即興コンテンツをつくるという意味においては、Geminiの右に出るAIはないんだろうな・・・と感じています。

探ればもっと深い機能が出てきたり、もっと実用的なデザインや動的コンテンツをつくれるんじゃないかなと思いますので、気になる方はぜひ深掘りしていただきたいところかもしれません。
ひとまず、「続 Gemini 3 Pro Canvas 機能を使ってみたレポート」は以上です。

今後、ぼくも深掘りを続けた際には色々レポート・レビューも深めていきたいと思います。