Googleが開発者向けプラットフォームAI Studioを全面刷新し、バイブコーディングに完全対応した新機能を実装した。Geminiモデルを活用したアプリケーション開発に特化した環境として、画像生成モデルNano Bananaの統合、音声合成機能、URLからのコンテキスト取得、そして包括的なログ管理とデータセット構築機能を提供する。新たに追加されたビルド機能では、対話型地図チャットボットや子供向けストーリーアプリなど、複数のAI機能を組み合わせた複雑なフルスタックアプリケーションをプロンプトから直接生成可能となっている。さらにClerkなどの外部サービスと連携することで、ユーザー認証や決済機能を含む本格的なプロダクション環境への展開も実現できる。Gemini 2.5 ProやFlashといった各種モデルの比較機能、Python・JavaScript・Goなど複数言語のSDKサポート、Google Cloud Runを利用したワンクリックデプロイなど、開発者体験を重視した設計となっている。
GoogleがバイブコーディングにAll-In
Googleはバイブコーディングに全力で取り組んでおり、バイブコーディングの時代に向けてAI Studioのエクスペリエンスを完全に再設計しました。かなり優れた機能が搭載されています。ローガンもこうツイートしていました。バイブコーディングは世界中のすべての学校や大学で教えられるべきだ、まずはキャンパスで。未来へようこそ、というわけです。このビデオでは、この新しいエクスペリエンスがどのようなものか、AI Studioにはどんな新機能があるのか、そして新しいビルド機能でフルスタックアプリケーションを構築する方法をお見せします。では始めましょう。
こちらが新しくデザインされたAI Studioのクイックツアーです。Googleは本当に開発者フレンドリーなものにしようとしています。Geminiを搭載したバイブコーディングアプリを構築しようとしているなら、ここから始めることをお勧めします。
ここにはバイブコード、生成AI対応アプリ、そしてビルドがあります。それからプレイグラウンドでモデルとチャットしたり、ダッシュボードで使用状況などを監視できます。これは開発者向けの非常に強力な機能を備えた新しい追加機能です。Nano Bananaの画像生成モデルView 3.1を試すこともできます。
URLからコンテキストを取得することもできます。そして十分に強調されていないのが、Geminiの音声生成機能です。下部には、Gemini APIの使い方に関する小さなセクションがあります。Python、JavaScript、Go、そして直接のREST API呼び出しもサポートしています。このビデオの後半では、これらの技術のいくつかを使用して、おそらく他のプラットフォームでは不可能な、かなり複雑なアプリを構築していきます。
サイドにはビルドセクションがあり、これを使ってバイブコーディングアプリを作成できます。でも彼らはこの新しいダッシュボードも追加しました。ここが私のお気に入りの部分です。ログとデータセットに移動すると、実際にユーザーがアプリと行っているすべてのインタラクションをログに記録できるんです。
使用する必要があるのは、この1つの特定のAPIキーだけです。これにより、独自のデータセットを構築したり、フィードバックを提供したり、モデルがツールを適切に呼び出せているかどうかを確認したりすることもできます。ここでできることはたくさんあります。最初に試すのは、プレイグラウンドでモデルとチャットすることです。
プレイグラウンドでのモデル体験
ここをクリックすると、人々が試しているお気に入りのリストが表示されます。サイドには、さらに多くの詳細が表示されます。現在、Nano BananaとGemini 2.5 Proがあります。異なる機能に基づいて分類されているのも、かなり良いですね。Imagine Fourも試すことができます。
一部は有料です。つまり、アカウントを有効化する必要があり、一部は無料です。ここには表示されない特定のモデルグループが1つあります。それはGemmaモデルです。以前はここにあったのですが、GoogleはAI StudioからGemmaモデルを削除しました。ただし、GemmaモデルはAPIで利用可能で、オープンウェイトモデルなので、必要に応じてHugging Faceからダウンロードできます。
例えば、Nano Bananaモデルを使ってみます。現在それが選択されています。設定でアスペクト比も設定できます。9対16を選択しましょう。シンプルな画像を作成してみます。雪山でサングラスをかけたラマの画像を作成してください。
書き起こしには満足しています。これを送信すると、Nano Bananaモデルを使用して画像を作成します。そしてこちらが画像です。約6秒かかりました。これはかなり良いですね。これらのモデルと対話するための非常によくデザインされたプレイグラウンドです。
コードを生成したり、自分のコードで同じモデルを使用したい場合は、コードを取得をクリックするだけで、その画像を生成したり、ユーザーからの入力を受け入れるために使用したコードが表示されます。自分のアプリで使用できる、非常に良くフォーマットされたテキストを提供してくれます。これは素晴らしいです。比較モードもあるので、これをクリックすると、2つの異なるモデルを並べて実行できます。
例えば、Gemini 2.5 Proを選択して、それからGemini 2.5 Flashを選択します。そして両方のモデルに同じプロンプトを送信できます。例えば、ジョークを言ってくださいと言えます。これを送信しましょう。例えば、ジョークを言ってくださいのようなことが言えます。送信すると、FlashとGemini 2.5 Proを比較できます。
すでにここに応答がありました。Gemini 2.5 Proはまだ考えています。これは予想通りです。比較的遅いですが、はるかに正確なモデルです。これらは異なる数のトークンを生成していることがわかります。では、ビルドオプションを見てみましょう。なぜなら、ここがこの新バージョンのAI Studioが本当に輝く場所だからです。
ビルド機能で複雑なアプリを作成
使用したいモデルを選択できます。Gemini 2.5 Proの使用をお勧めします。これはおそらく、Geminiを搭載したアプリを構築するための最高のプラットフォームの1つです。含めることができる多くの異なる機能があるからです。表示されるこれらすべてのカードは、アプリに追加できる異なる機能です。例えば、I’m feeling luckyをクリックすると、これが表示されました。
リアルタイムのGoogleマップデータを使用して位置情報に関する質問に答える、インタラクティブなマップベースのチャットボットを構築します。それでは、これを構築してみましょう。これをクリックすると、左側にモデルが実行している内容が表示されます。右側には、ORIが生成されています。
これはスタックアプリを生成するプラットフォームです。実際にこれをデプロイして、実際のユーザーをオンボーディングできます。Gemini AI Studioがあなたのために作成するアプリの上に、ユーザー管理とログインを追加する方法もお見せします。もっと複雑なプロンプトを試してみます。ここでは、Storyscapeという名前のインタラクティブな子供向けストーリーアプリを作成するよう依頼しています。これはパーソナライズされたオーディオビジュアルストーリーを生成します。
ユーザーにテーマやプロンプトを入力させます。それからGeminiを使用して、始まり、中間、終わりのある年齢に適したストーリーを生成します。異なるシーンを作成し、Vueを使用してアニメーション化し、テキスト読み上げモデルを使用して追加します。つまり、多くの異なることを行う必要があります。ここがAI Studioのビルド機能が本当に輝く場所だと思います。
使用したいツールを選択できると思います。または、Gemini 2.5 Proに必要なツールを決定させることができます。現在、Reactアプリの作成と、フローがどのようになるかについて考えています。先ほど言ったように、ここは特にGeminiモデルを使用しようとしている場合、バイブコーディングアプリに最適な場所です。
他のプラットフォーム、LovableやBoltなど、どれでもこのような緊密な統合は見たことがありません。Gemini AI Studioのビルド機能のこの新バージョンで、本当に良い仕事をしています。さて、ここが作成したアプリです。フルスクリーンにしましょう。Storyscapeの魔法のオーディオビジュアルストーリージェネレーター。ストーリーを作成しましょう。ここでAPIキーを選択できます。
対象としたい異なる年齢グループも選択できます。APIキーを選択しましょう。請求アカウントを選択しました。ここに来ましょう。ストーリーのテーマがあります。絵本、ジャングルを歩く小さな緑の恐竜。これが書き起こしです。
これをクリックしましょう。これには時間がかかります。まずストーリースクリプトを作成し、それから画像を生成し、それらの画像を動画に変換し、それからナレーションも作成する必要があるからです。こちらが実際に準備ができた絵本の最初のバージョンです。これはGeminiアプリと非常に似ています。
ここでアニメーション化することができました。見てみましょう。何を作成したのか。ディンキーという名前の幸せな緑の恐竜が、豊かなジャングルを歩き、足を踏み鳴らしています。2つのシーンを作成したようです。シーン3で止まっているようですね。ただ時間がかかっているだけかもしれません。でも問題は、音が聞こえないことです。
Geminiにそれを修正してもらいましょう。エラーがあったと思うので、これを送信しましょう。でも全体的に、作成したデザインは本当に気に入っています。かなり良いです。こちらが2番目のバージョンです。小さな緑の恐竜ディンキーが、高い木々と明るい花でいっぱいの活気あるジャングルを探索しています。
ディンキーは太陽が沈むにつれて友達に手を振って別れを告げ、幸せで眠い気分になっています。これは正しいです。Nano Bananaを使用して、実際に自分の画像をアップロードすることができます。こちらは、以前作成した同じアプリの別のバージョンです。このアプリをデプロイできます。そのためには、Deploy appをクリックする必要があります。
ユーザー認証の実装
これはGoogle Cloud Runサービスを使用してアプリをデプロイします。でも、複数の異なるユーザーがいて、ユーザー認証が必要な場合、Clerkのようなサービスを使用して、アプリケーションの一部としてユーザー認証とユーザー管理を追加できます。彼らは今日のビデオの優しいスポンサーでもありますが、非常に強力なプラットフォームです。
ユーザー認証を備えたユーザー向けのものを構築している場合、チェックすることをお勧めします。月間アクティブユーザー10,000人まで無料で、Gmail、Facebook、GitHubなどを使用したログインをサポートしています。アプリに戻りましょう。Clerkのサポートを追加するようGeminiに依頼するとします。
Clerkを使用してユーザー認証とユーザー管理を有効にしたいです。どのような情報を提供する必要がありますか。書き起こしには満足しています。これを送信しますが、かなり良いものをお見せします。Clerkアカウントにサインインして、自分のプロジェクトを作成できます。
現在、いくつかの無料プロジェクトがあります。そのうちの1つを選択しましょう。必要なものはこちらです。新しいアプリケーションキーを作成する必要があります。公開可能なキーと秘密キーがあります。現時点では、公開可能なキーだけが必要です。Clerkに移動すると、異なるSDKを選択できます。
これはReactを使用して構築されています。それを選択すると、提供する必要があるすべての手順を実際に見ることができます。私たちの場合、プロンプトをコピーすることもできます。かなり良いですね。既存のアプリケーションにClerkを統合する方法について、コーディングエージェントに正確な指示を与えます。
公開可能なキーを提供するよう求められています。実際にコードに移動すると、ここにコードが表示されます。公開可能なキーを入れる場所を教えてもらい、それからユーザー認証部分を構築してもらいます。Clerkプラットフォームでは、APIキーはここにあります。これが含める必要がある公開可能なキーです。
APIキーを設定して、少しやり取りした後、こちらが新しく更新されたUIです。そして私が本当に気に入っているのは、Geminiがこの新しいログインスキームまたはログインページのテーマが、ウェブサイトの残りの部分のテーマとまったく同じであることを確認したことです。これを本番アプリケーションで使用する場合、ユーザーはGoogleでログインすることも、メールアカウントでサインアップすることもできます。
これが機能するかどうか見てみましょう。すべてがClerkによって支えられているので、これをクリックします。自分のメールアドレスの1つを選択します。それだけです。メインアプリに戻りました。これでアプリは本番環境に対応しています。何らかの支払いを設定したい場合は、それも実際に接続できます。
これはかなり良いです。これらの外部サービスを使えば、独自のユーザー認証とユーザー管理システムを設定することを心配する必要がありません。バックエンドでは、実際にログインしたユーザーがいることを確認できます。かなり良いですね。ユーザー向けアプリケーションを構築しようとしている場合は、Clerkをチェックすることを強くお勧めします。
まとめ
全体的に、この新しいビルド機能を備えたAI Studioは、バイブコーディングを始めるのに最適な場所です。Geminiモデルを使用している場合は特にそうです。カバーしていない他の機能もたくさんあるので、興味があれば、おそらくフォローアップビデオを作成します。とにかく、これがAI Studioで何が可能かの簡単な概要を提供できれば幸いです。
このビデオが役に立つと思ったら、チャンネルを購読してください。とにかく、このビデオが役に立てば幸いです。ご視聴ありがとうございました。いつものように、次回お会いしましょう。
コメント