ブラウザ版Geminiでプログラミングしてみた！Canvas機能でWebアプリを作る手順とコツ

かつてプログラミングといえば、重い開発環境（IDE）をPCにインストールし、何時間もかけてセットアップするのが当たり前でした。
しかし、GoogleのAI「Gemini」の進化により、今やブラウザ1つあれば、対話を通じて簡単なアプリのコードを作成できるようになってきています。

今回は、ブラウザ版Geminiをプログラミングに活用する方法と、「Canvas」を使った開発手順の検証を行っていきます。

⭐YoomはGeminiを使った開発フローを自動化できます

👉Yoomとは？ノーコードで業務自動化につながる！

Geminiで生成したコードや、GitHubで管理するタスク（Issue）の下書きを、手作業でGitHubに貼り付けるのは意外と手間に感じるものです。
Yoomを使えば、GeminiとGitHubを直接連携させ、プロンプトひとつでIssue作成やプルリクエストの作成までを自動化できます。

「まずは試してみたい！」という方は、以下のテンプレートからすぐに自動化を体験してみましょう。

フォームでプロンプトが送信されたら、Geminiでコンテンツを生成してGitHubでプルリクエストを作成する

試してみる

---

■概要

Geminiで生成したドキュメントやコードを、手作業でコピーしてGitHubにプルリクエストを作成する作業は、手間がかかりませんか？この手作業はミスの原因になったり、開発スピードを低下させたりする要因にもなり得ます。このワークフローを活用すれば、フォームにプロンプトを送信するだけで、Geminiによるコンテンツ生成からGitHubへのプルリクエスト作成までを自動化し、こうした課題をスムーズに解消できます。

■このテンプレートをおすすめする方

• GeminiとGitHubを連携させて、コンテンツ作成業務を効率化したいと考えている方
• 手動でのプルリクエスト作成に時間がかかり、開発サイクルを改善したいエンジニアの方
• 生成AIを活用したドキュメント管理の自動化を推進しているプロジェクトマネージャーの方

■このテンプレートを使うメリット

• フォーム送信を起点に、Geminiでの生成からGitHubへの反映までが自動化され、手作業にかかっていた時間を短縮できます。
• 手動でのコピー＆ペーストやファイル操作が不要になるため、転記ミスやプルリクエスト作成時の設定ミスといったヒューマンエラーを防ぎます。

■フローボットの流れ

1. はじめに、GeminiとGitHubをYoomと連携します。
2. 次に、トリガーで、フォームトリガーを選択し、「フォームが送信されたら」というアクションを設定します。
3. 次に、オペレーションで、Geminiを選択し、「コンテンツを生成する」アクションを設定します。
4. 最後に、オペレーションで、GitHubの「プルリクエストを作成する」アクションを設定し、Geminiで生成したコンテンツを元にプルリクエストを作成します。

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• フォームトリガーでは、ユーザーがプロンプトなどを入力しやすいよう、フォームのタイトルや質問項目を任意の内容に編集してください。
• Geminiでコンテンツを生成するアクションでは、生成したい内容に合わせてシステムプロンプトを任意の内容に設定してください。

■注意事項

• ‍‍Gemini、GithubのそれぞれとYoomを連携してください。

詳細を見る 試してみる

フォームでIssueの詳細が送信されたら、Geminiで要約しGitHubでIssueを作成する

試してみる

---

■概要

フォームで受け付けた報告や問い合わせを、都度GitHubに手動で起票する作業は手間がかかるのではないでしょうか。特に、長文の内容を整理してIssueを作成するのは骨が折れる作業です。このワークフローは、フォームが送信されると、その内容をGeminiが自動で要約し、GitHubにIssueとして作成します。GeminiとGitHubを連携させることで、報告内容の確認からIssue起票までの一連のタスクを自動化し、業務の効率化を実現します。

■このテンプレートをおすすめする方

