ショート動画自動生成の舞台裏|字幕はみ出しと見出しデザインの試行錯誤

📖 読了目安: 約4分

これまで記事の自動投稿やSNS連携を組み上げてきたこのブログに、今回は新しい機能を加えることにしました。それは、縦型のショート動画を自動で作る仕組みです。

台本を考えて、声を合成して、写真を集めて、字幕を付けて、1本の動画に組み上げる――この一連の流れを毎朝自動で走らせられるようにするという計画で、実装を始めてから完成まで、想像以上に試行錯誤を重ねることになりました。

その他の細かい改善

動画機能の開発と並行して、既存の自動投稿の仕組みにもいくつか改善を加えました。たとえば、アイキャッチ画像がまだ設定されていない記事は、SNSへの投稿を次回に持ち越すようにしました。画像がない状態で投稿すると、リンクのプレビューに画像なしのまま残ってしまうためです。

また、複数の自動実行がほぼ同時に記録を残そうとして失敗することがあったため、書き込みに失敗したら間隔を空けて何度か再試行する仕組みも追加しました。実際に夜間の投稿で失敗が確認されたことを受けての対応です。

動画生成機能の追加と音声合成の準備

今回足したのは、既存の記事生成やSNS投稿の仕組みとは独立した、動画を自動で作る機能です。台本を考えて、声を合成して、写真を集めて、字幕を付けて、1本の動画に組み上げる――この一連の流れを毎朝自動で走らせたいという話から始まりました。

声の部分にはGoogleの音声合成サービスを使うことにして、管理画面でキーを発行するところから作業しました。画面の行き来が多く地味に時間がかかる作業で、キーを貼り付け終わったところで一旦作業を区切ることになりました。

動画を組み立てる仕組み自体は思ったよりすんなり動いたのですが、実際に自動実行の環境で試したところ、動画と音声を扱うための土台となる定番ソフト(ffmpeg)がそもそも入っていないというところでいきなりつまずきました。てっきり最初から用意されているものだと思い込んでいたのですが、実際には別途インストールする指定が必要で、最初の実行はここで失敗しました。

字幕が画面からはみ出す原因と解決

動画が組み上がって初めて確認したところ、字幕の文字が画面からはみ出して表示されてしまう不具合に遭遇しました。最初は「日本語は単語の区切りにスペースがないから自動改行がうまく効いていないのだろう」と考え、自分で改行位置を計算するロジックを足しましたが直りませんでした。

次に「文字の大きさの基準になる解像度の指定が足りないのでは」と考えて別のパラメータを足してみましたが、それでも直りませんでした。結局、字幕ファイルの形式自体を、動画の解像度をファイルの中に直接書き込める別の形式に切り替えたところ、ようやく根本的に解決しました。

表面上同じ「文字がはみ出す」という症状でも、原因の階層が全然違うことがあります。対症療法を重ねるより、仕組みの土台から疑うべき場面があるのだと実感した出来事でした。

見出しデザインの反復調整

動画の見出し部分のデザインは、思っていた以上に何度もやり取りすることになりました。最初は文字が小さすぎて見づらいと言われ、大きくして上に見出し・中央よりやや下に本文という配置に変更しました。次に実際に人気のショート動画のスクリーンショットを見せてもらい、それに近い配置・フォントの大きさに合わせました。

その後も、見出しの背景の帯を消してほしい、やっぱりブログと同じ帯のデザインに戻してほしい、帯を画面の端まで届かせてほしい、帯の太さを文字に合わせて薄くしてほしい、見出しは2行に収めてほしい、上下の余白を揃えてほしい、といった細かい調整依頼が次々と入りました。手を動かしてみるまで「ちょうどいい塩梅」が分からない類の調整で、都度動画を書き出しては確認してもらう、という往復を10回以上繰り返すことになりました。

見出しの帯の余白を直している途中、長いタイトルだと文字が画面の左右にはみ出してしまう不具合にも気づきました。見出しを必ず2行に収める処理は入れていましたが、1行あたりの文字数に上限を設けていなかったため、タイトルが長いとそのまま画面幅を超えて表示されてしまっていたのです。1行に収まる文字数の上限を決めて、それを超える場合は末尾を省略するようにして解決しました。

自動実行のテスト中に起きた画面の不具合

自動実行の仕組みを手動でテスト実行するために、画面上の実行ボタンを何度もクリックしたのですが、途中から開くはずのメニューが「読み込みでエラーが発生しました」という表示のまま固まってしまうことが何度かありました。何度読み込み直しても同じ場所でエラーになり、結局まったく新しいタブを開いて同じページにアクセスし直したところ、今度は問題なくメニューが開いて実行できました。

表面上同じページに見えても、裏側の状態が壊れていることがあり、そういうときは中途半端に粘るより作り直した方が早いこともあると学びました。

今回は、縦型ショート動画を自動で作る仕組みを追加した際の開発記録をまとめました。

• 動画と音声を扱う土台のソフトが入っていないという初歩的なつまずきから始まった
• 字幕のはみ出し問題は、対症療法では解決せず、字幕ファイル形式の変更で根本的に解決した
• 見出しデザインの調整は10回以上の往復を重ね、手を動かして確認する大切さを実感した
• 自動実行のテスト中に画面が壊れる不具合も経験し、作り直しの判断も学びになった

本記事にはアフィリエイト広告・プロモーションが含まれる場合があります。紹介する商品・サービスの購入や申込みは、必ずご自身の判断と責任で行ってください。