WEBVTT

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

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

3
00:00:04.413 --> 00:00:08.038
HTMLタグ編の二十四本目は、ソースタグです。

4
00:00:08.038 --> 00:00:13.396
ソースは単体で何かを表示するタグではなく、ピクチャー、オーディオ、ビデオといった親要素の中で、

5
00:00:13.396 --> 00:00:18.755
候補となるファイルを並べるためのタグです。

6
00:00:18.755 --> 00:00:26.477
ブラウザーは上から順に候補を確認し、自分が扱える形式や条件に合うものを選んで再生や表示を行います。

7
00:00:26.477 --> 00:00:31.363
今回は、親によって書き方が変わる点、記事の音声の例、ピクチャーでの使い方、

8
00:00:31.363 --> 00:00:36.249
注意すべき順番まで、初心者向けに順番に解説します。

9
00:00:36.249 --> 00:00:42.868
候補を並べるという考え方を押さえると、メディアの載せ方がぐっと理解しやすくなります。

10
00:00:42.868 --> 00:00:46.570
まず、どんな場面で使うかを整理しましょう。

11
00:00:46.570 --> 00:00:52.917
一つ目は、同じ音声や動画を、形式の違うファイルで複数用意したいときです。

12
00:00:52.917 --> 00:00:57.413
ブラウザーによって対応する形式が少しずつ違うため、候補を二つ並べておくと、

13
00:00:57.413 --> 00:01:01.909
再生できない人を減らせます。

14
00:01:01.909 --> 00:01:06.845
二つ目は、画面の幅によって見せる画像を変えたいときです。

15
00:01:06.845 --> 00:01:13.368
スマホでは縦長の画像、パソコンでは横長の画像、といった切り替えができます。

16
00:01:13.368 --> 00:01:18.481
三つ目は、新しい画像形式と従来の形式を一緒に書く場面です。

17
00:01:18.481 --> 00:01:26.062
対応ブラウザーには軽い新しい形式、未対応なら従来形式、という出し分けが可能になります。

18
00:01:26.062 --> 00:01:31.880
いずれも、利用者の環境に合わせて最適な一つを選ばせるのが目的です。

19
00:01:31.880 --> 00:01:33.169
基本の書き方です。

20
00:01:33.169 --> 00:01:38.898
ソースは空要素なので、終了タグは書きませんし、中に文字を入れることもありません。

21
00:01:38.898 --> 00:01:43.768
必ずピクチャー、オーディオ、ビデオのいずれかの子要素として置きます。

22
00:01:43.768 --> 00:01:45.201
大切なのは順番です。

23
00:01:45.201 --> 00:01:50.787
ブラウザーはソースを書かれた順に読み、上から順に、使えるかどうかを判定します。

24
00:01:50.787 --> 00:01:55.943
最初に合った候補が選ばれるため、優先したい候補ほど上に書くのが基本です。

25
00:01:55.943 --> 00:01:59.524
コード例の上段はビデオ、下段はピクチャーの例です。

26
00:01:59.524 --> 00:02:05.683
ピクチャーでは最後に必ずイメージ要素を置く決まりがある点も、ここで覚えておきましょう。

27
00:02:05.683 --> 00:02:11.412
ファイル自体は別途用意が必要で、タグを書くだけで自動で作られることはありません。

28
00:02:11.412 --> 00:02:13.958
記事の活用事例を見てみましょう。

29
00:02:13.958 --> 00:02:17.777
オーディオ要素の中に、ソースを二つ並べた例です。

30
00:02:17.777 --> 00:02:22.232
一つ目はウェブエム形式、二つ目はエムピースリー形式です。

31
00:02:22.232 --> 00:02:29.711
ブラウザーはまず上のウェブエムを再生できるか確認し、できなければ次のエムピースリーへ進みます。

32
00:02:29.711 --> 00:02:34.166
タイプ属性に形式を正しく書いておくと、ブラウザーはファイルを読み込む前に判定できるため、

33
00:02:34.166 --> 00:02:38.621
無駄な通信を減らせます。

34
00:02:38.621 --> 00:02:43.713
最後のリンクは、どちらの形式も再生できない環境向けの逃げ道です。

35
00:02:43.713 --> 00:02:48.487
候補を並べるだけでなく、最後までたどり着けない人への配慮まで含めて一つの設計だと考えると、

