Google AI Studioで画像・動画を反映するまでの流れと対処法を整理してみた」

はじめに

Google AI StudioでPoCを作成していた際、
画像や動画を画面に反映したい場面がありました。

最初はチャットで、

• 反映したい場所
• 使用したい画像や動画

を指示していましたが、コードには反映されても、実際の画面には画像が表示されませんでした。

調べてみると、Google AI Studioでは、Explorerへのアップロードが必要でした。

今回は、

• Google AI Studioで画像や動画を反映する方法
• 実際にハマったポイント
• 動画アップロード時の注意点

について紹介します。

最初に試したこと

画像を埋め込みたいと思った際、最初に行ったのは以下のような方法でした。

• 画像を埋め込みたい場所をプロンプトに入力
• 埋め込みたい画像を添付
• ファイル名をコードへ反映

しかし、よく確認してみると、

• コード上では画像ファイル名が反映されている
• 実際の画面には画像が表示されていない

という状態でした。

つまり、

• コードだけ変更されていた
• 実際の画像ファイルはプロジェクト内に存在していなかった

ため、画面に画像が表示されていませんでした。

そこで、他に方法がないか調べてみました。

調べてわかったこと

調べてみると、Google AI Studioでは、
コードを書き換えるだけではなく、実際に使用する画像や動画をExplorerへアップロードする必要がありました。

手順としては、以下の流れです。

1. Explorerへファイルをアップロード
2. 保存
3. コード内でファイル名を参照

つまり、

「コードを書き換える」だけではなく
「実際のファイルをプロジェクト内に配置する」

必要があったということです。

実際に試してみた

実際にExplorerへ画像をアップロードし、コードにも反映させてみました。

すると、無事に画像が表示されるようになりました。

アップロードできた形式としては、

• 画像
• 動画
• PDF

などがありました。

また、zipファイル形式でもアップロード自体は可能でした。

そのため、複数ファイルをまとめて管理したい場合には便利でした。

動画がアップロードできなかった

しかし、動画をアップロードしようとした際、うまく保存されませんでした。

最初は原因が分からなかったのですが、調べてみると、Google AI Studio側の保存容量が影響している可能性がありました。

Google AI Studioへ確認した際の回答は以下のとおりです。

# 開発環境のエディタへのアップロード（左側のファイル一覧への追加）

プロジェクトのソースコード（public フォルダなど）に直接画像や動画を追加する場合、以下の制限が目安となります。

１ファイルあたりの制限：約 25MB 〜 50MB 程度。これを超える大容量の動画ファイルなどは、アップロード中に失敗したり、エディタが不安定になることがあります。

プロジェクト全体の合計容量：約 500MB 程度が上限の目安です。

もし、高画質の長い動画ファイルを多数追加しようとしている場合は、この制限に達している可能性があります。

※上記はGoogle AI Studio上で確認した際の回答であり、環境や仕様変更によって変わる可能性があります。

つまり、動画ファイルの容量が大きすぎたため、アップロードに失敗していた可能性がありました。

動画をアップロードする方法

では、どのように動画をアップロードすれば良いのでしょうか。

実際に試した方法としては、動画を圧縮することで容量を小さくする方法でした。

また、zip形式でまとめてアップロードすることも可能でした。

容量を小さくした結果、無事にアップロードでき、画面にも表示されるようになりました。

無料の動画圧縮サイトなどを利用する方法もありますが、その場合は、

• 個人情報
• 機密情報

などが含まれていないか注意しましょう。

画像や動画を入れ替えたい場合は？

すでにExplorerへ保存済みの場合

すでにExplorerへ保存済みの場合は、チャットで指示することで変更が可能でした。

実際には、以下の情報を伝えることで変更できました。

• 入れ替えたいファイル名
• どの画面・場所で使用しているか
• 関連コードが記載されているファイル名

上記をプロンプトとして渡すことで、AIがコードを探し、ファイル名を変更してくれました。

変更後に確認したところ、実際の画面にも反映されていました。

Explorerへ保存されていない場合

Explorerへ保存されていない画像や動画へ変更したい場合は、先にExplorerへアップロードする必要がありました。

流れとしては、

1. Explorerへファイルをアップロード
2. 保存
3. チャットで差し替え指示

という形でした。

最後に

今回は、Google AI StudioでPoC作成時に画像や動画を反映する方法について紹介しました。

チャットだけで全て解決しようとしても、うまくいかない場面は多々あります。

そんなときは、

• ファイルの配置や保存場所
• 容量制限

などを確認すると、解決につながることもあります。

同じように困っている方の参考になれば嬉しいです。

ここまで読んでいただき、ありがとうございました！