ブラウザ版Geminiでプログラミングしてみた!Canvas機能でWebアプリを作る手順とコツ
ブラウザ版Geminiでプログラミングしてみた!Canvas機能でWebアプリを作る手順とコツ
Yoomを詳しくみる
この記事のテンプレートを試す
ブラウザ版Geminiでプログラミングしてみた!Canvas機能でWebアプリを作る手順とコツ
自動化のアイデア

2026-02-03

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

Harusara
Harusara

かつてプログラミングといえば、重い開発環境(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を連携させて、コンテンツ作成業務を効率化したいと考えている方
・手動でのプルリクエスト作成に時間がかかり、開発サイクルを改善したいエンジニアの方
・生成AIを活用したドキュメント管理の自動化を推進しているプロジェクトマネージャーの方

■注意事項
・Gemini、GithubのそれぞれとYoomを連携してください。

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

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

■注意事項
・Gemini、GitHubのそれぞれとYoomを連携してください。

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

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

Canvas(キャンバス)機能による共同作業

Canvasを使うと、チャット画面の横に専用のエディタが表示され、AIが生成したコードをその場で編集・プレビューできます。

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

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

Gemini 3 Pro(有料版)では最大100万トークンのコンテキストを扱えます。これは、約400万もの文字数のドキュメントを一度に読み込める規模 です。

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

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

Geminiでは、シンプルなプログラムやスクリプトを短時間で生成することができます。

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

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

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

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