Google AI StudioのBuild apps with Geminiでアプリを作ってローカルで動かしてみた。

※ 当サイトではアフィリエイト広告を利用しています。リンクは広告リンクも含みます。

2025.09.08
この記事は約15分で読めます。

この記事では、アプリを作成し、ダウンロードしてローカルで実行する方法をご紹介します。
無料のGoogleアカウントを使用しています。クレジットカード登録していません。
さらに、Google以外のサーバーで静的ファイルをアップロードする形で公開することを目的にします。
なので今回作るアプリは以下の機能は対象としていません。
・バックエンドを使用するアプリ。
・Googleの有料APIを使用するアプリ（APIキーが必要になるため）
Windows11を使用しています。
Node.jsがパソコンにインストールされている必要があります。

完成アプリでは、口を開いた画像と閉じた画像を用意し、音声をアップロードするとリップシンクします。デフォルトで画像と音声をアップロードしてあるので再生ボタンを押してみてください。
「素材準備」の章も参照してください。

完成したアプリ：https://yamaichige.shop/ai_lipsync_animater/

Google AI Studioについては、こちらを参照してください。

パソコン（Windows11）で英会話！Google AI Studio(Gmini2.0)がすごかったけど、やっぱり無料だと・・・
パソコンで、なかなかリアルタイムかつ無料でAIと英会話するいいものがなかったが、ようやく発見した。英会話の練習相手にいいです。Googleアカウントが必要です。（無料）しかしなんかすごいので無料だと制限があるのではと心配になります。制限につ...
kikuichigebkn1.website

材料の用意の仕方はこちらで紹介します。また、作ったリップシンク画像を録画してYoutubeで使う方法です。↓↓↓↓

こちらは別のアプローチでリップシンクを作りました。

無料AIいろいろ使って、簡易リップシンクアニメーションを作ってみた！
最近の無料AIツールが進化しすぎて、何か面白いことができそうだと思いませんか？ 今回は、複数のAIを組み合わせて、HTMLベースの簡易リップシンクアニメーションを作ってみました。 画像生成から音声処理、動作検証まで、すべて無料のツールで完結...
kikuichigebkn1.website

注意）有料会員やクレジットカード登録をしている方が同じことをやったとき料金が発生するかもしれないので、自己責任で実行してください。特にAPIキーについてはご注意ください。

広告

Google AI StudioのBuild apps with Geminiの使い方

Google AI Studioの左メニューのBuildをクリック
⚙詳細設定はデフォルトのまま、System instructions templateはReact（Typescript）になっています。
あとは、プロンプトで指示するだけです。

試したこと

Reactで完成するとむずかしくなりそうなので以下のプロンプトでお願いしました。
・html、Javascript、cssでアプリを作って。
・アップロードした画像のlipsyncのアプリを作りたい。

結果：
html、Javascript、cssの件は何もふれずReactで作られた。
画像、音声のアップロードのUIが作られ、実行すると画像の口の部分が単純な図形で動いてるだけだった。しかも位置も全然違う。

そこで新たに指示：
・lipsyncはnanobanana（gemini-2.5-flash-image-preview）で元の画像から口の形が違う画像を何枚か用意し、音に合わせて切り替えて話しているようにしてほしい。

結果：元の画像とnanobananaで作った4枚の口の形が違う画像を切り替えるだけだった。

最終的な指示：
AIが生成した最初の口パク画像が4枚1組になっているからこの現象が起きていると思います。元画像と同じサイズで、口だけ変化している画像を1枚作り切り替えればうまくいくと思います。

結果：リップシンクが正しく動作する形で完成しました。

ローカルで実行するためにアプリ内からAIを使わないようにした。

Google AI StudioのBuild apps with Geminiで公開しないで個人だけで使っている分には、APIキーは必要ない。
しかしローカルで動かす場合、nanobanana（gemini-2.5-flash-image-preview）をAPIで使用するためにAPIキーが必要になる。

ちなみに低級のモデルだったら無料で使えるGemini APIキー（gemini flash1.5）はある。
しかし、画像生成系、ましてやnanobananaのAPIが無料で使えるわけもない。
Gemini APIキー（gemini flash1.5）については以下参照。

