ショート動画用の画像に読み上げ音声を付けた動画を生成するウェブアプリ。
使い方の解説動画
雑学動画や商品紹介のショート動画でよく使われるスライド動画に、TTS（文字の読み上げ）音声を生成し、画像と結合して1カットの動画が作成できるアプリを作りました。このアプリもChatGPTで作成しています。
アプリは下記ページで利用できます
ショート動画用読み上げ生成器 α版
https://ntako.net/gen2/
このWebアプリはChatGPTで作りました。ChatGPTを使ったプログラミングにご興味のある方は下記もご一読ください。
ChatGPTでのアプリ開発について
今回は、前回作った「ショート動画用画像生成器」の続編の機能となるアプリです。前回のアプリで生成した画像に読み上げ音声を付ける工程の処理を行います。今回の機能は主に、文字から読み上げ音声（TTS）の生成と、画像と読み上げ音声を結合して動画を生成するという2つの機能で構成されています。最初はこれらの機能を1つに統合して作ろうとしましたが、プログラミング初心者のんたこにはなかなかハードルが高かったようで失敗に終わりました。
■最初の設定した要件
作りたいもの : ブラウザ上で画像に読み上げ音声を結合してショート動画を生成するアプリ。
制作依頼分 : 下記要件のブラウザで動作するウェブアプリのコードを書いてください。HTML、CSS、JSは一つにまとめて書いてください。
【要件】
・生成する動画は縦1920pxで横1080pxの縦型ショート動画。
・ユーザーが設定した1カットずつの画像とナレーションテキストを元に動画を生成する。
・1カットの長さはTTSナレーション音声の長さで生成する。
・カットは8カットまで繋げれるようにする。
・情報入力後に「生成」ボタンを押すと動画が生成さる。
・動画は入力されたカット数を繋がて1本の動画でmp4として出力する。
・mp4はライセンス料のかからない方法で実装する。
【実装環境】
・フロントエンド：HTMS、CSS、JSをメインに使用。
・バックエンド：PythonメインでGoogle Cloud Functionsに実装。
・TTS：Google Text-to-Speech APIを使用。
・APIはGoogle Secret Managerの環境変数から呼び出す。
※今回の制作内容では読み上げ音声の生成にバックエンド（APIとクラウドサーバー）を使った実装が必要だったので、この辺りを事前にChatGPTに相談してと「Google Cloud Functions」で「Python」を使って「Google Text-to-Speech API」を使用するという手法を選択しました。
■失敗からの軌道修正
最初に設定した要件でチャレンジしていたのですが、「読み上げ音声を複数同時に生成して複数読み込んだ画像にそれぞれ画像のカット毎に読みあえげ音声を結合して最終的に1本の動画に書き出す」ということが再現できませんでした。そこで要素を分割してシンプルにしようと思いつき、3つの機能に分割しました。この方法で今回は2つ目まで実行できるアプリとして完成しました。
【分割した機能】
・文字を入力して読み上げ音声を生成してダウンロードする。
・画像と音声を読み込んで結合して音声の長さの動画を生成する。
・複数の動画とBGMを読み込んで結合して完成動画を生成する。
■読み上げ音声の生成機能の実装について
TTSは過去にも実験で行っていたので、最初に設定した要件通り、「Google Cloud Functions」で「Python」を使って「Google Text-to-Speech API」を使用してすんなり実装できました。このあたりのAPIとクラウドサーバーの使い方についてはもう少し詳しくなったら記事にまとめようと思います。
■画像と音声を結合した動画生成機能の実装について
これはかなり苦労しました。ChatGPTに相談して「FFmpeg」というライブラリを使って実装したのですが、この「FFmpeg」の実装方法にも様々な方法があるようでChatGPTとの会話で混在するような形となりエラーを連発することになりました。最終的に「ffmpeg.wasm」を使って実装するという共通認識になってから少しずつエラーを解決して動作する形になりました。
■完成プログラムの公開
今回はブラウザアプリなので完成品をWebページに公開しました。公開方法は一般的なホームページ制作と同じでレンタルサーバーなどにアップして公開します。
https://ntako.net/gem2/
■おわりに
ChatGPTを活用したブラウザゲームの開発は、プログラミングの基礎を学びながらアプリを完成させる楽しさを体験できる機会になります。これからChatGPTを使ったプログラミングを始める方の参考になれば幸いです。。
