【YouTube】YouTubeの字幕は一石二鳥機能だった!? Webセミナー動画のアクセシビリティ対応と全文書き起こしを一気にやってみた

はじめに

CX事業本部の中安です。まいどどーもです。

今年もクラスメソッドのDevelopers.IO執筆者がお送りする大イベント。 DevelopersIO 2020 CONNECT がやってまいります。

自分も発表者としてセッション動画を作成してるのですが、 その中でYouTubeの「字幕」機能が面白かったので、ご紹介しようと思います。

YouTubeの自動字幕

YouTubeに動画をアップロードすると、実は何もしなくても勝手に字幕をつけてくれます。

それを確認するには動画の字幕ボタンを押します。

普通に話した言葉が勝手に言語化してくれるのはビックリ。嬉しい機能です。

しかし、この続きを見てみると・・・

この部分では自分は

「VIPERもそれを踏襲しています。具体的にどうするのかというと、要素同士はインターフェイス。Swiftではプロトコルのことを指し」

と話していますが、

「viperもそれを踏襲しています具体的にどうするのかというと要素同氏はインターフェイススイフトではプロところの誤動作し」

と出てきてしまっています。

「プロところの誤動作」って何だよ! って感じですね。

結構正確に文字起こしはしてくれますが、やはりさすがに機械的に行うと、人間が聞く通りには100%できないです。 まぁ仕方ないですね。

アクセシビリティとしての字幕

字幕の何が嬉しいかというと、アクセシビリティが一段階上がることかなと思います。

「アクセシビリティ対応」というと「聴覚障がいをお持ちの方用」「耳が遠い高齢者用」という印象があるかもしれませんが、 それだけではなく、「ちょっとした都合で今は音が出せない」、逆に「周りがザワザワとうるさくて音が聞こえない」という、 ごくありふれた環境でも役に立つ対応になると思います。

そこで「字幕」を押すことで、日本語として成立していない文字が並んでしまうと、「うーん、だめだこりゃ」という印象になってしまいます。

いろいろな人に動画を楽しんでもらえるように、余裕のある方は字幕対応に挑戦してみましょう。

字幕を編集する

(1) 字幕機能を使うには、自分のYouTubeアカウントでYouTubeStudioに入り、「字幕」のメニューを押します。

(2) 「チャンネルの字幕」という動画の一覧画面が出てくるので、その中から字幕を編集したい動画のタイトルをクリックします。

(3) 「動画の字幕」画面の「言語を追加」ボタンを押し、日本語を選択します。

(4) 日本語(動画の言語)が追加されたら、字幕の「追加」を押します。

(5) 「方法を選択」が別タブで開かれるので、「新しい字幕を作成する」を選びます。

すると、このような編集画面が表示されます。

エクスポート

Webアプリとしてかなり優秀なGUIですが、全体に字幕を修正する際には少し不便に感じました。 (もちろん、微修正をするためには凄くよいUIです)

そこで、字幕データをエクスポートしてみることににします。

「操作」を押してメニューを開き「ダウンロード」を押します。

すると captions.sbvというファイルがダウンロードできると思います。 中身はテキストファイルなので、お好みのエディタで開いてください。

内容は抜粋するとこんな感じです。

0:05:00.170,0:05:04.520
これ は ベース と なっ て いる クリーン アーキテクチャ が 目指し て いる 理想 で も あり

0:05:04.850,0:05:10.400
viper も それ を 踏襲 し て い ます 具体 的 に どう する の か と いう と 要素 同氏 は

0:05:11.100,0:05:14.089
インターフェース スイフト で は プロ ところ の 誤 動作 し ます が

0:05:14.250,0:05:17.150
これ だけ で つながる 状態 に し て おい て その

0:05:17.249,0:05:20.969
中 で 行わ れる こと は 互い に 知ら ない 状態 を 作っ て いき ます

なるほど、開始時間,終了時間と文字で構成されているって分かりやすい仕様ですね。

編集

ここからは個人的な編集テクニック的なものです。 人によって好みがあると思います。あくまで参考に

空白を削る

単語ごとに空白が作られてしまいますが、これは削ってしまいます。単純に半角スペースを空文字に置換するとかでいいと思います。

0:05:00.170,0:05:04.520
これはベースとなっているクリーンアーキテクチャが目指している理想でもあり

0:05:04.850,0:05:10.400
viperもそれを踏襲しています具体的にどうするのかというと要素同氏は

0:05:11.100,0:05:14.089
インターフェーススイフトではプロところの誤動作しますが

0:05:14.250,0:05:17.150
これだけでつながる状態にしておいてその

0:05:17.249,0:05:20.969
中で行われることは互いに知らない状態を作っていきます

こんな感じ。

句読点を書く

空白を削ると言葉の区切りが無くなってしまいますので、人に似読みやすいように句読点を書き入れます。

0:05:00.170,0:05:04.520
これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、

0:05:04.850,0:05:10.400
viperもそれを踏襲しています。具体的にどうするのかというと、要素同氏は

0:05:11.100,0:05:14.089
インターフェース、スイフトではプロところの誤動作しますが、

0:05:14.250,0:05:17.150
これだけでつながる状態にしておいて、その

0:05:17.249,0:05:20.969
中で行われることは互いに知らない状態を作っていきます。

言葉の揺れや、誤植を直す

あとは、意図しない言葉を直していきます。

0:05:00.170,0:05:04.520
これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、

0:05:04.850,0:05:10.400
VIPERもそれを踏襲しています。具体的にどうするのかというと、要素同士は

0:05:11.100,0:05:14.089
「インターフェース」 Swiftでは「プロトコル」のことを指しますが、