Gemini CLIの実践的使い方！レシートをOCRして家計簿をつけるスクリプトをつくる
実践的なGemini CLIの使い方をご紹介します。ポイントは、「一気にAIにお願いする」のではなく、「部分的に完成させながら進める」アプローチです。その際、AIとプログラミング（スクリプト）の役割分担を明確にすることが重要です。AIの特長...
kikuichige.com
2025.07.07

ということでnanobanana部分は、手動で操作して口の閉じた画像を用意することにして全面的にアプリを変えるように指示した。

プロンプト：
画像生成している部分は、手動で画像生成を依頼して完成した画像をアップロードする形にしてください。
その際、依頼するプロンプトは何と書けばいいでしょう。

結果：
はい、承知いたしました。
アプリケーションのAIによる画像生成機能を、ユーザーが手動で作成した画像をアップロードする形に変更します。それに伴い、UIもより分かりやすく更新しました。
画像生成AIにどのような指示（プロンプト）を出せば良いかについては、以下の通りです。現在広く使われている画像生成AI（Midjourney, Stable Diffusion, DALL-E 3など）で良い結果を得るための一般的なプロンプト例です。（次項）

素材準備

こちらのYoutubehttps://www.youtube.com/watch?v=EBQJKs2-VaEで実際にやっている様子が見れます。

  • 口を閉じた元画像は同じGoogle AI Studioのimagen4で作成できます。Aspect ratioは1:1。
  • 画像加工はnanobananaを使います。（nanobananaはアップロードした画像を指示に従って加工してくれます。アップロードするときサイズを半分にしたほうがいいかもしれません。）
    画像生成AIへのプロンプト例：
    元の画像をベースに、口の形だけを母音の「あー(Aahh)」を発声しているように自然に大きく開けてください。背景、髪型、目、服装など、口以外のすべての要素は元の画像と完全に同一に保ってください。
  • さらに、音声は同じくGoogle AI StudioのGemini speech generationでテキストを音声に変換できます。
AIと人力の融合！Gemini原稿をMarpでスライドに仕上げる方法
最近話題の「WebのGemini」を使って、スライドやインフォグラフィックを簡単に作れるようになりました。プロンプトを打つだけで、見栄えの良い資料がほぼ自動で生成されるのは驚きです。しかし、意図通りの内容に仕上げるには、細かな修正が必要にな...
kikuichige.com
2025.07.17

ローカルで実行

完成したアプリをzipファイルでダウンロードします。
プロジェクトフォルダを作成し、その中に解凍します

mkdir my-lip-sync-app
cd my-lip-sync-app

Windows11の場合ファイルを右クリック→「すべてを展開」で展開先をmy-lip-sync-appにして展開します。
Node.jsがインストールされていること。（npxコマンドを使用するために必要です）

npm install
で依存関係をインストール
node_modulesフォルダとpackage-lock.jsonが作成されている。
🧩 npm installとは？
npm install は アプリを動かすために必要な追加の部品（ライブラリ）をまとめてインストールするコマンドです。package.json に記載されたライブラリ（例：React, Expressなど）を node_modules フォルダに展開します。

npm run dev
でhttp://localhost:5173にアクセスするとアプリが動きます。

サーバーにアップロード

サーバーにアップロードするためにビルドが必要です。（ビルドとは、ソースコードを実行可能な形に変換する作業のことです。）

後で実行するnpm run build（ビルド）を行うと
distディレクトリの下にファイルが完成します。
出来上がったファイルとディレクトリをアップロードします。
その際、サーバーにディレクトリ（例：ai_lipsync_animater）を作って、
そこにdistディレクトリの中身をアップロードする場合。
以下のようにbaseのURLを設定しておかないとindex.htmlにはai_lipsync_animaterが存在していることを知らないコードが書かれているため、ルート直下のディレクトリやファイルにアクセスするようになってしまいます。
例：
　ｈttps://yamaichige.shop/ai_lipsync_animater/ここの下にあるディレクトリやファイルにアクセスしてほしいのに
　ｈttps://yamaichige.shop/の下にアクセスしてしまいます。
（最初にアクセスされるindex.htmlは大丈夫だが、index.htmlに書かれてある内容の場所にアクセスしに行くときに問題が起こります。）

