WEBVTT

1
00:00:00.000 --> 00:00:00.814
こんにちは。

2
00:00:00.814 --> 00:00:03.799
エイチティーエムエル、リファレンス解説です。

3
00:00:03.799 --> 00:00:06.784
HTMLタグ編の六本目は、トラックタグです。

4
00:00:06.784 --> 00:00:11.261
これは、動画や音声に字幕などのテキストを関連付けるためのタグです。

5
00:00:11.261 --> 00:00:18.858
映像そのものを作るタグではなく、映像に合わせて表示される文字情報を、外部ファイルから読み込む役割を持っています。

6
00:00:18.858 --> 00:00:26.049
耳の不自由な方への配慮や、音を出せない場所での視聴など、動画をより多くの人に届けるための大切な仕組みです。

7
00:00:26.049 --> 00:00:30.391
今回は、基本の書き方から、字幕ファイルの中身、属性の使い分け、表示されないときの確認ポイントまで、

8
00:00:30.391 --> 00:00:34.732
初心者向けに順番に解説します。

9
00:00:34.732 --> 00:00:40.564
トラックタグが活躍するのは、動画や音声に文字情報を重ねたい場面です。

10
00:00:40.564 --> 00:00:45.195
代表的なのは、セリフや効果音まで文字で伝える字幕です。

11
00:00:45.195 --> 00:00:49.483
音が聞こえにくい方でも内容を追えるようになります。

12
00:00:49.483 --> 00:00:55.573
ほかにも、外国語の翻訳字幕、映像の内容を言葉で説明する解説テキスト、動画の区切りを示すチャプター情報など、

13
00:00:55.573 --> 00:01:01.662
目的に応じて種類を使い分けられます。

14
00:01:01.662 --> 00:01:04.578
字幕は、単なる飾りではありません。

15
00:01:04.578 --> 00:01:11.439
動画の内容を、音に頼らずに届けるための情報として用意する、という視点が大切です。

16
00:01:11.439 --> 00:01:16.928
自分の動画を誰が、どんな環境で見るのかを想像して選んでください。

17
00:01:16.928 --> 00:01:18.572
基本の書き方です。

18
00:01:18.572 --> 00:01:24.051
トラックタグは空要素と呼ばれる種類で、終了タグは書きません。

19
00:01:24.051 --> 00:01:27.339
内側に文字を入れる場所もありません。

20
00:01:27.339 --> 00:01:36.837
代わりに、ビデオタグやオーディオタグの内側に子要素として置き、属性で読み込むファイルや種類を指定します。

21
00:01:36.837 --> 00:01:43.230
親になるメディア要素があって、初めて意味を持つタグだと覚えてください。

22
00:01:43.230 --> 00:01:47.248
単独でページに置いても、何も表示されません。

23
00:01:47.248 --> 00:01:52.271
書き方自体は一行で済みますが、どのファイルの、どんな種類のテキストなのかを、

24
00:01:52.271 --> 00:01:57.294
属性で正しく伝えることが重要です。

25
00:01:57.294 --> 00:02:01.860
次のセクションで、実際のコードを見ていきましょう。

26
00:02:01.860 --> 00:02:04.027
記事の活用事例を見てみましょう。

27
00:02:04.027 --> 00:02:07.414
ビデオタグの中に、トラックタグを一行加えた例です。

28
00:02:07.414 --> 00:02:13.645
カインド属性で字幕であることを示し、エスアールシー属性で字幕ファイルの場所を指定しています。

29
00:02:13.645 --> 00:02:18.047
エスアールクラングは言語で、日本語を表すジェーエーを書き、ラベルには利用者が選ぶときに見える名前として、

30
00:02:18.047 --> 00:02:22.450
日本語字幕と入れています。

31
00:02:22.450 --> 00:02:26.243
最後のデフォルトは、この字幕を既定の候補にする指定です。

32
00:02:26.243 --> 00:02:34.912
試すときは、エイチティーエムエルファイルを保存して再読み込みし、動画の字幕ボタンから日本語字幕を選べるかを確認してみてください。

33
00:02:34.912 --> 00:02:37.505
字幕ファイルの中身も確認しておきます。

34
00:02:37.505 --> 00:02:42.829
トラックタグが読み込むのは、ウェブブイティーティー形式のテキストファイルです。

35
00:02:42.829 --> 00:02:48.016
一行目には必ず、ウェブブイティーティーという文字から始める決まりがあります。

36
00:02:48.016 --> 00:02:54.841
そのあとは、字幕を表示する時刻の範囲と、表示したい文章をセットにして、必要な分だけ繰り返し書きます。

37
00:02:54.841 --> 00:02:58.799
時刻は、開始と終了を矢印のような記号でつないで指定します。

38
00:02:58.799 --> 00:03:03.167
この書式が崩れていると、ファイルがあっても字幕は表示されません。

39
00:03:03.167 --> 00:03:08.900
まずは短い動画で、二つか三つの字幕だけを作って試すと、仕組みがつかみやすくなります。

40
00:03:08.900 --> 00:03:12.290
属性の中でも中心になるのが、カインド属性です。

41
00:03:12.290 --> 00:03:15.974
これは、そのテキストが何なのか、種類を指定します。

42
00:03:15.974 --> 00:03:22.312
キャプションズは、セリフだけでなく、ドアの音や音楽といった音の情報まで含めた字幕です。

43
00:03:22.312 --> 00:03:27.028
サブタイトルズは、主にセリフを別の言語に翻訳した字幕を指します。

