Google AI Studio - Starter Apps 使用記
(stdy.blog)(元記事にはシステムプロンプト、コードスニペット、gif が含まれています)
- Google AI Studio がアップデートされ、Gemini を活用したさまざまなミニアプリ(Starter Apps)を試して遊べる場が追加された
- 10 個以上のデモをコード修正しながら実行可能。組み込みの Gemini API Key を使うため無料
- ただし使いすぎると 400 エラーになる。1 日あたりの呼び出し制限のようなものがある気がする
- 別のアカウントなら実行可能
推測してみる: Google はなぜこれらのデモを公開したのか?
- 最近の Gemini は、テキストを超えて画像や動画も理解・生成する マルチモーダル(multi-modal) 機能と優れたコーディング能力で注目を集めている
- しかしその多くは LLM チャットボットの中で使われるだけで、一般ユーザーが API レベルで活用することはあまりなかった
- Google は、こうした機能が API としても広く使われて収益につながることを期待して、これらのデモを披露したのではないか
- すべてのデモが、Gemini の機能をコードレベルで、他の Google API と組み合わせながら、どう Web アプリとして実装すればよいかを見せるショーケースだから
デモのプロンプトとコード分析
複雑度の高いものを 2 つ見てみた
Video Toys: 動画を理解して説明する + バイブコーディングの例
- YouTube 動画を Gemini 2.5 で分析し、シンプルなインタラクティブ教材アプリをバイブコーディングで作ってくれるデモ
- 「インタラクティブな Web アプリで教育体験を作ることに専門性を持つ教育学者でありプロダクトデザイナー」として動画を分析させ、その Web アプリの仕様を作り、それを実装する
- サンプル動画はすでに内容を分析済みなので、教材アプリをすぐ実行して試せる
- 数ファイル構成の他のデモアプリと違って React で構成されている
- Gemini が作ったバイブコーディング用の仕様と生成されたコードを、ユーザーがどちらも修正できる
- 動画ベースのサービスや、コードを生成するサービスを作りたい人におすすめ
Maps Planner: マルチモーダル + 関数利用 + 構造化出力 + 地図 API の例
- 地名を与えるとそれについて説明し、Day Planner Mode をオンにすると 1 日の旅行プランを立ててくれるデモ。移動時間も見積もる
- General Explorer Mode と Day Planner Mode の 2 種類を 1 つのシステムプロンプトでサポート
- ユーザーがどのモードを選んだかに応じてシステムプロンプトを微妙に変えるのが印象的
- 地図データを正確に入出力し、2 つの位置の間に線を正確に引く関数を定義して Gemini に呼び出させる
- MCP で実現したい拡張性とは、こういうものなのだろう
- プロンプトもよいが、地図 API と位置データの扱い方もよく分かる。地図関連サービスを作りたい人におすすめ
自分で作ってみる
- デモアプリをコピーしてカスタマイズ可能。最初から作る人向けのテンプレートも多い
- Explain Things with Lots of Tiny Cats という画像生成デモをコピーして、自分のものを作ってみた
- 概念について説明を頼むと、たくさんの猫のメタファーで一種の Web 漫画を作ってくれるデモ
- 画像生成を続けさせるプロンプト(No commentary, just begin your explanation. Keep going until you're done.)と、そうして生成された画像をストリームで 1 枚ずつ見せるコードが印象的
- 日本語 + カバ版に変えて カバは知らないことがありません を作成
- Google Fonts から適当な日本語フォントを持ってきて、HTML コードとプロンプトを少し修正
- 自分のアプリを共有する機能はあるが、あまりうまく動かない
- 関連ファイルはすべて Google Drive に保存されるため、Google Drive に行って普通にファイル共有するようにすればよい
Gemini Cookbook
- Starter Apps は面白い Web アプリの例だったのに対し、こちらにはさまざまな Python の例が載っている
- 数時間前に公開された Gemini 2.5 Flash の例もある
- 生成 AI サービスを作る人が参考にするのによい
まだコメントはありません。