• GitHubを利用してIssue管理を行っており、報告フローを自動化したい開発担当者の方
• フォームからの問い合わせ対応で、手作業での情報転記に手間を感じている方
• GeminiとGitHubを連携させ、より高度な業務自動化を実現したいと考えている方

■このテンプレートを使うメリット

• フォーム送信を起点に、Geminiでの要約からGitHubへのIssue作成までを自動化し、手作業にかかっていた時間を削減します
• 手動でのコピー＆ペーストや情報整理に伴う、転記ミスや起票漏れといったヒューマンエラーの発生を防ぎます

■フローボットの流れ

1. はじめに、GeminiとGitHubをYoomと連携します
2. 次に、トリガーで、フォームトリガーを選択し、Issue起票のきっかけとなるフォームを作成します
3. 次に、オペレーションで、Geminiの「コンテンツを生成」アクションを設定し、フォームで受け付けた内容を要約するように指示します
4. 続けて、オペレーションでテキスト抽出機能を選択し、Geminiが生成した文章からIssue作成に必要な情報を抽出します
5. 最後に、オペレーションでGitHubの「Issueを作成」アクションを設定し、抽出した情報を基にIssueが自動で作成されるようにします

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• フォームトリガーのタイトルや質問内容は、Issueとして受け付けたい情報に合わせて任意で編集してください
• テキスト抽出のオペレーションでは、Geminiが生成した文章からどの部分をIssueのタイトルや本文にするかなどを任意で設定してください
• Geminiのオペレーションでは、システムプロンプトを任意の内容に設定することで、より業務に沿った要約を生成するように指示できます
• GitHubでIssueを作成するアクションでは、タイトルや本文に事前のアクションで取得した値などを使用して設定を行ってください

■注意事項

• ‍‍Gemini、GitHubのそれぞれとYoomを連携してください。

詳細を見る 試してみる

✏Geminiがプログラミングで役立つ理由

Geminiは、エンジニアやプログラミング学習者の作業を進めやすくする機能が揃っています。ここでは、特に便利なポイントを紹介します。

Canvas（キャンバス）機能による共同作業

これまでのように、チャットからコードをコピーして別のエディタに貼り付ける手間が減り、AIと会話しながらコードを調整していく流れを作れます。

大量の情報を扱えるコンテキストウィンドウ

プロジェクトのファイルをフォルダごとドラッグ＆ドロップすれば、個別の関数だけでなくプロジェクト全体の構成や依存関係を踏まえたうえで、修正案や実装方針を提案してもらえます。

シンプルなコード生成とデバッグのサポート

エラーが発生した場合、生成したコードに対して具体的な修正提案を即座に提示してくれるため、デバッグ作業が効率的に進みます。これにより、初心者でもスムーズに問題を解決し、効率的に学習を進めることができます。

🤔【実践検証】プログラミング不要でBMI計算アプリをGeminiで作成

無料版のGemini（Gemini3 Flash）を使い、実際に「BMI計算ツール」というシンプルなWebアプリを作成してみます。

Canvasモードを選択し、 「BMIを計算できるWebアプリのコードを書いて。見た目はモダンで、入力フォームと計算ボタン、結果表示欄が必要」 とのプロンプトを送信してみると、約17秒でHTML/CSS/JavaScriptの作成が完了し、Canvasが立ち上がりました。

プレビュー画面で実際に身長と体重を入力すると、正しくBMIが計算され、
コードを一行も手書きすることなく、1,2分でコーディングから実行まで動作したことはかなり驚きでした。

また、表示されたプレビューを見ながら「もっとボタンを丸くして」、「肥満度に応じて背景色を変えて」と追加で指示を出すと、AIがその場でコードを書き換えてくれました。
これにより、思っていたものと違った結果が出力されても、手間なく修正していくことができそうです。

GeminiでWebアプリを作成した結果