対策：例：ai_lipsync_animaterの場合。
1. Vite設定の更新
vite.config.tsにbase: '/ai_lipsync_animater/'を追加
import path from 'path';
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, '.', '');
    return {
      base: '/ai_lipsync_animater/',
　　　以下省略
これにより、すべてのアセットが/ai_lipsync_animater/をベースパスとして使用

2. ファイルパスの更新
App.tsx内のfetchパスを絶対パスから相対パスに変更
例：/setumei/から./setumei/に変更
      const [neutralResponse, openMouthResponse, audioResponse] = await Promise.all([
        fetch('./setumei/maiko1to1.jpg'),
        fetch('./setumei/maiko1to1open.jpeg'),
        fetch('./setumei/setumei.mp3')
      ]);
相対パスを使用することで、ベースパス設定と連動

ビルド
npm run build
その結果distディレクトリにアップロードに必要なディレクトリとファイルが作成されます。
dist/フォルダ全体をWebサーバーにアップロード
（distの下にあるものをアップロード）

アップロード先は、以下のような静的ファイルがアップロードできるサーバー。

無料サーバーXREA（エクスリア）を使ってみた！GeminiのCanvasで作ったHTML（Tailwind CSS）をアップロードしてみた。
「無料でホームページやブログを始めたいけど、どのサーバーを選べばいいかわからない…」そんな悩みを抱えているあなたにおすすめなのが、無料サーバー「XREA （エクスリア）」です。XREA は、無料で利用できます。XREAにHTMLファイルのア...
kikuichige.com
2025.03.28

Youtubeでリップシンク画像を利用しました

アプリで作ったものを録画しYoutubeで使いました。

使用するツールと手順
Google AI Studio
1. imagen – 元画像作成
2. nanobanana – 元画像の口だけ修正した画像作成
3. text to generate – テキストから音声を作成
4.自作アプリ – 上記3つを合成
5.Xbox Game Bar – 録画
6.Clipchamp – 動画作成+背景透明化

imagenでできた画像は1024×1024なので、ペイントで半分の512×512にしたほうがいいかもしれません。私は、そうしてます。

SNSで必要な画像サイズに無料で変更する方法（Windows 11 標準ソフトだけ）
SNSに画像を投稿するとき、「端が切れた」「画像が伸びた」といったトラブルはよくあります。原因は、SNSごとに推奨される画像サイズと縦横比が違うからです。この記事では、Windows 11 標準ソフトの ペイント と フォト だけを使って、...
kikuichige.com
2020.11.20

APIキー部分を調査

ローカルの場合

ローカルにダウンロードしたファイルを見ると

services\geminiService.tsにconst API_KEY = process.env.API_KEY;がある。

process.env.API_KEYはvite.config.tsに以下の記述がある。
import { defineConfig, loadEnv } from 'vite';←.envや.env.localを読み込む役目
略
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)

.env.local
GEMINI_API_KEY=PLACEHOLDER_API_KEY
APIキーを使う場合PLACEHOLDER_API_KEYにAPIキーと置き換える必要がある。
今回の私のアプリはAPIキーを使わないので、このままでもエラーにらない。

APIキーを使ってGemini APIを呼び出している部分

以下の部分でAPIキーを使ってnanobanana（gemini-2.5-flash-image-preview）を呼び出している部分
services\geminiService.ts
import { GoogleGenAI, Modality } from "@google/genai";

