Geminiビルドモード試行紹介

Google AI Studio でのGeminiビルドモード試行紹介
Prompt からWebアプリ自動生成
2025/11/30 DevFest Kyoto 2025 LT

Transcript

1. DevFest Kyoto 2025 Build mode in Google AI Studio プロンプトから Webアプリ 最初の一歩 試行紹介 2025-11-30 13:30-17:00 Noriko Takiguchi GDG Kyoto: Co-Organizer Programmer
2. Build your ideas with Gemini Google AI Studio Build の Start ページを開くと 目に飛び込んでくるセンテンス
3. 何にしようか ～ アイデアのきっかけ 予定していること 大阪から名古屋まで行く方法？ 電車限定で 旅程を決める要因は他にもあるけど 近畿特急 JR在来線 東海道 新幹線 高い 安い 速い 遅い ＞ ＞ 運 賃 時 間
4. 何にしようか ～ アイデアのきっかけ 運賃のみに着目 大阪-名古屋 JR在来線でより安く JR在来線 安い 遅い 運 賃 時 間 経 験 か ら 長距離乗車時、 途中下車（切符を分割購入） した方が安くなる
5. Start with Prompt ➢ プロンプトを作成 • Start ページ入力エリアに説明を入力 ← 今回試行 • 音声入力・ファイルアップロード指定も可能 • 特定機能の追加指定可能 ▪ [I'm feeling lucky]ボタンや Supercharge your apps with AI 一覧 ➢ プロンプトを実行 • チャットパネルに応答あり • Webアプリ自動作成 ▪ デフォルトでは React Webアプリ [Build] ボタン
6. Step1 : アイデアを入力＆ Build 思いつくまま説明文を入力 → [Build]ボタン クリック 処理開始後、まずは「停車駅を調べます」といったメッセージが出た なかなか段取りいいなあといった感触
7. Step1 : 初期ファイル自動生成 Webアプリ自動生成 Gemini3 Pro Preview Ran for 25s 7種類のファイル生成 Codeタブ コード閲覧・編集可能
8. Step1 : 生成WebアプリPreview ➢ アプリ名自動生成 　　JR Split-Fare Optimizer ➢ HTML構成 ← 問題ない A. タイトル B. 入力エリア C. 検索ボタン D. 検索結果エリア A B C D 検索してみたら 運賃がおかしい 区間あり
9. Step1 : WebアプリPreview 運賃がおかしい区間あり D
10. ➢ プロンプトを作成 • チャットパネルの下部の入力エリアを使う • Gemini への修正依頼内容を記載する ← 今回試行 • 音声入力・ファイルアップロード指定も可能 • Preview画面での直接指示の適用も可能 ➢ プロンプトを送信 • チャットパネルに応答あり • 適宜ファイル自動更新 ▪ Webアプリの入力エリア文言も自動整理されていく Continue building Make Changes, add new Features, ask for anything ↑ [↑] ボタン
11. 生成Webアプリ最新状況 プロンプト修正 5回 繰り返す 正しい分割区間の運賃　安い順 OK 他に安い分割例があるかは未検証 JR Split-Fare Optimizer An intelligent travel assistant that calculates cost-saving split-ticket (bunkatsu) routes for JR lines using Google Gemini 2.5 Flash. JR分割運賃オプティマイザー Google Gemini 2.5 Flash を使用して、JR 線のコストを節約できる分割チ ケット (分割) ルートを計算するインテリジェントな旅行アシスタント。 自動生成されたアプリ名
12. 大阪から名古屋へJR東海道本線（新快速）を利用して移動します。 直通運賃（約3410円）と比較して、京都、米原、岐阜などで分割購入（途中下車）することで安くな るルートを、安い順に 3つ提案してください。 【重要】 ・大阪-米原の運賃は1730円ではなく1980円（JR西日本）、米原-名古屋は1340円（JR東海）で計 算してください。 ・最新の運賃表を確認してください。 入力エリア：自動整理された説明文
13. 正しい区間運賃　安い順 見出し：複数駅名表示 Step4から 駅名英語表記に
14. Verified sources（検証済みの情報源） Google Search で現在の運賃を確認したサイト一覧 JRのサイトを 直接参照しているわけではない
15. ま と め ～ 感 想 ➢ プロンプトの作成テクニックを磨く • 目的、条件は正しく記載 • 具体的な参照先や指示 • 文章表現力（適格に） • AIの間違いを指摘できる → Gemini は素直に応対 ➢ テーマ・アイデア • 身近なことでも OK（個人情報は NG） • まずはシンプルに試す → 汎用的なものにも挑戦 Google AI Studio プロンプト入力による Build の試行限定 よき相棒だが 生成アプリの 検証は必要
16. ➢ Build mode in Google AI Studio ◦ https://ai.google.dev/gemini-api/docs/aistudio-build-mode ➢ Gemini 3 Developer Guide ◦ https://ai.google.dev/gemini-api/docs/gemini-3 ➢ Google AI Studio quickstart ◦ https://ai.google.dev/gemini-api/docs/ai-studio-quickstart 参考リンク
17. 参 考 資 料 プロンプト修正検討した内容
18. Step2 : Google Search Grounding 最新のJR東海運賃表参照を提示 → Google検索機能使用 に
19. Step2 : ファイル更新内容 Google検索機能 まだ効果少ない 不十分な条件設定のためか （JR東海の運賃表提示のみ） 運賃不具合多数
20. Step3 : ファイル更新内容 JR西日本とJR東海の区間内の駅を提示
21. Step3 : WebアプリPreview 入力エリアの記述が自動整理された
22. Step3 : WebアプリPreview 各区間運賃は正しくなった！ 他の分割例はないか？ 改善点：複数の分割駅名が見出しに表示されない
23. Step4 : ファイル更新内容 複数の分割駅名を表示して欲しいと提示
24. Step4 : ファイル更新内容 期待したが 運賃がバグってしまった 複数駅名表示は OK レイアウト調整あり 突然、駅名英語表記に
25. Step4 : WebアプリPreview トータル運賃がすべて安くなっていておかしい 分割駅名が複数表示できている　駅名英語表記
26. Step5 : ファイル更新内容 運賃計算のバグを指摘　大阪 -名古屋の直通運賃も提示
27. Step5 : ファイル更新内容 考慮された内容 大阪-名古屋直通運賃 岐阜駅の認識 検索ワード改善 検索クエリ更新
28. Step5 : WebアプリPreview 入力エリアの記述が自動整理された
29. Step5 : WebアプリPreview 大阪-米原 の運賃のみおかしい
30. Step6 : ファイル更新内容 大阪-米原 の運賃の誤りを指摘
31. Step6 : ファイル更新内容（最新状況） 考慮された内容 基準運賃の修正 不正値の対応 検索キーワード改善 初期クエリ更新