ブラウザ版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のそれぞれとYoomを連携してください。

詳細を見る 試してみる

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

試してみる

---

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

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

■注意事項
・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、GeminiのそれぞれとYoomを連携してください。
・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
・プランによって最短の起動間隔が異なりますので、ご注意ください。

詳細を見る 試してみる

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

試してみる

---

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

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

■注意事項
・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/