WEBVTT

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

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

3
00:00:04.542 --> 00:00:08.759
HTMLタグ編の四十六本目は、オブジェクトタグです。

4
00:00:08.759 --> 00:00:14.355
オブジェクトは、ピー・ディー・エフや画像、別のエイチティーエムエルページなど、

5
00:00:14.355 --> 00:00:19.950
外部のファイルをそのままページの中に埋め込むためのタグです。

6
00:00:19.950 --> 00:00:27.736
最大の特徴は、開始タグと終了タグの内側に、表示できなかったときの代替内容を書いておけることです。

7
00:00:27.736 --> 00:00:32.602
今回は基本の書き方から、データ属性とタイプ属性、サイズの指定、ほかの埋め込みタグとの使い分けまで、

8
00:00:32.602 --> 00:00:37.468
順に確認していきます。

9
00:00:37.468 --> 00:00:40.117
どんな場面で使うのかを整理します。

10
00:00:40.117 --> 00:00:48.843
代表例は、ピー・ディー・エフの資料を、ダウンロードさせるだけでなくページの中でそのまま読めるようにする場面です。

11
00:00:48.843 --> 00:00:56.945
ほかにも、エスブイジーの図版や、別のエイチティーエムエルファイルを部品のように埋め込む使い方ができます。

12
00:00:56.945 --> 00:01:01.308
ただし、何でもオブジェクトで済ませるわけではありません。

13
00:01:01.308 --> 00:01:06.606
画像にはイメージタグ、動画にはビデオタグという専用のタグがあります。

14
00:01:06.606 --> 00:01:11.047
専用タグがない形式や、汎用的に外部リソースを差し込みたいときにオブジェクトを選ぶ、

15
00:01:11.047 --> 00:01:15.488
という位置づけで覚えてください。

16
00:01:15.488 --> 00:01:17.556
基本の書き方を確認します。

17
00:01:17.556 --> 00:01:21.851
オブジェクトには、開始タグと終了タグの両方が必要です。

18
00:01:21.851 --> 00:01:27.578
開始タグのデータ属性に、埋め込みたいファイルのユーアールエルを書きます。

19
00:01:27.578 --> 00:01:33.146
画面の例では、ガイドというピー・ディー・エフファイルを指定しています。

20
00:01:33.146 --> 00:01:40.941
タイプ属性には、そのファイルの種類を示すマイムタイプを書き、幅と高さで表示領域の大きさを決めます。

21
00:01:40.941 --> 00:01:46.986
そして終了タグまでの内側に、もし表示できなかったときに見せる文章を置きます。

22
00:01:46.986 --> 00:01:53.508
この三点セット、ファイルの指定、種類の指定、代替内容が、オブジェクトの基本形です。

23
00:01:53.508 --> 00:01:56.212
中心になる二つの属性を詳しく見ます。

24
00:01:56.212 --> 00:01:57.715
まずデータ属性です。

25
00:01:57.715 --> 00:02:04.325
これはオブジェクトで埋め込むリソースのユーアールエルを指定するもので、必ず書く属性です。

26
00:02:04.325 --> 00:02:10.636
ここで初心者が混同しやすいのが、アプリ独自の値を入れるデータスター属性との違いです。

27
00:02:10.636 --> 00:02:14.993
名前は似ていますが、まったくの別物なので注意してください。

28
00:02:14.993 --> 00:02:16.495
次にタイプ属性です。

29
00:02:16.495 --> 00:02:22.054
埋め込むファイルのマイムタイプ、つまりデータの種類をブラウザーに伝えます。

30
00:02:22.054 --> 00:02:31.970
ピー・ディー・エフならアプリケーションピー・ディー・エフ、エスブイジーならイメージエスブイジープラスエックスエムエルという具合です。

31
00:02:31.970 --> 00:02:36.928
種類が正しく伝わると、ブラウザーは適切な方法で表示を試みられます。