プロンプトを送信すると、約17秒でHTML、CSS、JavaScriptが生成され、Canvas機能のおかげでスムーズに動作確認ができました。
もしCanvas機能がなければ、ソースファイルを個別に作成し、コードを貼り付けて実行する必要があります。
パスの誤りだけでもうまく動作しないことがあるため、ブラウザ上でレイアウトをすぐに確認できるのは非常に効率的だと感じました。

無料版でもシンプルなアプリを作成でき、優れたプログラミング支援を提供してくれるため、今後の開発作業をより効率的に進めるための有益なツールだと言えるでしょう。

✅DeepThinkモードと無料版の使い分け

調べてみると、複雑なロジックを必要とする場合は有料版の「Google AI Ultra」で利用できる「DeepThink（ディープシンク）」モードが有用であることが分かりました。

• 標準モード: レスポンスが非常に速く、今回のようなシンプルなWeb制作や、既存コードの解説、定型的なスクリプト作成に最適。
• Deep Thinkモード: 難解なアルゴリズムの実装や、原因不明のバグ修正など、AIが「時間をかけて深く考える」必要があるタスクで真価を発揮。

初めのうちは無料版のCanvas機能で十分に「動くものを作る楽しさ」を実感し、実務で大規模なシステムを構築するフェーズになれば有料版へ移行するのがベストな選択と言えるでしょう。

◆Google AI Ultraの概要より取得

👍Geminiに「動くコード」を書かせるためのコツ

AIにプログラミングを依頼する際は、以下の3点を意識すると精度が向上します。

• 役割を与える:「あなたはシニアエンジニアです」といった一言を添えるだけで、より保守性の高いコードを出力してくれます。
• 制約を明確にする: 「ライブラリはReactを使って」「TypeScriptで書いて」 など、使用する技術スタックをあらかじめ指定しましょう。
• エラーはそのまま貼り付ける:
  コードが動かない時は、コンソールに表示されたエラーメッセージを丸ごとGeminiに投げてください。AIは文脈を理解しているため、即座に修正案を提示してくれます。

📉まとめ

Geminiを使ったプログラミングは、これまでの開発フローを大きく変える可能性を秘めています。数分で動作するWebアプリを作成できるCanvas機能や、コード修正を支援するデバッグ機能により、開発の効率を高められるツールです。
特に、初心者でも手軽にプログラミングの基礎を学びながら、コードの修正や改善が行える点が魅力的です。
無料版で十分に楽しむことができ、必要に応じて有料版へ移行してさらに複雑なロジックに対応することもできます。
Geminiを使ったプログラミングは、これからの開発作業をよりスムーズで効率的に進めるためのツールとなり得るでしょう。

✨Yoomでできること

✨こちらから簡単に登録が可能です
プログラミング後の管理業務も、Yoomを使えば効率化できます。例えば、 GitHubでプルリクエストが作成された際に、Geminiが内容を要約し、レビューのポイントをSlackやメールに通知する仕組みを構築できます。

開発に集中する時間を最大化するために、ぜひこれらの自動化を取り入れてみてください。

GitHubでIssueが作成されたら、Geminiで内容を要約しメールで通知する

試してみる

---

■概要

GitHubで作成される大量のIssue管理に、時間を要していませんか。
特に英語で記述された内容の把握や、チームへの共有のために手作業で要約を作成するのは手間がかかる作業です。

このワークフローは、GitHubで新しいIssueが作成されると、Geminiが自動で内容を要約し、メールで通知します。GeminiとGitHubを連携させることで、Issue管理に関する一連の作業を自動化し、開発業務に集中できる環境を構築します。

■このテンプレートをおすすめする方

• GitHubのIssueを手動で確認し、内容の把握に時間がかかっている開発者の方
• GeminiとGitHubを連携させ、プロジェクト管理の効率化を目指すチームリーダーの方
• 英語で作成されたIssueの内容を、日本語の要約で素早くキャッチアップしたい方

■このテンプレートを使うメリット

• GitHubでIssueが作成されると、Geminiによる要約がメールで届くため、Issueの内容を迅速に把握でき、確認作業の時間を短縮します
• 重要なIssueの見逃しを防ぎ、関係者への情報共有も円滑になるため、プロジェクトの進行をスムーズにします