36
00:02:48.487 --> 00:02:53.260
実務でも応用しやすくなります。

37
00:02:53.260 --> 00:02:56.920
練習ファイルに写して再生確認をしてみましょう。

38
00:02:56.920 --> 00:03:00.394
ビデオでの使い方も、考え方は音声と全く同じです。

39
00:03:00.394 --> 00:03:07.197
ビデオ要素の中にソースを並べ、エスアールシーでファイルを指定し、タイプで動画の形式を示します。

40
00:03:07.197 --> 00:03:11.829
コード例ではウェブエムを先に、エムピーフォーを後に置いています。

41
00:03:11.829 --> 00:03:16.099
なお、再生ボタンのコントロール、サムネイル画像のポスター、字幕のトラックなどは、

42
00:03:16.099 --> 00:03:20.370
ソースではなく親のビデオ側の役割です。

43
00:03:20.370 --> 00:03:25.291
ソースの仕事はあくまで、どのファイルを使うかの候補提示に絞られます。

44
00:03:25.291 --> 00:03:29.561
役割分担をはっきりさせておくと、動画が再生できないときに、ファイル形式の問題か、

45
00:03:29.561 --> 00:03:33.831
設定の問題かを切り分けやすくなります。

46
00:03:33.831 --> 00:03:39.332
対応形式はブラウザーごとに異なるため、主要な候補を二つ用意するのが無難です。

47
00:03:39.332 --> 00:03:42.403
ピクチャーでの使い方は少しだけ変わります。

48
00:03:42.403 --> 00:03:49.570
ピクチャーの中では、エスアールシーではなく、エスアールシーセットという属性で画像候補を指定します。

49
00:03:49.570 --> 00:03:53.665
メディア属性で、画面幅などの条件を付けることもできます。

50
00:03:53.665 --> 00:03:58.492
コード例は画像形式で出し分ける例で、新しい形式から順に試し、最後のイメージ要素のジェイペグが、

51
00:03:58.492 --> 00:04:03.318
どれも使えない場合の受け皿になります。

52
00:04:03.318 --> 00:04:06.243
この最後のイメージ要素は省略できません。

53
00:04:06.243 --> 00:04:13.848
実際に表示されるのはイメージ要素であり、ソースはその画像の差し替え候補を伝える役割だと理解してください。

54
00:04:13.848 --> 00:04:17.797
オルト、つまり代替テキストもイメージ要素側に書きます。

55
00:04:17.797 --> 00:04:21.600
この親による使い分けが、このタグ最大のポイントです。

56
00:04:21.600 --> 00:04:25.343
ここで、最も間違えやすい使い分けを整理します。

57
00:04:25.343 --> 00:04:33.318
オーディオとビデオの中ではエスアールシーを使い、ピクチャーの中ではエスアールシーセットを使います。

58
00:04:33.318 --> 00:04:37.874
同じソースタグでも、親によって主役の属性が変わるのです。

59
00:04:37.874 --> 00:04:43.082
エスアールシーセットでは、ファイル名だけでなく、画像の幅を示す数字や解像度を併記して、

60
00:04:43.082 --> 00:04:48.290
複数の候補をカンマで並べることもできます。

61
00:04:48.290 --> 00:04:56.590
その際、サイズズ属性で、実際に表示されるおおよその幅を伝えると、ブラウザーがより適切な候補を選べます。

62
00:04:56.590 --> 00:05:01.309
親に合わない属性を書いても候補として扱われないことがあるため、書き始める前に、

63
00:05:01.309 --> 00:05:06.029
親がどれかを確認する癖を付けましょう。

64
00:05:06.029 --> 00:05:09.772
この確認一つで、多くの表示トラブルを防げます。

65
00:05:09.772 --> 00:05:11.533
主な属性を確認します。

66
00:05:11.533 --> 00:05:18.736
タイプはファイルの種類を示す属性で、拡張子だけでなく実際の形式と一致させる必要があります。

67
00:05:18.736 --> 00:05:22.737
メディアは、画面幅などの条件を指定し、その条件を満たすときだけ候補になる、

68
00:05:22.737 --> 00:05:26.739
という絞り込みに使います。