32
00:02:36.928 --> 00:02:39.452
サイズの指定について確認します。

33
00:02:39.452 --> 00:02:46.549
ウィドゥス属性が表示領域の幅、ハイト属性が高さで、どちらもピクセル単位の数値で指定します。

34
00:02:46.549 --> 00:02:53.174
ピー・ディー・エフのビューアーのように、埋め込んだ内容にはある程度の広さが必要です。

35
00:02:53.174 --> 00:02:58.221
小さすぎると読みにくくなり、大きすぎると周りの文章を圧迫します。

36
00:02:58.221 --> 00:03:03.111
ポイントは、幅と高さの比率を元ファイルの形に近づけることです。

37
00:03:03.111 --> 00:03:08.316
比率が合っていないと、余白が目立ったり内容が窮屈になったりします。

38
00:03:08.316 --> 00:03:17.464
また、読み込み前から領域の大きさが分かっていると、ページのレイアウトが途中でガタッとずれる現象も防ぎやすくなります。

39
00:03:17.464 --> 00:03:23.300
スマートフォンのような細い画面でもはみ出さないか、あわせて確認しましょう。

40
00:03:23.300 --> 00:03:26.972
オブジェクトならではの仕組み、代替内容を解説します。

41
00:03:26.972 --> 00:03:31.632
ブラウザーがファイルを読み込めなかったり、対応する表示方法がなかったりすると、

42
00:03:31.632 --> 00:03:36.293
オブジェクトの内側に書いた内容が代わりに表示されます。

43
00:03:36.293 --> 00:03:42.225
記事の活用例でも使われている定番の形は、ピー・ディー・エフへのリンクを置くことです。

44
00:03:42.225 --> 00:03:48.015
ページ内では読めなくても、リンクからファイルを開いたり保存したりする道が残ります。

45
00:03:48.015 --> 00:03:54.935
逆に、内側を空っぽにしてしまうと、失敗したときに利用者は何もできない空白だけを見ることになります。

46
00:03:54.935 --> 00:04:01.008
埋め込みは必ず成功するとは限らない、という前提で、代替内容は必ず用意しておきましょう。

47
00:04:01.008 --> 00:04:03.912
似た役割のタグとの違いを整理します。

48
00:04:03.912 --> 00:04:12.461
画像はイメージタグ、動画はビデオタグ、音声はオーディオタグが専用で、再生ボタンなどの機能もそろっています。

49
00:04:12.461 --> 00:04:18.430
別のウェブページを枠として表示する目的なら、アイフレームの方が一般的です。

50
00:04:18.430 --> 00:04:25.044
エンベッドタグも外部内容を埋め込みますが、内側に代替内容を書く仕組みがありません。

51
00:04:25.044 --> 00:04:31.980
その点オブジェクトは、汎用的に埋め込めて、失敗時の代替まで面倒を見られるのが強みです。

52
00:04:31.980 --> 00:04:39.562
ただし裏を返せば、専用タグがある形式では、それぞれの専用タグの方が設定が簡単で機能も豊富です。

53
00:04:39.562 --> 00:04:46.660
迷ったら、まず専用タグがないかを探し、なければオブジェクト、と順に考えるとよいでしょう。

54
00:04:46.660 --> 00:04:49.501
補助的な二つの属性も押さえておきます。

55
00:04:49.501 --> 00:04:53.987
ネーム属性は、そのオブジェクトに名前を付けるためのものです。

56
00:04:53.987 --> 00:04:58.473
フォームの部品では送信時のキーになるなど、要素によって役割が変わりますが、

57
00:04:58.473 --> 00:05:02.959
オブジェクトでは識別や参照のために使われます。

58
00:05:02.959 --> 00:05:08.641
もう一つのフォーム属性は、関連付けるフォーム要素の、アイディーを指定します。

59
00:05:08.641 --> 00:05:12.081
名前ではなくアイディーを書く点がポイントです。

