【非エンジニアが挑む】Dockerで動かすVOICEVOXと、Geminiを繋げてみた

「Docker × VOICEVOX × Gemini」のテキストとコンテナを載せたクジラやPCを操作する人物

前回は、既存システムから今回のテーマに沿わない機能を削ぎ落としていく記事を投稿しました。

前回の記事はこちらから

ここからは、いよいよ整備された土台の上に

今回のテーマである「入力→AI→音声」という本来の企画に着手していきます。

大まかには、

  • コンテナサービス「Docker」の導入
  • VOICEVOXをローカルで動かすこと
  • そして【頭脳】であるGeminiを繋げること
Tomoya

この3つの有名なサービスを組み込んでいきます。

ここも引き続き、Cursorを使ったAI駆動での改良です。


目次

Dockerとの初対面

名前は知っていた。でも「使いどころ」が分からなかった

Tomoya

Docker?名前は聞いたことあるけど、いつ使うの?

Before:

Docker。名前だけは知っていました。

でも、「どういう時に使うのか」が最後まで分からない。学習を進めても、そこだけが空白のまま残っていました。開発を進める中でも使わなくても進めれることがさらに遠ざけるきっかけにもなっていました。

After:まだわからない…

プログラミングを学び始めると、Dockerという名前は何度も目に入ります。

ただ、目に入るだけ。自分が使う場面が想像できないので、そのたびに読み飛ばしていました。

本や教材を見ても「Docker!!」と言ってはいるものの、その必要性が学習してもわかりませんでした。

Tomoya

「Docker」というのはローカルで自分のPCだけで使う時に有効的な機能だと、今では感じています。

自分と同じように、Dockerについて名前は聞いたことがあるけれど、どこで使うのかさっぱりわからない、という人も多いのではないかと思います。

今回の記事を読んでもらえれば、VPSを活用する上でDockerのコンテナ技術がいかに欠かせない存在になるか、伝わるのではないかと思います。

そして今回、VPSでの活用にDockerが活きてくると知った時、自分の中でようやく理解がつながった感覚がありました。まさに「VPSと結びついた瞬間、点と点がつながった」瞬間でした。

実は、自分自身のプロダクト(ScriptSpeak)の中にも、Dockerと同じような役割を果たすコンテナ技術を使っていたのですが、それが今回のDockerの話とうまく繋がっていませんでした。

Tomoya

これがDockerと同じような役割を果たすコンテナ技術を使っているサービスです!

※自分が運営しているサービスです


Docker Desktopで可視化する

Dockerは、ローカルでもVPSでも無料で活用でき、「Docker Desktop」というツールを使えば、UIのある可視化された状態で確認・操作できます。

✅ Dockerのうれしいポイント

  • ローカルでもVPSでも 無料 で使える
  • Docker Desktop を入れれば GUI(画面)で操作 できる
  • コンテナの状態が 一覧で可視化 される

新しくDockerを覚える事への不安

1からDockerコマンドを覚えるのか?

結論から言うと、覚えていません

Dockerのコマンドは、AIに聞きながら実行していきました。ただ、コピペで済ませるのではなく、「これは何をしているのか」を必ず一度聞いてから叩くようにしました。

自分の理解と疑問をそのままぶつけて、答えをもらう。

その一往復があるだけで、同じコマンドでも「実行した」から「実行できた」に変わります。

丸暗記はしない。でも、意味の分からないコマンドは打たない。この線引きができたことが、今回の一番の収穫でした。

それによって、自分なりに納得した状態でコマンドを実行できるようになったのは、1つの成長ポイントだったと思います。

Dockerって結局何?

アプリを動かすのに必要なもの一式を、箱(コンテナ)に詰めて持ち運べるようにする仕組みです。

箱に詰めると何がうれしいの?

自分のPCで動いた箱を、そのままVPSに置けば同じように動く。「自分の環境では動いたのに…」がなくなります。

インストールとどう違うの?

直接インストールすると、サーバーの中が他のアプリと混ざってぐちゃぐちゃに。Dockerなら箱ごとに独立しているので、消したい時は箱を捨てるだけです。