const API_KEY = process.env.API_KEY;
略
const response = await ai.models.generateContent({
      model: 'gemini-2.5-flash-image-preview',

今回の私のアプリではgeminiService.tsをどこからもimportしていないので使っていない。
なぜ存在しているかというと、Build apps with Geminiで作っているとき最初は使っていたから、それが削除されずそのまま残っています。

Build apps with Geminiで使っているときのAPIキー

Build apps with GeminiはAPIキーはどうなっているのか？
ダウンロードしたときみたいにcodeタブを開いても.envはない。
右上のswitch to API keyをクリックしてみると

Choose Google Cloud project
You don’t have any Google Cloud projects with a paid quota tier. If you want to use the paid tier, create an API key.
You do not need to set an API key to use the free tier.
（訳）Google Cloud プロジェクトを選択してください あなたの Google Cloud プロジェクトには、有料のクォータ階層に属するものがありません。 有料プランを利用したい場合は、API キーを作成してください。 無料プランを利用する場合は、API キーの設定は不要です。

Build apps with Geminiで動かす分にはAPI キーの設定しなくても使えるということで、デプロイする場合は有料APIキーが必要になるということだと思います。
クレジットカード未登録の私でも、以下で利用したものはAPIキー（Gemini 1.5 Flashの無料枠）は作れた。しかし今回は、このAPIキーはモデルが違うので使えない。 Gemini API 料金体系 、レート制限

ローカルで無料高精度OCRするならGemini API × Pythonスクリプトがおすすめ！他の手段との比較
画像から文字を抽出するOCR（光学文字認識）は、最近ではさまざまな方法が選べるようになりました。Webブラウザ上でチャットAIに画像を送信して文字起こしする方法Windowsに標準搭載されたOCR機能（Snipping Tool）ローカルP...
kikuichige.com
2025.07.06

Build apps with Geminiでシェアしみた

新たなアプリ「AIキャラクター相談室」

上の記事で紹介しているものと違いますが、手動をやめてAPI使ったバージョンを作りました。
アプリの内容は
・キャラクターを指示して作成。-imagen（’imagen-4.0-generate-001’）使用
・口だけ加工した画像を作成-nanobanana（’gemini-2.5-flash-image-preview’）使用
・相談に回答する-‘gemini-2.5-flash’使用
・読み上げ-ブラウザに標準で搭載されているWeb Speech API

読み上げはGeminiのtext to speechにしてくれとお願いしましたが、できないと断られました。なので、読み上げの声質はよくありません。

シェア

デプロイは有料APIキーが必要そうだが、もう一つ公開するのに「share app（シェア）」というのがある。公開というか開発している画面が、そのままシェアされます。

share appをクリックすると以下が出る。

When you share an app with another user, they will be able to see all of its source code. Ensure that your code does not contain any sensitive information, such as API keys.
（訳）アプリを他のユーザーと共有すると、そのユーザーはアプリのソースコード全体を見ることができます。 コードに API キーなどの機密情報が含まれていないことを必ず確認してください。

また、Advanced share permissionsをクリックすると「一般的なアクセス」に「制限付き」と「リンクを知っている全員」があり、後者を選ぶと、さらに「閲覧者」「閲覧者（コメント可）」「編集者が選べる」ということでデフォルトのままシェアしてみました。

Sign in - Google Accounts
ai.studio

「リンクを知っている全員」とはいえGoogle AI Studio上で動いているので、Googleアカウントが必要になります。ちょっと気になるのは、クレジットカード登録してる人がシェアされたアプリを使うとき、APIキーがセットされないかは気になります。一応、気にしておいてください。
FAQに以下があります。（解釈が難しい）

Is my API key exposed when sharing apps?
Don’t use a real API key in your app. Use a placeholder value instead. process.env.GEMINI_API_KEY is set to a placeholder value that you can use. When another user uses your app, AI Studio proxies the calls to the Gemini API, replacing the placeholder value with the user’s (not your) API key. Do not use a real API key in your app, as the code is visible to anyone who can view your app.
（訳）実際の API キーをアプリに使用しないでください。代わりにプレースホルダー（仮の値）を使ってください。 process.env.GEMINI_API_KEY には、使用可能なプレースホルダー値が設定されています。 他のユーザーがあなたのアプリを使用すると、AI Studio が Gemini API への呼び出しをプロキシし、プレースホルダー値をそのユーザー自身の API キー（あなたのものではなく）に置き換えます。 アプリのコードは他のユーザーからも閲覧可能なため、実際の API キーをコードに含めないようにしてください。

所感

Google AI StudioのBuild apps with Geminiは無料で使えていいが、アプリを公開しようとすると無料では厳しくなる。
高機能のアプリが簡単に作れるが、デプロイして、どのくらいお金が、かかるのかは調べたほうがいいと思った。特に、APIキーが、どう利用されているか把握しないと思ったよりかかるかも。
Reactは初めてさわったが、Reactで何か作りたくなったら、ここを利用するのも便利だと思った。

この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。

タイトルとURLをコピーしました