Youtube字幕の色が自動で変わるように、投稿者側で色を設定する。

#初めに
初めまして。ご覧いただきありがとうございます。
Youtubeの字幕機能について、いろいろ試してみました。
また、字幕に色を付けるための簡単なツールも作成してみましたので、公開してみようと思います。
>![字幕のテスト](http://wy1.starfree.jp/d.png)
[字幕のテスト - Youtube](https://youtu.be/ATKraT0401E)（音はありません）

このようにYoutubeの字幕を色付きで表示させられます。
調べてもあまり情報が出てこなかったので、参考程度にまとめてみたいと思います。

#きっかけ
Youtubeでこの動画を見ていました。
>![ヨルシカ-雨とカプチーノ](http://wy1.starfree.jp/s.png)
[ヨルシカ - 雨とカプチーノ](https://www.youtube.com/watch?v=PWbRleMGagU)

なんとなくで字幕を付けると・・・
設定もしてないのに色は変わるしフォントもなんか違うし。
本当にすごいので見てみてください。

今回はフォントの変更方法には触れません。
調べてもよくわからなかったので、もし情報があれば追加したいと思います。

#やり方
ここから詳しい手順を説明します。
##コード作成ツールについて
作成ツールを使用して字幕ファイルを作成する手順です。

###ソースコード
ソースコードを公開しました。以下のリンクから飛べます。
>[「Youtube字幕の色が自動で変わるように、投稿者側で色を設定する。」のソースコード](https://qiita.com/wy0727_betch/items/bb59d67ff330d2bc5fcb)

###1. ツールをダウンロードする
**windows10のみで動作確認しています。他のOSでは動くかどうか確認できていません。**
以下からダウンロードし、どこでもいいので保存、解凍してください。
>[色付き字幕作成ツール](https://drive.google.com/open?id=1N0x8ctzXrRXZfyaGaG9sgJJnfdzD9HKF) (Googleドライブにリンクします）

解凍後、次のような構成になっていることを確認してください。

```
色付き字幕作成ツール ――――――― ダウンロードした字幕ファイルはこの中に入れてください。――― 拡張子は変更せず、ファイル名を「captions」として保存してください
                      ｜―― 設定ファイル ―――――― 使用する色と指定文字.txt
                                         ｜―― 色指定ファイル.txt
                      ｜―― 原色大辞典 ビビットカラー
                      ｜―― 使用する色と指定文字 記述方法.txt
                      ｜―― 色指定ファイル 記述方法.txt
                      ｜―― 色付き字幕作成ツール.exe
```

###2. 動画の字幕をダウンロードする
ツールは、sbv形式とsrt形式の字幕ファイルに対応しています。
srt形式の字幕ファイルをダウンロードするために、下記ページを利用します。
>リンクが許可されているか不明なため、URLは記載しません。
Webで「YOUTUBE動画の字幕をダウンロードするCGI」と検索してください。
利用方法等は、作者様のページをご覧ください。

保存先は、「ダウンロードした字幕ファイルはこの中に入れてください。」というフォルダに保存します。
**名前を「captions」として保存してください。名前が違うと読み込みません。**

###3. 設定ファイルを確認、編集する
設定方法については、「使用する色と指定文字 記述方法.txt」と「色指定ファイル 記述方法.txt」を参照してください。
**デフォルトでは、12色使用可能で、すべての字幕を赤色で表示します。**

###4. 「色付き字幕作成ツール.exe」を実行する
黒い画面が表示されますので、指示に従い作成してください。
**エラーメッセージが表示された場合や、一瞬だけ画面が現れ消えてしまう場合はファイル読み込みエラーです。設定ファイル等に間違いがないか確認してください。**
どうしても解決しない場合はコメント等で連絡してください。

##字幕の仕様について
Youtubeには、Youtubeのサイトで字幕を追加する以外に字幕ファイルをアップロードすることができるようになっています。
詳しくは下記の公式ページをご覧ください。
>[サポートされる字幕ファイル - Youtubeヘルプ](
https://support.google.com/youtube/answer/2734698?hl=ja&ref_topic=7296214)

このツールでは、この中のSAMIファイルというものを使用しています。

##作成例
例として、今回は以下の文章を色を付けて表示してみたいと思います。
>①吾輩は猫である。名前はまだ無い。
②どこで生れたかとんと見当けんとうがつかぬ。
③何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
④吾輩はここで始めて人間というものを見た。
⑤しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

>引用 - 吾輩は猫である （夏目漱石）

この例では、それぞれの文章を、
①<font color="#ff0000">**赤色（#ff0000）**</font>
②<font color="#ffc0cb">**桃色（#ffc0cb）**</font>
③<font color="#ffa500">**橙色（#ffa500）**</font>
④<font color="#008000">**緑色（#008000）**</font>
⑤<font color="#0000ff">**青色（#0000ff）**</font> 
として、5秒（5000ミリ秒）間ずつ表示させていきます。

色の選択は、カラーコードを使用します。
下記ページを参考にしてください。
>[Web色見本 原色大図鑑](https://www.colordic.org/v)

ここからは、上記手順通りに行います。

###1. 字幕ファイルをダウンロードし、保存する
Youtube公式ページで字幕を作成後手順に沿ってダウンロードするとこのようなファイルとなります。

```captions.srt
1
00:00:00,000 --> 00:00:05,000
吾輩は猫である。名前はまだ無い。

2
00:00:05,000 --> 00:00:10,000
どこで生れたかとんと見当けんとうがつかぬ。

3
00:00:10,000 --> 00:00:15,000
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

4
00:00:15,000 --> 00:00:20,000
吾輩はここで始めて人間というものを見た。

5
00:00:20,000 --> 00:00:28,000
しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

```

###2. 設定ファイルを編集する
まず、「使用する色と指定文字.txt」を編集します。
今回は色を五色使用しますが、デフォルトのままでは表示したい色がないため追加します。
指定文字は、「a,b,c,d,e」とします。
**a～eの部分が追加分です。**

```使用する色と指定文字.txt
1:#ff0000
2:#ff007f
3:#ff00ff
4:#7f00ff
5:#0000ff
6:#007fff
7:#00ffff
8:#00ff7f
9:#00ff00
10:#7fff00
11:#ffff00
12:#ff7f00
a:#ff0000
b:#ffc0cb
c:#ffa500
d:#008000
e:#0000ff
```

次に「色指定ファイル.txt」を編集します。
今回は一文ずつ色を変化させるので、次のように編集します。

```色指定ファイル.txt
a
b
c
d
e
```

このように記述すると、一文目に「a(#ff0000)」、二文目に「b(#ffc0cb)」のように、先ほど指定した文字とカラーコードが対応して指定されます。
すべて同じ色で表示する場合は、一行目だけに「all 使いたい色の指定文字」のように記述もできます。詳しくは記述方法のファイルを参照してください。

###3. ツールを実行
うまく設定ができていれば、次のようなファイルが完成します。
（sample.smiとして保存しています）

```sample.smi
<SAMI>
<HEAD>
<SAMIParam>
Metrics {time:ms;}
Spec {MSFT:1.0;}
</SAMIParam>
</HEAD>
<BODY>
<SYNC Start=0><font color="#ff0000"><b>吾輩は猫である。名前はまだ無い。</b></font>
<SYNC Start=5000><font color="#ffc0cb"><b>どこで生れたかとんと見当けんとうがつかぬ。</b></font>
<SYNC Start=10000><font color="#ffa500"><b>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</b></font>
<SYNC Start=15000><font color="#008000"><b>吾輩はここで始めて人間というものを見た。</b></font>
<SYNC Start=20000><font color="#0000ff"><b>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</b></font>

```

###4. Youtubeに投稿!
あとは字幕ファイルをアップロードして終了です。
アップロードについては検索すればたくさん情報が出てきますので、そちらを参考にしてください。
>[字幕のテスト - Youtube](https://youtu.be/ATKraT0401E)（音はありません）

上記ファイルをアップロードしてみた動画です。

#最後に
最後までご覧いただきありがとうございました。
ツールはpythonで作成しています。初心者なため完成度は高くありませんが、個人が趣味程度に作成したものですので暖かい目で見てくださればうれしいです。

字幕に個性を出したい方、Youtuberなどの方に参考にしていただけたら幸いです。

それでは！