0:05:14.250,0:05:17.150
これだけでつながる状態にしておいて、その

0:05:17.249,0:05:20.969
中で行われることは互いに知らない状態を作っていきます。

「プロところの誤動作」のところも含め、修正しました。 専門用語やプログラムで使う言葉、固有名詞などは言葉が揺れやすいです。強調したい部分はカギカッコで囲むと更に読みやすいかもしれません。

字幕をまとめる

YouTubeが勝手に文章を区切ってしまっているので、文章途中で切れてしまっているところがかなり多くあると思います。 であれは、時間の部分も直さなくてはいけなさそうですが、さすがに手間がかかるので、自分はYouTubeによって区切られた時間は変えないようにしています。

しかしながら、あまりにも読みづらいというところは、部分的に時間をまとめる作業もしています。

たとえば

0:05:14.250,0:05:17.150
これだけでつながる状態にしておいて、その

0:05:17.249,0:05:20.969
中で行われることは互いに知らない状態を作っていきます。

文章としては、変なところで途切れているので一緒にしたいところですね。

マージする2つめの文章の終了時刻をカットして、1つめの終了時刻にペーストします。

0:05:14.250,0:05:20.969
これだけでつながる状態にしておいて、その

0:05:17.249,
中で行われることは互いに知らない状態を作っていきます。

そして、文章もマージしてしまって、残ったほうは削ってしまいます。

0:05:14.250,0:05:20.969
これだけでつながる状態にしておいて、その中で行われることは互いに知らない状態を作っていきます。

インポート

先ほどの「操作」から「ファイルのアップロード」を選びます。

ダイアログが出てくるので「字幕ファイル」のラジオボタンを押して、先ほどのファイルをアップロードします。

アップロードが終わると編集画面に戻ってきますが、この時点では反映がされていないようです。

そこで右上の「変更を保存」を押します。

上書きしていいかの確認はOKすると、「字幕の管理」画面に戻ります。 変更されたかを確認するためには、「公開済み」の「日本語」をクリックします。

再度、編集画面に戻りますが、一度「編集」ボタンを押さないと再編集はできないようです。

このように先ほど変更したものが反映されてる状態になりました。

さて、実際に字幕をONにしてYouTubeで動画を見てみましょう。

プロところの誤動作 が 「プロトコルのことを指しますが」 となっていて、読みやすくなったと思います。

全文書き起こし

字幕ファイルが単純なテキストファイルなので、テキストを編集する手間はかかるのですが、動画の全文が既に書き起こされる状態になっています。

これはありがたい話なので、これを使って動画の全文書き起こしをすることににしましょう。

先ほどの.sbvファイルを開きます。

0:05:00.170,0:05:04.520
これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、

0:05:04.850,0:05:10.400
VIPERもそれを踏襲しています。具体的にどうするのかというと、要素同士は

0:05:11.100,0:05:14.089
「インターフェース」 Swiftでは「プロトコル」のことを指しますが、

0:05:14.250,0:05:20.969
これだけでつながる状態にしておいて、その中で行われることは互いに知らない状態を作っていきます。

0:05:21.520,0:05:29.219
さらに要素の実態つまりインスタンスは外部から差し込むことができ容易に差し替えることができる状態にします

時刻部分が邪魔なので一気に消してしまいます。

正規表現を使って文字置換しますが、その正規表現はこんな感じ(もちろん使う環境によって違うと思うので、動かなかったらごめんなさい)

^[0-9]\:.+\n

これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、

VIPERもそれを踏襲しています。具体的にどうするのかというと、要素同士は

「インターフェース」 Swiftでは「プロトコル」のことを指しますが、

これだけでつながる状態にしておいて、その中で行われることは互いに知らない状態を作っていきます。

さらに要素の実態つまりインスタンスは外部から差し込むことができ容易に差し替えることができる状態にします

空白行も削ってしまいます。正規表現はこんな感じ。

^\n

これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、
VIPERもそれを踏襲しています。具体的にどうするのかというと、要素同士は
「インターフェース」 Swiftでは「プロトコル」のことを指しますが、
これだけでつながる状態にしておいて、その中で行われることは互いに知らない状態を作っていきます。
さらに要素の実態つまりインスタンスは外部から差し込むことができ容易に差し替えることができる状態にします

あとは、改行などを整えたりして文章を整理します。

これは、ベースとなっているクリーンアーキテクチャが目指している理想でもあり、VIPERもそれを踏襲しています。
具体的にどうするのかというと、要素同士は「インターフェース」 Swiftでは「プロトコル」のことを指しますが、これだけでつながる状態にしておいて、その中で行われることは互いに知らない状態を作っていきます。
さらに、要素の実態、つまりインスタンスは外部から差し込むことができ、容易に差し替えることができる状態にします。

ここまで出来上がると、ブログに載せる用にこのテキストファイルの内容を使うことができそうです。

自分の話した言葉を全文書き起こすのは非常にしんどい作業ですが、こうやってYouTubeが自動で書き起こしてくれたものを使うことで、 その負担は軽減できそうですね。

まとめ

ということで、YouTubeの字幕について書いてきました。

• 字幕はあらゆる理由で音が聞けない人へのアクセシビリティ対応になる
• YouTubeの自動字幕によって自分の話した言葉がテキストファイルで落とせる
• テキストファイルを整えてやることで、ほぼそのままブログにも使える

アクセシビリティと全文ブログを書くことができる一石二鳥な機能。よければ使ってみませんか。

DevelopersIOのセッション動画も、今度全文字書き起こしブログにしたいと思います。お楽しみに