非エンジニアでも触れる?

Docker Desktop を使えば、画面上のボタンで起動・停止ができます。コマンドは、分からなければAIに聞けば大丈夫。

このセクションのまとめ
  • Dockerは「アプリ一式を箱に詰めて持ち運ぶ」技術
  • ローカルとVPSで同じ環境を再現できるのが最大の強み
  • Docker Desktop で視覚的に操作できるので、初心者でも入りやすい
音声エディタ画面でメッセージ欄にテキストが入力され声の種類に「ぞん子 (ノーマル)」が選択されたUI
音声エディタ画面で入力テキストに対しVOICEVOXの「ぞん子 (ノーマル)」を選択して送信準備をしている状態です。

VOICEVOXをローカルで動かす

これまでGCPのCloud Run上で動いていたVOICEVOXを、今度はDockerを使ってローカルでも動かせるか、試していきます。

GCP : Cloud RunLocal : Docker

ブラウザで/docsを開き、実際に動いていることを確認できれば成功です。

VOICEVOX EngineのAPIドキュメントにおける/audio_query等のエンドポイント一覧画面
VOICEVOX EngineのWeb APIドキュメント上で、音声合成用のクエリ作成や編集エンドポイントを確認している画面です。

ここに関しては、意外にもすんなりと起動を確認できたことに、少し驚きがありました。これでDockerが正しく起動していること、そしてVOICEVOXとの連携が取れていることが確認でき、一安心です。


キャラクターの実在確認という地味な作業

絞り込んだ2名のキャラクターが、実際に存在し、正しく繋がるかを確認していきました。

最初は、scriptspeak.netに元から入っていた一般的な既定のキャラクター一覧(ずんだもん・四国めたんなど)のままで、今回選んだ2名(雀松朱司・春歌ナナ)がまだ反映されていない状態だったので、少しびっくりしました。

VOICEVOXのキャラクターは、主にID(番号)で管理されています。このIDを、前のアプリの設定から切り替える作業をCursorに依頼し、書き換えてもらった上でブラウザで確認していきました。

音声エディタ画面で「声の種類 (VOICEVOX)」の選択項目として「雀松朱司」が緑色の枠線で強調されたUI
VOICEVOXの声の種類選択欄で「雀松朱司」が選ばれている部分を緑枠で強調した音声エディタ画面です。
Tomoya

無事に2名の存在を確認でき、実際に名前が表示された時は、ほっとしました。


Geminiと繋げる:声を出す部分から、頭脳を組み込むところまで

企画の出発点は、「音声メッセージを送ると、Geminiが考えて、VOICEVOXの声で返事をしてくれる」という、会話・応答のシステムでした。

ここまでできあがっていたのは、あくまでその【声を出す部分】(VOICEVOX)だけで、【考える部分】(Gemini)はまだどこにも組み込まれていません。

現状:

【声を出す部分】(VOICEVOX)を搭載完了

未実装:

【考える部分】(Gemini)はまだ未実装。

Tomoya

そこで、このローカル開発の段階で、いよいよそこに着手していきます。

Gemini APIとVOICEVOXの連携による応答生成・音声読み上げ処理の実装指示プロンプト画面
ユーザー入力をGemini APIでテキスト応答化し、VOICEVOXで読み上げる機能の実装依頼を入力している画面です。

Geminiのレイヤーを追加する作業を、Cursorのエージェントに依頼して組み込んでいきました。ブラウザから入力を行うと、それをGeminiが受け取って考え、その回答をVOICEVOXが音声として作り出し、出力される

Tomoya

この一連の流れを、ローカルでのテストで無事に完了させることができました。

Geminiを組み込んだことで、VOICEVOXが単なるテキストの読み上げツールではなく

「ユーザーの入力に対して応答し、対話する何か」に変わったことに、大きな達成感がありました。

音声エディタ画面で入力されたメッセージに対するGeminiのテキスト応答と音声試聴プレイヤーの表示
Webアプリの音声エディタにて、ユーザーの質問に対するGeminiの応答テキストと生成音声の試聴エリアが動作している様子です。