44
00:03:27.028 --> 00:03:31.744
そのほか、映像を言葉で説明するディスクリプションズ、区切りを示すチャプターズ、

45
00:03:31.744 --> 00:03:36.460
画面には表示しないデータ用のメタデータがあります。

46
00:03:36.460 --> 00:03:44.124
似ているキャプションズとサブタイトルズを取り違えやすいので、音の説明まで含むかどうかで判断してください。

47
00:03:44.124 --> 00:03:48.840
種類を正しく伝えることで、ブラウザーが適切な方法で表示できます。

48
00:03:48.840 --> 00:03:50.627
主な属性を整理します。

49
00:03:50.627 --> 00:03:55.662
エスアールシーは、読み込むブイティーティーファイルの場所です。

50
00:03:55.662 --> 00:03:59.722
実在するファイルへ、正しいパスを指定してください。

51
00:03:59.722 --> 00:04:06.869
エスアールクラングはトラックの言語で、日本語ならジェーエー、英語ならイーエヌと書きます。

52
00:04:06.869 --> 00:04:11.254
特にサブタイトルズのトラックでは、この指定が必要です。

53
00:04:11.254 --> 00:04:16.451
ラベルは、字幕の選択メニューに表示される、利用者向けの名前です。

54
00:04:16.451 --> 00:04:26.034
デフォルトは、そのトラックを既定の候補にする指定ですが、利用者自身の設定が優先される場合もあると覚えておいてください。

55
00:04:26.034 --> 00:04:29.932
四つの役割を分けて考えると、迷いにくくなります。

56
00:04:29.932 --> 00:04:32.191
共通属性についても確認します。

57
00:04:32.191 --> 00:04:37.312
トラックタグでも、すべての要素で使えるグローバル属性が利用できます。

58
00:04:37.312 --> 00:04:42.207
文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

59
00:04:42.207 --> 00:04:47.102
内容の言語を示すラングなどです。

60
00:04:47.102 --> 00:04:53.277
アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。

61
00:04:53.277 --> 00:04:58.397
また、デフォルトのような真偽属性は、書いてあるかどうかで決まります。

62
00:04:58.397 --> 00:05:04.572
解除したいときは、値で切り替えるのではなく、属性そのものを取り除くのがルールです。

63
00:05:04.572 --> 00:05:09.392
ほかのタグと共通の考え方なので、ここで一緒に覚えておきましょう。

64
00:05:09.392 --> 00:05:12.197
字幕が表示されないときの確認ポイントです。

65
00:05:12.197 --> 00:05:17.673
まず、エスアールシーで指定したパスの先に、ファイルが本当に存在するかを確認します。

66
00:05:17.673 --> 00:05:25.287
次に、ブイティーティーファイルの一行目が正しく書かれているか、時刻と本文の書式が崩れていないかを見直してください。

67
00:05:25.287 --> 00:05:28.092
意外と多いのが、この書式の小さなミスです。

68
00:05:28.092 --> 00:05:34.770
さらに、字幕ファイルを別のドメインから読み込む場合は、配信側のコースと呼ばれる許可設定も関係します。

69
00:05:34.770 --> 00:05:37.976
エラーの場所を一つずつ切り分けることが大切です。

70
00:05:37.976 --> 00:05:43.452
開発者ツールでファイルが読み込めているかを確認しながら、順番に直していきましょう。

71
00:05:43.452 --> 00:05:45.853
ブラウザー互換性を確認します。

72
00:05:45.853 --> 00:05:52.256
記事が参照するエムディーエヌの記録では、トラックタグはクロームが二十三以降、

73
00:05:52.256 --> 00:05:58.659
エッジが十二以降、ファイアフォックスが三十一以降、サファリが六以降に対応しています。

74
00:05:58.659 --> 00:06:03.781
現在の主要なブラウザーでは、長く使える基本的な仕組みの一つです。

75
00:06:03.781 --> 00:06:07.783
ただし、属性ごとに対応開始が異なる場合があります。

76
00:06:07.783 --> 00:06:13.866
たとえばエスアールシー属性は、ファイアフォックスでは五十以降となっています。

77
00:06:13.866 --> 00:06:22.350
この表が示すのは要素本体の対応であり、動画ファイルの形式まで含めた完全な動作を保証するものではありません。

78
00:06:22.350 --> 00:06:26.512
対象とする実機でも、字幕の表示を確認すると安心です。

79
00:06:26.512 --> 00:06:28.409
最後に練習とまとめです。

80
00:06:28.409 --> 00:06:34.576
トラックタグは、動画や音声に字幕などのテキストトラックを関連付けるタグでした。

81
00:06:34.576 --> 00:06:36.631
大切なポイントは三つです。

82
00:06:36.631 --> 00:06:41.849
一つ目は、ビデオタグの内側に置く空要素で、終了タグは書かないこと。

83
00:06:41.849 --> 00:06:48.490
二つ目は、字幕の中身はウェブブイティーティーファイルに書き、一行目の書式を守ること。

84
00:06:48.490 --> 00:06:53.313
三つ目は、カインド、エスアールシー、エスアールクラング、ラベルといった属性で、

85
00:06:53.313 --> 00:06:58.135
種類とファイルと言語を正しく伝えることです。

86
00:06:58.135 --> 00:07:06.674
練習として、短い動画に日本語字幕のファイルを用意し、字幕ボタンから選んで表示されるかを確かめてみてください。

87
00:07:06.674 --> 00:07:08.097
お疲れさまでした。

88
00:07:08.097 --> 00:07:12.524
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。