この記事では、アプリを作成し、ダウンロードしてローカルで実行する方法をご紹介します。
無料のGoogleアカウントを使用しています。クレジットカード登録していません。無料トライアルも使ってません。
さらに、Google以外のサーバーで静的ファイルをアップロードする形で公開することを目的にします。
なので今回作るアプリは以下の機能は対象としていません。
・バックエンドを使用するアプリ。
・Googleの有料APIを使用するアプリ（APIキーが必要になるため）
Windows11を使用しています。
Node.jsがパソコンにインストールされている必要があります。
完成アプリでは、口を開いた画像と閉じた画像を用意し、音声をアップロードするとリップシンクします。デフォルトで画像と音声をアップロードしてあるので再生ボタンを押してみてください。
「素材準備」の章も参照してください。
完成したアプリ：
https://yamaichige.shop/ai_lipsync_animater2/
おまけのアプリ：
https://yamaichige.shop/compare_picture/
2枚の画像のちょっとした画像の位置ずれを2枚目の画像を半透明にして重ねて手動で修正できるアプリ（nanobananaで一部修正した画像は元画像と位置が微妙にずれていることがあるので作りました。）
https://yamaichige.shop/text_overlay/
画像に文字を入れられます。
Google AI Studioについては、こちらを参照してください。
材料の用意の仕方はこちらで紹介します。また、作ったリップシンク画像を録画してYoutubeで使う方法です。↓↓↓↓
こちらは別のアプローチでリップシンクを作りました。
バックエンドを使ったアプリも作りました。（無料枠のGemini API（テキストの入出力のみ可能）をバックエンド（Django）で使って結果をフロントに送ることでフロントでAPIキーを使わないで済む。）
こちらは同じくバックエンドDjangoでYoutubeの無料APIキーを使ったアプリ。
https://django6.kikuichige.com/games/youtubesearch/dist/index.html
こちらは同じくバックエンドDjangoでYoutubeとGeminiの無料APIキーを使ったアプリ。
https://django6.kikuichige.com/games/youtubecomment/dist/index.html
注意）有料会員やクレジットカード登録をしている方が同じことをやったとき料金が発生するかもしれないので、自己責任で実行してください。特にAPIキーについてはご注意ください。
こちらにも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で作られた。←設定にSystem instructions templateというのがあって、そこで何を使うか（ReactかAngular）決まってた。
画像、音声のアップロードの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→2025/10/3現在はgemini-2.0-flash-liteの無料枠）については以下参照。
ということで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へのプロンプト例：
元の画像をベースに、口の形だけを母音の「あ」を発声しているように自然に開けてください。背景、髪型、目、服装など、口以外のすべての要素は元の画像と完全に同一に保ってください。 - さらに、音声は同じくGoogle AI StudioのGemini speech generationでテキストを音声に変換できます。
気が付いたこと
使い方で気づいたことを書いておきます。
・checkpointというのがあり、コードを戻せる。Restore checkpointで、その時点のコードに戻せる。View diffは変更履歴。しかし、他のAIツールの印象から後戻りするとうまく動作しなくなることが多いので使っていない。
・なので、気楽に指示しないように慎重に吟味して指示しています。逆に言うと、いつぐちゃぐちゃになるか、びくびくしながら指示してます。
・どういうタイミングでsaveされるか分からないが、右上にunsavedと出ていたらsave appを押すようにしている。
・文字を画像に重ねるアプリを作るときは、テキストのサイズをpx単位ではなく画面サイズに対する比率にしないと画面サイズを変えたとき、およびダウンロードしたとき見た目と違ってくる。
ローカルで実行
完成したアプリをzipファイルでダウンロードします。
プロジェクトフォルダを作成し、その中に解凍します
mkdir my-lip-sync-app
cd my-lip-sync-appWindows11の場合ファイルを右クリック→「すべてを展開」で展開先をmy-lip-sync-appにして展開します。
Node.jsがインストールされていること。（npxコマンドを使用するために必要です）
後はReadme.mdに書いてある手順をやるだけです。
npm install
で依存関係をインストール
node_modulesフォルダとpackage-lock.jsonが作成されている。
npm run dev
でhttp://localhost:5173にアクセスするとアプリが動きます。Reactの開発環境を構築するのにNode.jsさえパソコンに入っていればnpm installだけでいいのはなぜ？
Reactを勉強しようと思って少し調べると結構環境構築が大変そう。
しかし、Google AI StudioのBuild apps with Geminiで作ってダウンロードしてくると
package.jsonなど環境構築に必要なファイルが用意されています。package.jsonの役割:
npm installというコマンドを実行すると、npmがプロジェクト内の「部品リスト」(package.json)を読み取ります。そして、リストに書かれているすべての部品を、インターネット上の巨大な倉庫（npmレジストリ）から自動的にダウンロードし、プロジェクト内のnode_modulesというフォルダに設置してくれるのです。つまり、「Node.jsさえ入れておけば、npm installの一言で、プロジェクトに必要な部品がすべて自動で揃う」という仕組みになっているためです。
なので、プロジェクトを動かすために必要な部品としてViteとTypeScriptがリストアップされているため、npm installを実行した際にそれらも一緒にインストールされています。
サーバーにアップロード
サーバーにアップロードするためにビルドが必要です。（ビルドとは、ソースコードを実行可能な形に変換する作業のことです。）
APIを使わないようにしたので今回アプリは、関係ありませんが、以下のリスクがAPIキーが入ったアプリは以下のリスカがあります。
セキュリティリスク
Cursorで聞いた。「このアプリをビルドしてサーバーにアップロードした場合。APIキーはアプリの利用者にはみられないか？」
- APIキーが完全に可視化される: ビルド後のJavaScriptファイルをブラウザで確認すれば、誰でもAPIキーを見ることができます
- 悪用の可能性: 他人があなたのAPIキーを使用してGemini APIを呼び出し、あなたのクォータを消費する可能性があります
- コストの発生: 悪用により予期しない料金が発生する可能性があります
- （私が思うリスク）AIがコスト面を気にしないでコードを書いてくるので、注意しないと無駄に消費する可能性がある。ひたすらAPIキーを使ったリクエストを使うコードを書くかもしれない。
APIを使うアプリを実際にビルドして確認すると以下のファイルに書かれます。
dist\assets\***.js
const ug=new PR({apiKey:"*************************"}),
このファイルをサーバーにアップロードして運用した場合。
このデータは、閲覧するユーザーのブラウザに送られるので見ようと思えば中身は見られると思います。解決策
この問題を解決するには、以下のアーキテクチャに変更する必要があります：
- バックエンドAPIの作成: Node.js/ExpressなどのサーバーサイドAPIを作成
- APIキーをサーバーサイドに移動: クライアントからは直接Gemini APIを呼び出さず、バックエンド経由で呼び出す
- 環境変数の適切な管理: サーバーサイドでのみAPIキーを使用
バックエンドにAPI部分を移植
この場合、Google AI StudioのBuild apps with Geminiで作ってダウンロードしたReactのアプリは、そのまま使えません。UI部分は使えますが、APIキーを使ったGeminiとの送受信部分は、バックエンドで処理します。
なので、Reactは、フォームに入力された情報をバックエンドに送信し、バックエンドがAPIキーを使ってGeminiと送受信を行い、その結果をReactに送り表示するような形に変更が必要になります。この形で、バックエンドにDjangoを使ってアプリを作成ました。
使っているサーバーは、このWordpressブログと共通で使用しいるVPSです。
2024/4お名前.comのレンタルサーバーからVPSへ移行したときの記録になります。
この場合のバックエンドのコードはBuild apps with Geminiでは作れませんのでCursorなどを使います。Cursorは無料枠がすぐなくなるので私は主にGemini CLIを使っています。
ビルド
後で実行するnpm run build（ビルド）を行うと
distディレクトリの下にファイルが完成します。
出来上がったファイルとディレクトリをアップロードします。
その際、サーバーにディレクトリ（例：ai_lipsync_animater2）を作って、
そこにdistディレクトリの中身をアップロードする場合。
以下のようにbaseのURLを設定しておかないとindex.htmlにはai_lipsync_animater2が存在していることを知らないコードが書かれているため、ルート直下のディレクトリやファイルにアクセスするようになってしまいます。
例：
ｈttps://yamaichige.shop/ai_lipsync_animater2/ここの下にあるディレクトリやファイルにアクセスしてほしいのに
ｈttps://yamaichige.shop/の下にアクセスしてしまいます。
（最初にアクセスされるindex.htmlは大丈夫だが、index.htmlに書かれてある内容の場所にアクセスしに行くときに問題が起こります。）
対策：例：ai_lipsync_animater2の場合。
1. Vite設定の更新
vite.config.tsにbase: '/ai_lipsync_animater2/'を追加
import path from 'path';
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, '.', '');
return {
base: '/ai_lipsync_animater2/',
以下省略
これにより、すべてのアセットが/ai_lipsync_animater2/をベースパスとして使用
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の下にあるものをアップロード）アップロード先は、以下のような静的ファイルがアップロードできるサーバー。
この記事を書いたイチゲを応援する（質問でもokです）
tailwindcssの件
開発者ツールのコンソールで以下のワーニングが出てる。
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation
今回は、そのまま使用した。いつか使えなくなってエラーになるかもしれない。
この件は、こちらを参考にしてください。
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にしたほうがいいかもしれません。私は、そうしてます。
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→現在はgemini-2.0-flash-liteの無料枠）は作れた。しかし今回は、このAPIキーはモデルが違うので使えない。 Gemini API 料金体系 、レート制限
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をクリックすると「一般的なアクセス」に「制限付き」と「リンクを知っている全員」があり、後者を選ぶと、さらに「閲覧者」「閲覧者（コメント可）」「編集者が選べる」ということでデフォルトのままシェアしてみました。
→ https://ai.studio/apps/drive/1QMZuPtFDM1rK0gSLuIHJZMaTy_qlUPrC
「リンクを知っている全員」とはいえ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 キーをコードに含めないようにしてください。
マルウェアShai-Huludについて
🪱 Shai-Huludとは、2025年9月に発生したnpm史上最大級のサプライチェーン攻撃に使われた自己増殖型マルウェアの名前です。JavaScript開発者にとって非常に深刻な脅威となりました。
名前の由来
- 「Shai-Hulud」はSF小説『デューン』に登場する巨大な砂漠のワームの名前。
- 攻撃者はこの名前をGitHubリポジトリに使い、マルウェアの自己増殖性を象徴するものとして命名しました。
攻撃の概要
- 攻撃者は複数のnpm管理者アカウントを乗っ取り、187以上の人気パッケージにマルウェアを仕込みました。
- 感染したパッケージは、
npm installやupdate時に発動するライフサイクルフックを利用して、開発環境から認証情報を盗み出します。 - 盗んだ情報を使って次のパッケージに感染を拡大するという、ワーム型の自己増殖を行いました。
被害の特徴
- 改ざんされたパッケージには、
@ctrl/tinycolorやngx-toastrなど広く使われているものが含まれていました。 - 攻撃はわずか数日で数千のプロジェクトに波及する可能性があるとされ、npmエコシステム全体に衝撃を与えました。
推奨される対策
- 依存パッケージのバージョン固定（pinning）
- CI/CDの認証情報のローテーション
- プライベートnpmレジストリの利用
- マルウェア検査ツール（例：Aikido Safe Chain）の導入
この事件は、オープンソース開発における信頼とセキュリティの脆弱性を改めて浮き彫りにしました。もしnpmを使っているなら、依存関係の監査とセキュリティ対策は今すぐ見直す価値があります。
safe-chainインストール失敗したのでPythonでチェックした
現状、できることだけしました。結果、2025/9/21時点では、私が9月中にnpm installしたものには感染モジュールはインストールされていないようでした。以下にまとめています。↓↓↓↓
所感
Google AI Studioの「Build apps with Gemini」は、無料で利用できる点が非常に魅力的です。ただし、アプリを公開・デプロイしようとすると、無料枠では制限が多く、現実的には有料APIキーが必要になる場面が出てきます。特にAPIキーの扱いについては、料金発生のリスクやセキュリティ面での注意が必要だと感じました。
Reactは今回初めて触れましたが、Vue.jsの経験があったため、似たような感覚で扱えました。ReactやVite、TypeScriptといった技術は名前だけ知っている程度でしたが、AIの支援があれば、知識が浅くてもある程度の開発が可能だと実感しました。
とはいえ、セキュリティやコストに関する判断はAI任せにせず、自分で調査・理解することが重要です。知らずに使っていると、思わぬトラブルに繋がる可能性があるため、やはり基本的な知識の習得は不可欠だと痛感しました。
画像編集系のアプリは比較的作りやすく、Reactとの相性も良いと感じました。
また、Reactで作った後にAPIキーを使う処理をバックエンドに持っていく手法は結構、効率がいい気がしています。
ReactとTypescriptのYoutubeを少し見させてもらったけど、難しいので、1から勉強せず、AI任せでつくっているうちに疑問が出てきたら、都度、都度、調べていけばいいかなという感じがしています。
Shai-Huludについては気にしておこうと思います。
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
MENTAやってます（ichige）