AIという頭脳を組み込むことで、本当にブラウザの中でチャットができ、それに対して音声で返答が来るようになったので、これまで見てきたGoogle SpeechやWhisperのような存在に、少し近づけたのではないかと感じています。


[PR]以下のリンクから月額プランを契約すると、初月は半額で利用できます。コストが心配な方でも、最初の1か月は最低10ドルから試せるので、気軽に始めやすいと思います(解約も簡単にできます)。


危険なフォールバックを発見した話

しかし、ここで少しコードに違和感を覚え、AIに相談することにしました。

Cursorから作業完了の報告を受けた際、VOICEVOX_ENGINE_URLが設定されていない場合に、本番のCloud Runへ向いてしまうという設計になっていることに気づいたのです。報告の最後にあった、ユーザー向けの推奨設定のコードが、GCPのCloud Runを向いた内容になっていました。

Cursorが提示したCloud RunのURLと本来設定すべきローカル環境のVOICEVOX_ENGINE_URLの比較
AIが提案したCloud Runの環境変数設定と、実際に設定すべきローカルホストのURLとの差異を示した図です。
気づきによって自分の目的を見直す:

本来自分がやりたかったのは、完全にローカルだけで完結し、Firebaseに一切依存しない設計のはずでした。

そしてVOICEVOXエンジンが向くべき先は「Docker」であるはずなのに、GCPを向いていることに、強い違和感を覚えました。

これが自分の指示のミスなのか、AI側の認識違いなのか、ここをきちんと一致させておかないと、認識がズレたままコードが書き換わり続けたり、そのまま次の工程に進んでしまったりする恐れがあります。

Tomoya

迷うことなく、どういう認識でこの実装になったのかをAIに相談し、解決することにしました。

ヒヤリとする場面ではありましたが、最終的には本来の目的通り「Docker」に向けた設計に直すことができ、一安心です。


ローカルでの完成、感じたこと

これで、ローカル環境では「送る→考える→喋る」という一連の流れが、テーマに沿った形で完成しました。

Tomoya

この時、一番強く感じたのは、正直「ほっとした」という気持ちでした。

これまでは、さまざまな問題にぶつかって、あまりスムーズに事が運ばないことが多かったのですが、今回は大きなトラブルもなく進められたことに、素直な喜びを感じています!


次回予告

ここからが本番だと思っています。次はVPSに環境を構築し、実際にローカルと同じようにシステムが動くのかを確認していきます。

イメージとしては、そこまで難しいことではないだろうと感じていますが、油断はできません。まだ新米のVPSユーザーなので、何が起きるかはやってみないとわかりません。それでも、何か起きたら1つずつ解決して乗り越えていきたいと思います。

次回もぜひご覧ください!!

ノートPCからDockerクジラを経由してクラウド上のサーバーへ接続する様子と「次回:VPSデプロイ編」の文字

VPSやCursorに興味が出た方は、ぜひ一緒に、非エンジニアでもできるAI駆動開発を学んでいきましょう。同志がいてくれると、僕自身、心強く感じます。


以下のリンクから月額プランを契約すると、初月は半額で利用できます。コストが心配な方でも、最初の1か月は最低10ドルから試せるので、気軽に始めやすいと思います(解約も簡単にできます)。

他のVPSは「さくらインターネットから!」

前回のおすすめ記事はこちらから

VPSを使った24時間稼働システムを作成した記事はこちら

「Docker × VOICEVOX × Gemini」のテキストとコンテナを載せたクジラやPCを操作する人物

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

始めまして。このブログを運営するTomoyaです。
未経験個人開発者。AI×個人開発(Vibe Cording)で学習して参入してくれる人が増えて広がっていくと良いなと思って始めました。

実際に作成→デプロイ(公開)→運営を行ってそれについての問題や疑問を記録していきます。
また行っていく上で内容(セキュリティ・制限など)にもこだわっていきたいなと思っています。

コメント

コメント一覧 (1件)

コメントする


目次