以前に「Gemini Canvasとは？」記事で、Geminiの「Canvas」機能についてご紹介しました。
上記記事では、主に作成されたドキュメントをさらに編集したり、それに基づいて Webページを作成することをご紹介しました。
今回は、その機能のうち、Webアプリの作成をやってみます。
例題として、画像中の文字を削除する Webアプリを作ってみます。
Gemini Canvasを使用して Webアプリを作成する手順は、主に生成、編集、公開の 3つの段階に分けられます。
- Canvasの起動とアプリ生成
- Gemini公式サイトにアクセスし、ログインします。
- プロンプト入力欄の下にある「ツール」から「Canvas」ボタンをクリックして、Canvasモードを有効にします。（下図）
- 作成したいアプリの内容を具体的に入力します（例：「TODOリストアプリを作って」「ブロック崩しゲームを作成して」など）。
今回は、文字を含むサンプル画像をプロンプト内の「＋」を押してアップロードし、プロンプトとして「この画像から文字を削除して」と入力しました。 - すると、右側に Canvasパネルが開き、HTML、CSS、JavaScriptを含むコードが自動生成されます。（下図）
- その最上部にある「コード」を開くと、この Webアプリのコードが表示されます。（下図）
- そして、チャット画面には以下の使い方の説明が表示されました：
-----(ここから)-----
画像を直接編集することはできませんが、Gemini APIを使用して画像からテキストを削除できるWebアプリを作成しました。
このアプリを使用するには：
1. 「画像を選択」ボタンをクリックして、編集したい画像などをアップロードしてください。
2. プロンプト欄に「画像から文字を削除して」などが入力されていることを確認します。
必要に応じて調整してください。
3. 「生成する」ボタンをクリックしてください。
4. 生成された画像は右クリックまたは「ダウンロード」ボタンで保存できます。
画像の文字を削除するための専用ツールを作成しました。
-----(ここまで)-----
- 試しに、文字が書き込まれた地図画像をアップロードして「生成する」をクリックすると、下図のように文字がすべて削除された画像を生成してくれました。
- 内容の編集とデバッグ
- プレビュー確認： Canvas内で直接アプリの動作を確認できます。
- 対話形式の修正： 「色を青系にして」「新しい機能を追加して」とチャットで指示を出すだけで、AIがコードを書き換えます。
- 部分修正： 修正したいコードの範囲を選択し、Geminiに特定の変更を依頼することも可能です。
- 1ファイル化： 共有しやすくするために、プロンプトで「1つの HTMLファイルにまとめて」と指示すると、CSSや JSが統合された単一ファイルを作成できます。
- アプリの公開・配布
作成したアプリを他のユーザーに届けるには、以下の方法があります。- Canvas共有： 右上の「共有」ボタンからリンクを発行し、他のユーザーが自分の Canvasとして開けるようにします。
- HTMLファイル保存： 生成されたコードを .html形式で保存し、ブラウザで開けるように配布します。
- 外部サービスへの埋め込み： Googleサイトなどのコード埋め込み機能を利用して公開します。
- Google Apps Script (GAS)： GASにコードを貼り付けてデプロイすることで、Webアプリとして常時公開が可能です。
いかがでしょう。凄くないですか？
今回は、簡単な例題で、しかも修正などはまったくしない“Canvas任せ”にしましたが、同様な作業をさせるなら、このように Canvasを使って Webアプリにすれば作業効率が高まりますので 1つ作っておくと便利だと思います。