69
00:05:26.739 --> 00:05:35.383
幅と高さは、主にピクチャー側で画像候補の寸法を伝えるために使われ、読み込み前に場所を確保する助けになります。

70
00:05:35.383 --> 00:05:39.944
そのほかに、アイディー、クラス、ラング、データ属性といった共通属性も使えますが、

71
00:05:39.944 --> 00:05:44.506
ソースでは必須のものはありません。

72
00:05:44.506 --> 00:05:48.908
属性は多く付けることが目的ではないので、形式、条件、寸法という三つの観点から、

73
00:05:48.908 --> 00:05:53.310
必要なものだけを選んでください。

74
00:05:53.310 --> 00:05:58.112
同名の属性が別の要素では違う意味になる点にも注意しましょう。

75
00:05:58.112 --> 00:06:01.188
注意点と、よくある間違いを確認します。

76
00:06:01.188 --> 00:06:05.721
一つ目は、タイプ属性と実際のファイル形式の食い違いです。

77
00:06:05.721 --> 00:06:11.711
拡張子を変えただけのファイルを別形式として書いても、正しく再生されません。

78
00:06:11.711 --> 00:06:13.654
二つ目は候補の順番です。

79
00:06:13.654 --> 00:06:21.749
下に書いた候補は、上の候補が使える限り選ばれないため、軽い新形式など優先したいものほど上に置きます。

80
00:06:21.749 --> 00:06:24.015
三つ目は、受け皿の用意です。

81
00:06:24.015 --> 00:06:32.595
ピクチャーでは最後のイメージ要素を忘れずに、音声や動画では再生できない人向けのリンクや説明を置きましょう。

82
00:06:32.595 --> 00:06:34.700
四つ目はパスの間違いです。

83
00:06:34.700 --> 00:06:39.881
存在しないファイルへの指定は、候補がないのと同じ結果になります。

84
00:06:39.881 --> 00:06:47.004
公開前に、狭い画面と広い画面の両方で、意図したファイルが選ばれているか確認してください。

85
00:06:47.004 --> 00:06:49.359
ブラウザー互換性を確認します。

86
00:06:49.359 --> 00:06:55.638
記事が参照するエムディーエヌの記録では、ソース本体は、クロームが三以降、

87
00:06:55.638 --> 00:07:01.917
エッジが十二以降、ファイアフォックスが三・五以降、サファリが三・一以降で対応しています。

88
00:07:01.917 --> 00:07:04.900
とても古くから使える要素だと言えます。

89
00:07:04.900 --> 00:07:10.473
一方で属性ごとに差があり、エスアールシーセットとサイズズは、クローム三十八以降、

90
00:07:10.473 --> 00:07:16.046
サファリ九・一以降など、本体より新しい対応開始になっています。

91
00:07:16.046 --> 00:07:20.127
幅と高さも、クローム九十以降と比較的新しい属性です。

92
00:07:20.127 --> 00:07:27.348
また、要素が使えても、肝心の音声や画像の形式自体にブラウザーが対応していない場合があります。

93
00:07:27.348 --> 00:07:31.744
形式ごとの対応は別に確認し、実機でも試すことが大切です。

94
00:07:31.744 --> 00:07:33.709
最後に練習とまとめです。

95
00:07:33.709 --> 00:07:40.912
ソースは、ピクチャー、オーディオ、ビデオの中で、表示や再生の候補を提示する空要素でした。

96
00:07:40.912 --> 00:07:43.040
大切なポイントは三つです。

97
00:07:43.040 --> 00:07:50.734
一つ目は、オーディオとビデオではエスアールシー、ピクチャーではエスアールシーセットを使うこと。

98
00:07:50.734 --> 00:07:56.137
二つ目は、タイプで形式を正しく伝え、優先する候補から順に書くこと。

99
00:07:56.137 --> 00:08:03.668
三つ目は、どの候補も使えない人向けに、イメージ要素やリンクといった受け皿を用意することです。

100
00:08:03.668 --> 00:08:14.472
練習として、手元の音声や画像を二つの形式で用意し、ソースを二つ並べて、ブラウザーがどちらを選ぶか開発者ツールで確認してみてください。

101
00:08:14.472 --> 00:08:15.946
お疲れさまでした。

102
00:08:15.946 --> 00:08:19.220
次回もHTMLタグの解説を続けましょう。