【個人開発】動画の字幕・テロップ入れをAIで自動化するWebサービスを作りました


![テロップメーカー-概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/af98bbb0-1d42-5bdf-a9f4-4f75d70b1b73.png)


---

こんにちは、2z（Twitter： [@2zn01](https://twitter.com/2zn01) ）です。

趣味でWebサービスの個人開発をしており、以下のサービスを開発・運営しています！

■AIメーカー
https://aimaker.io/
　→　誰でも簡単にAIを作れるサービス

■ツイレポ
https://twirepo.com/
　→　キーワードで話題のツイートを自動で収集したり、自動でリツイート・フォローができるサービス

■文字起こすくん
https://text.aimaker.io/recognize-bot/
　→　画像、音声、動画をアップするだけで簡単に文字起こし・書き起こしできるサービス


## 今回作ったもの

動画をアップロードするだけで、動画内の音声を認識して文字起こしを行い、自動で動画に字幕・テロップをつけてくれる「テロップメーカー」というサービスをリリースしました！

■URL
https://text.aimaker.io/recognize-video/


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動画をアップすると、動画内の音声からAIが自動でテロップをつけてくれる「テロップメーカー」というサービスを作りました！🎉<a href="https://t.co/d4IMrfFPzS">https://t.co/d4IMrfFPzS</a><br><br>YouTuber、VTuberの方、動画のテロップ入れが面倒な方はぜひ使ってみてください！✨<br>テロップは編集可能で字幕ファイルのダウンロードもできます</p>&mdash; 2z / AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1261810571806011393?ref_src=twsrc%5Etfw">May 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



![テロップメーカーの機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/56df3f72-80b6-03ec-8e94-9f8500c8e79e.png)


---


使い方は簡単で、字幕起こししたい動画ファイルをアップロードするだけで、その動画内の音声から文字起こしを行い、字幕を自動で作成します。

![テロップメーカーの使い方.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/ac46da6e-64f6-d062-51ea-362e66d36e80.png)

動画ファイルは、以下の拡張子のファイルに対応しています。

* 動画ファイル：P4／AVI／FLV／MOV／WMV


以下、実際に動画から字幕を起こした結果の画面になります。

<img width="886" alt="字幕起こし結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/9ff058e2-d0a1-3340-7485-985746eaacbf.png">

自動で字幕を起こした内容で問題なければ、「動画を作成する」ボタンより字幕入りの動画をダウンロードすることができます。

また、（必要に応じて）字幕の内容を編集することもできます。

タイムライン内の時間やテキストをクリックすることで、該当の動画再生箇所を見ながら、字幕を編集することができます。字幕の編集では、フォントサイズや色の変更などの簡単な装飾も可能です。

<img width="896" alt="字幕編集.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/e08ab283-2e45-c5ce-3a58-0b6a89b15337.png">


また、編集した字幕・テロップは字幕ファイルとして一般的なSRT形式（タイムコードつき）のテキストファイルでダウンロードすることもできます。ダウンロードした字幕ファイルは「Adobe Premiere」などのSRT形式に対応した動画編集ソフトで読み込み可能です。



## 使用技術

### Linux

クラウドのホスティングはGoogle Cloud Platform（GCP）で、Google Compute Engine（GCE）でサーバを立てています。
サーバのOSはLinuxでCentOSを使っています。

### Apache

webサーバはApacheを使っています。
Nginxもありますが、Apacheは普段から使っており、設定方法も把握しているため、いつも通りの安定の選択としました。


### MySQL

データベースはMySQLを使用しています。


### PHP

サーバ側のプログラムはPHPを使って実装しました。

### ffmpeg

動画ファイルから音声ファイルを抽出したり、動画へ字幕をつけたりするのに使用しています。

* ffmpeg    
https://ffmpeg.org/


### MeCab

動画内に入れる字幕がなるべく適切な文字数・区切りで入るように、日本語形態素解析システムである「MeCab」を使用しています。

* MeCab    
http://taku910.github.io/mecab/

### Google Cloud Speech-to-Text API

動画から抜き出した音声ファイルを文字起こしするのに使用しています。

* Google Cloud Speech-to-Text    
https://cloud.google.com/speech-to-text/?hl=ja


### Stripe

Stripeを使った有料課金の仕組みを組み込みました。

* stripe API Reference    
https://stripe.com/docs/api

### LINE Pay

Stripeの他に、LINE Payを課金手段として使用しています。

* LINE Pay    
https://pay.line.me/jp/intro?locale=ja_JP

* LINE Pay技術連動ガイド    
https://pay.line.me/jp/developers/documentation/download/tech?locale=ja_JP

LINE Payに関しては、以前以下の記事に詳しく記載しましたので、ぜひそちらもご覧ください。

* 画像、音声、動画、YouTubeからAIが文字起こししてくれるLINE Botを作りました！【LINE Payによるマネタイズ施策】    
https://qiita.com/2zn01/items/50920920a0df5d27358d


## 字幕起こしの仕組み

![字幕起こしの仕組み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273248/e453b56f-9226-5e5f-1cb2-dbdaee3515d6.png)


動画ファイルの字幕起こしは、Google Compute Engine上に立ち上げたサーバ上にて以下の流れで行っています。

1. ユーザー側から動画ファイルのアップロード
2. ffmpegアップロードされた動画ファイルから音声ファイルを抽出
3. 抽出した音声ファイルをGoogle Cloud Storageへ格納
4. Google Cloud Storage上の音声URIを指定してGoogle Cloud Speech API（Speech-to-Text／音声認識）へリクエストを投げる
5. Google Cloud Speech API（Speech-to-Text／音声認識）から文字起こし結果を受け取る
6. 文字起こし結果から字幕(SRT)ファイルを作成
7. ffmpegを使って動画ファイルと字幕(SRT)ファイルを結合
8. ユーザー側で字幕つき動画をダウンロード


なお、動画からの文字起こしについては、以下の記事にある通り、「文字起こすくん」というサービスで既に実装済みでした。

* 画像、音声、動画、YouTubeからAIが文字起こししてくれるLINE Botを作りました！    
https://qiita.com/2zn01/items/50920920a0df5d27358d

そのため、過去の資産を活かすことができ、今回の新たな実装としては、字幕(SRT)ファイルの作成とffmpegによる動画と字幕の結合の部分ぐらいでした。


## 字幕起こしで工夫（苦労）したところ、など

### 字幕の区切り

字幕を入れる際には、動画内にうまく収まるように文字数はもちろんのこと、なるべく文章内の適切な区切りで入れる必要があります。
うまいこと字幕を入れるために、MeCabを使って形態素解析を行い、文字数の考慮を入れつつも、文章に違和感のないタイミングで字幕を区切るようにしました。

具体的には、TEDには日本語字幕の表記ガイドラインがあるのですが、このうち、1行の字数の上限（上限値は変えています）と改行位置は特に意識して実装しました。

* [TED 日本語字幕の表記ガイドライン](https://translations.ted.com/TED_%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AD%97%E5%B9%95%E3%81%AE%E8%A1%A8%E8%A8%98%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3) より

|項目|内容|
|---|---|
|字幕1枚の表示時間|1～7秒|
|1秒あたりの字数の上限|10文字/秒|
|字幕1枚の行数の上限|2行|
|1行の字数の上限|21文字|
|字幕開始タイミング|発声から100ミリ秒以上先行しない|
|改行位置|意味的なまとまりを切らない|
|字幕1枚の行のバランス|なるべく均等に|
|字幕の構成|ある文の末尾と次の文頭を1つの字幕にしない（一方が完結している短文なら良い）|
|文の分け方|字数制限を超えない限り、1文を細かく分けすぎない|
|音の表記|（丸括弧で囲む）|
|画面上の文字の文字起こし|［角括弧で囲む］|
|句読点|読点の代わりに半角スペース、句点の代わりに全角スペースを使う|

文字数が上限を超えない範囲で、MeCabでの形態素解析の結果から文章内の単語の途中などで切ってしまわないように調整を入れています。


### 字幕(SRT)ファイルの作成

ffmpegによって動画へ字幕を入れる方法を調べたところ、主にdrawtextで文字を描画する方法とsubtitlesで字幕ファイルを結合する方法の2つがありました。
このうち、実装の手軽さを考えて、subtitlesで字幕ファイルを結合する方法を選択しました。

字幕ファイルにも種類があり、SRT形式、SSA形式、ASS形式などがあります。
SRT形式は以下のようなタイムコードつきのシンプルなテキストファイルです。

```
1
00:00:00,000 --> 00:00:30,000
これは字幕です。

2
00:00:30,000 --> 00:01:00,000
字幕の2つ目です。
改行も可能です。
```

ちなみにSSA形式やASS形式は、SRT形式に比べて字幕のスタイリング機能（見栄え）があるため、より細かいレイアウトなどが指定可能です。
細かいレイアウトが可能な分、字幕ファイルは複雑になるため、今回は最もシンプルで字幕ファイルとして最も一般的であるSRT形式を採用することにしました。

subtitlesでSRT形式の字幕ファイルを結合する方法を選択したのには、「Adobe Premiere」などの多くの外部の動画編集ソフトで読み込み可能であり、汎用性が高いことが理由になります。

SRT形式の字幕ファイルは、Google Cloud Speech-to-Text APIを使って文字起こしした結果をもとに、上のフォーマットに従って、タイムコードつきのテキストファイルをPHP側で生成しています。


### 動画と字幕の結合

ffmpegではコマンド一つ（以下）で動画ファイルとSRT形式の字幕ファイルを結合することが可能です。

```
ffmpeg -y -i {動画ファイルのパス} -vf subtitles={SRT形式の字幕ファイルのパス} {結合した動画ファイルの出力先のパス}
```

ただし、この動画と字幕の結合処理には時間がかかるため、バックグラウンドで処理をするようにしました。


## 最後に

動画に字幕をつける際はぜひ「テロップメーカー」を活用してみてください。

■URL
https://text.aimaker.io/recognize-video/

このサービスに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！

* はてなブックマーク
    * [「記事」をブックマーク](https://b.hatena.ne.jp/entry/s/qiita.com/2zn01/items/ed19a64711d68a0dc40d)
    * [「テロップメーカー」をブックマーク](https://b.hatena.ne.jp/entry/s/text.aimaker.io/recognize-video/)
* Twitter： [@2zn01](https://twitter.com/2zn01)
* Qiita： [@2zn01](https://qiita.com/2zn01)
* note： [@2zn01](https://note.mu/2zn01)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動画をアップすると、動画内の音声からAIが自動でテロップをつけてくれる「テロップメーカー」というサービスを作りました！🎉<a href="https://t.co/d4IMrfFPzS">https://t.co/d4IMrfFPzS</a><br><br>YouTuber、VTuberの方、動画のテロップ入れが面倒な方はぜひ使ってみてください！✨<br>テロップは編集可能で字幕ファイルのダウンロードもできます</p>&mdash; 2z / AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1261810571806011393?ref_src=twsrc%5Etfw">May 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>