■フローボットの流れ

1. はじめに、GeminiとGitHubをYoomと連携します
2. 次に、トリガーでGitHubを選択し、「Issueが新しく作成されたら」というアクションを設定します
3. 次に、オペレーションでGeminiを選択し、「コンテンツを生成」アクションを設定して、トリガーで取得したIssueの内容を要約するよう指示します
4. 最後に、オペレーションでYoomの「メールを送る」アクションを設定し、Geminiが生成した要約を本文に含めてメールを送信します

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• Geminiにコンテンツを生成させるアクションでは、システムプロンプトを任意の内容に設定できます。「日本語で要約して」「重要なポイントを3つにまとめて」など、目的に応じた指示を追加してください
• メールを送信するアクションでは、宛先、件名、本文を自由に設定できます。件名にIssueのタイトルを入れたり、本文にIssueのURLや作成者の情報を含めたりするなど、柔軟なカスタマイズが可能です

■注意事項

• ‍‍GitHub、GeminiのそれぞれとYoomを連携してください。
• トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
• プランによって最短の起動間隔が異なりますので、ご注意ください。

詳細を見る 試してみる

GitHubでプルリクエストが作成されたら、Geminiで内容を要約しメールで通知する

試してみる

---

`

■概要

GitHubでの開発において、日々作成される多くのプルリクエストの内容を一つひとつ確認するのは時間がかかる作業ではないでしょうか。このワークフローを活用すれば、GitHubでプルリクエストが作成された際に、その変更内容をGeminiが自動で要約し、指定のメールアドレスへ通知します。GeminiとGitHubを連携させることで、レビュー担当者は概要を迅速に把握でき、コードレビューのプロセスを効率化できます。

■このテンプレートをおすすめする方

• GitHubでのプルリクエストレビューに多くの時間を費やしている開発者の方
• GeminiとGitHubを連携させ、開発プロセス全体の効率化を図りたいチームリーダーの方
• コードレビューの確認漏れや対応遅れを防ぎたいプロジェクトマネージャーの方

■このテンプレートを使うメリット

• GitHubでプルリクエストが作成されると、Geminiが自動で要約を生成するため、レビュー担当者が内容を把握するまでの時間を短縮できます
• レビュー依頼の通知プロセスが自動化されることで、確認漏れといったヒューマンエラーを防ぎ、開発業務の標準化にも繋がります

■フローボットの流れ

1. はじめに、GeminiとGitHubをYoomと連携します
2. 次に、トリガーでGitHubを選択し、「プルリクエストが作成されたら」というアクションを設定します
3. 次に、オペレーションでGeminiを選択し、「コンテンツを生成」アクションでプルリクエストの内容を要約するよう設定します
4. 最後に、オペレーションでYoomの「メールを送る」アクションを設定し、Geminiが生成した要約内容を本文に含めて指定の宛先に送信します

※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

• Geminiのオペレーションでは、システムプロンプトに「プルリクエストの変更点を日本語で3点に要約してください」のように、出力させたい内容を任意で設定してください
• メールを送るオペレーションでは、宛先、件名、本文を任意で設定できます。本文には、トリガーで取得したプルリクエストのURLやタイトル、Geminiが生成した要約といった動的な情報を自由に組み込んでください

■注意事項

• ‍‍GitHub、GeminiのそれぞれとYoomを連携してください。
• トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
• プランによって最短の起動間隔が異なりますので、ご注意ください。

詳細を見る 試してみる

【出典】

https://note.com/shironamazu/n/n6bbf6bab4cc9
https://www.yoshidumi.co.jp/collaboration-lab/gemini-no-code-ai-app
https://cloud.google.com/blog/ja/topics/developers-practitioners/gemini-code-assist
https://ai.google.dev/gemini-api/docs/changelog?hl=ja
https://one.google.com/intl/ja_jp/about/google-ai-plans/