60
00:05:12.081 --> 00:05:20.006
正直なところ、ピー・ディー・エフや図版をただ埋め込むだけの使い方では、この二つはほとんど出番がありません。

61
00:05:20.006 --> 00:05:27.632
基本のデータ、タイプ、幅、高さの四つを先に身につけ、名前などが必要になった場面で思い出せれば十分です。

62
00:05:27.632 --> 00:05:30.075
よくある間違いを三つ確認します。

63
00:05:30.075 --> 00:05:34.808
一つ目は、タイプ属性と実際のファイルの種類が食い違うことです。

64
00:05:34.808 --> 00:05:39.541
種類の情報が間違っていると、ブラウザーが正しく表示できません。

65
00:05:39.541 --> 00:05:42.442
二つ目は、代替内容を書かないことです。

66
00:05:42.442 --> 00:05:48.549
前のセクションで見たとおり、失敗したときに利用者が行き止まりになってしまいます。

67
00:05:48.549 --> 00:05:53.129
三つ目は、昔のプラグインを必要とする古い形式に頼ることです。

68
00:05:53.129 --> 00:05:58.625
現在のブラウザーはプラグイン方式をほぼ支えていないため、ピー・ディー・エフやエスブイジーなど、

69
00:05:58.625 --> 00:06:04.121
ブラウザーが標準で扱える形式を選ぶことが大切です。

70
00:06:04.121 --> 00:06:08.854
加えて、外部ファイルのパスが間違っていれば当然表示されません。

71
00:06:08.854 --> 00:06:13.740
表示されないときは、まずファイルの場所と名前を確認してください。

72
00:06:13.740 --> 00:06:15.936
ブラウザー互換性を確認します。

73
00:06:15.936 --> 00:06:22.669
記事が参照するエムディーエヌの記録では、オブジェクトタグはクロームが一以降、

74
00:06:22.669 --> 00:06:29.403
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで最初期から対応しています。

75
00:06:29.403 --> 00:06:36.136
今回扱ったデータ、タイプ、幅、高さ、ネーム、フォームの各属性も、同じく最初期からの対応です。

76
00:06:36.136 --> 00:06:38.185
ただし注意点が一つあります。

77
00:06:38.185 --> 00:06:44.480
タグ自体が使えても、埋め込むファイル形式の表示はブラウザーや端末の環境に左右されます。

78
00:06:44.480 --> 00:06:49.164
特にピー・ディー・エフのページ内表示は環境差が出やすいので、対象の端末で実際に開いて確認し、

79
00:06:49.164 --> 00:06:53.848
代替のリンクも必ず用意してください。

80
00:06:53.848 --> 00:06:55.291
最後にまとめです。

81
00:06:55.291 --> 00:06:59.139
オブジェクトタグは、ピー・ディー・エフなどの外部リソースをページに埋め込む、

82
00:06:59.139 --> 00:07:02.987
汎用的なタグでした。

83
00:07:02.987 --> 00:07:04.590
ポイントは三つです。

84
00:07:04.590 --> 00:07:08.999
一つ目、データ属性にファイルのユーアールエル、タイプ属性にマイムタイプを書き、

85
00:07:08.999 --> 00:07:13.408
幅と高さで表示領域を決めること。

86
00:07:13.408 --> 00:07:20.623
二つ目、内側には表示できないときの代替内容を必ず置き、リンクなどで次の手段を用意すること。

87
00:07:20.623 --> 00:07:26.555
三つ目、画像や動画など専用タグがある形式では、専用タグを優先することです。

88
00:07:26.555 --> 00:07:35.854
練習として、手元のピー・ディー・エフを一つ埋め込み、わざとファイル名を間違えて代替内容が出るか確かめてみてください。

89
00:07:35.854 --> 00:07:39.542
成功と失敗の両方を体験すれば、理解は十分です。

90
00:07:39.542 --> 00:07:40.985
お疲れさまでした。

91
00:07:40.985 --> 00:07:42.428
次回もお楽しみに。