単純作業をしている時など、長文を読み上げさせたい場面があります。そこで、ブラウザにテキストを入力すると、テキストを読み上げる動画を作成するツールを作ってみましょう。バイブコーディングで手軽にアイデアを実現できます。
テキストを読み上げするツールを作るには?
今回は、テキストから動画を作成するツールを作りますが、バイブコーディングを実践する相方に「Codex CLI」を使ってみましょう。Codex CLIは、ChatGPTを開発しているOpenAIが発表した、コーディングエージェントです。詳しくは、本連載の5回目で紹介していますが、開発に特化したモデル「gpt-5.2-codex」が利用できるようになり、性能が大幅に向上しているので使ってみます。
なお、今回のツールを作るのに当たって、簡単にChatGPTで調査してみましょう。ここでは、下記のようなプロンプトを入力して調査しました。
バイブコーディングで、テキストから動画を作成するツールを作ろうと思います。
どんな技術を使うと簡単でしょうか。
ブラウザにテキストを入力すると、テキストを読み上げる動画(MP4)を作成するツールを想定しています。
すると、次のような回答が得られました。
ChatGPTの回答は、少し長いのでまとめると次のような要点が出力されました。
- ブラウザで動かすだけなら、JavaScriptで、Web Speech APIを使うとテキストの読み上げができるのですが、それをMP4にすることはできない
- 商用の読み上げAPI(OpenAI TTS / Google Cloud Text-to-Speech / Azure Speech)を使うと簡単で品質が良い
- 日本語であれば、オープンソースのVOICEVOXを使うのもあり
それで、無料で頑張ろうと思ったら、こちらのVOICEVOXを使う方法が良いです。しかし、VOICEVOXはファイルサイズが大きいので、気軽に動画を作るという用途では、ちょっと大変になります。
そこで、今回は、少しお金がかかりますが、OpenAIのTTS(Text-To-Speech) APIを使ってみましょう。実際に使ってみたところ、600文字(1分半程度)の文章でも3円ほどでしたので、十分に気軽に使えるでしょう。
OpenAIのAPIキーを取得しよう
OpenAIのAPIを使う場合には別途、こちらから開発者プラットフォームに登録して、APIキーを取得する必要があります。APIキーは、こちらから発行できます。
APIキーを発行したら、キーをコピーして環境変数に登録しましょう。
WindowsのWSL(Ubuntu)を使う場合は、テキストエディタで「~/.bashrc」を開きましょう。macOSを使う場合は「~/.zshrc」を開きましょう。そして、以下を追加します。
export OPENAI_API_KEY="(sk-からはじまるAPIキー)"
その後、WSLなら「source ~/.bashrc」、macOSなら「source ~/.zshrc」を実行して設定の変更を反映させます。
もし、Windowsのネイティブで作成したツールを使いたい場合には、次の手順でWindowsの環境変数に登録します。
- スタートメニューを開いて検索ボックスに「環境変数」と入力
- 「システム環境変数の編集」をクリックして環境変数ダイアログを開く
- 画面上部のユーザー環境変数で「新規」ボタンを押して以下の値を指定する
| 項目 | 指定する値 | |
|---|---|---|
| 変数名 | OPENAI_API_KEY | |
| 変数値 | (sk-からはじまるAPIキー) |
バイブコーディングを開始しよう
今回は、プログラミング言語にPythonを使用することにしましょう。姉妹連載のこちらを参考にして、PCにPythonをインストールしましょう。
そして、ターミナルで、「codex」とタイプして、Codex CLIを起動します。もし、Codexがインストールされていない場合は、こちらを参考にインストールしてください。
それでは、Codexにツールの開発を依頼しましょう。ここでは、以下のようなプロンプト(指示)を入力します。
指示: Pythonを利用して、テキストを動画に変換するWebアプリを作ってください。
技術: flask / moviepyパッケージ / OpenAI TTS(モデル:gpt-4o-mini-tts) を使います。
操作手順:
1. ユーザーは作成したいタイトルとテキストを入力、動画作成ボタンを押すと動画を作成する
2. タイトルを元にして`title.png`を作成する
3. OpenAI TTSを使ってテキストをMP3に変換
4. moviepyを使って、`title.png`とMP3を合成して`output.mp4`を出力
5. ブラウザ画面でMP4を再生できる画面を出力
備考:
- OpenAIのAPIは環境変数に登録済みです
- 必要なライブラリを`requirements.txt`にまとめてください
- メインアプリのファイル名は`app.py`にしてください。
- moviepyパッケージはバージョン2.2以降に対応してください
- 日本語で答えてください
Codexがコーディング作業をはじめて、しばらく待っているとアプリが完成します。
ターミナルから実行してみよう
ターミナルで、パッケージをインストールしてプログラムを実行しましょう。まずはPythonのパッケージをインストールします。
python -m pip install -r requirements.txt
なお、moviepyは、実行時にFFmpegを利用します。そのため、FFmpegをインストールしましょう。macOSの場合、Homebrewが便利です。
# WindowsのWSL/Ubuntuの場合
sudo apt install ffmpeg
# macOSの場合
brew install ffmpeg
そして、ターミナルで下記のコマンドを実行すると、ローカルWebサーバーが起動します。
python app.py
すると、「Running on http://127.0.0.1:5000」と表示されるので、ブラウザを起動してURL「http://127.0.0.1:5000」にアクセスしましょう。
残念ながら、筆者が試したときは、何度かエラーが出ましたので、その度に、Codexにエラーメッセージを入力しました。すると、下記のようなツールが実行されました。
タイトルとテキストを入力して「動画作成」ボタンを押すと、ツールが動画を作成して、生成結果の部分にMP4動画が表示されました。再生してみると、バッチリ読み上げが行われました。思ったよりも簡単に完成しました。
UIを改良してみよう
なお、筆者が試した時には、「動画作成」ボタンを押してから、完成までかなりの時間を待たされました。その間、画面が固まってしまうので心配になります。
そこで、非同期通信(Ajax)に対応してもらって、UIを改良してもらいましょう。次のような追加プロンプトを入力しました。
無事に完成しました。
ただし、「動画作成」ボタンを押すと、画面が固まってしまいます。
Ajaxを使って処理が完成するまで、作成中であることを示すローダーを表示してください。
すると、「動画作成」ボタンを押すと、ローダーが表示されるようになりました。
動画の背景画像を用意しよう
せっかくなので、背景画像を用意して、動画を見栄えの良いものにしてみましょう。ここでは、ChatGPTで作成した次のような画像を用意しました。この画像を「background.png」という名前で、プロジェクトフォルダに保存します。
そして、次のようなプロンプトを与えて、改良してもらいましょう。
プロジェクトのフォルダに `background.png` を用意しました。
このPNGファイルを動画の背景画像に設定してください。
鮮やかな画像なので、文字を重ねる部分は、考慮してください。
また、画像はアスペクト比を考慮して画像を配置してください。
すると、次のようなツールが作成されました。背景画像を追加したところ、少し見栄えがよくなりました。良い感じです。
ここまで作成したプログラム一式を、こちらにアップロードしました。気になる方は、プログラム一式をダウンロードして使ってみてください。
まとめ
以上、今回はテキストを動画に変換するツールを作成してみました。OpenAIのTTS APIを利用することで高品質な読み上げ動画を作成することができました。テキストの読み上げ音声(MP3)と、タイトル画像を用意さえすれば、簡単にMP4動画が作成できました。
最近では、画像から手軽に動画も生成できるようになっているので、アバター動画を作成して、それが話しているように動かすこともできるかもしれません。ぜひ、今回のプロンプトを改良して、便利なツールを作ってみてください。
自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。






