WEBVTT

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

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

3
00:00:03.815 --> 00:00:07.913
エイチティーエムエルタグ編の九十二本目は、データタグです。

4
00:00:07.913 --> 00:00:14.978
データタグは、画面に表示する文字に対して、プログラムが読み取るための機械用の値を対応させる要素です。

5
00:00:14.978 --> 00:00:20.206
たとえば、利用者にはエイチティーエムエル入門という分かりやすい名前を見せつつ、

6
00:00:20.206 --> 00:00:25.434
裏側ではコースを特定する識別子を持たせておく、といった使い方をします。

7
00:00:25.434 --> 00:00:30.521
見た目を変えるタグではなく、表示とデータをつなぐタグだと考えてください。

8
00:00:30.521 --> 00:00:35.608
地味に見えますが、データの受け渡しを安定させる大切な土台になるタグです。

9
00:00:35.608 --> 00:00:42.532
今回は、バリュー属性の役割、タイムとの違い、コード例、互換性、よくある間違いまで順番に確認します。

10
00:00:42.532 --> 00:00:46.228
まず、機械可読な値という考え方を押さえます。

11
00:00:46.228 --> 00:00:51.941
人が読む表示は、日本語の講座名や商品名など、分かりやすさが大切です。

12
00:00:51.941 --> 00:01:00.846
一方で、プログラムが並び替えや検索、集計を行うときは、表記ゆれのない安定した値のほうが扱いやすくなります。

13
00:01:00.846 --> 00:01:09.246
たとえば、表示がエイチティーエムエル入門でも、全角や半角、略し方の違いで別物と判定されては困ります。

14
00:01:09.246 --> 00:01:13.111
データタグは、この二つを一か所で結び付けます。

15
00:01:13.111 --> 00:01:19.159
見える文字はそのまま人向けに残し、処理用の値は属性の中にそっと持たせる。

16
00:01:19.159 --> 00:01:24.704
この考え方は、後の活用例で講座の識別子を使って具体的に確認します。

17
00:01:24.704 --> 00:01:27.560
それがこのタグの基本的な発想です。

18
00:01:27.560 --> 00:01:30.850
データタグの中心になるのが、バリュー属性です。

19
00:01:30.850 --> 00:01:34.997
バリューには、表示内容に対応する機械処理用の値を書きます。

20
00:01:34.997 --> 00:01:42.292
画面の例では、表示がエイチティーエムエル入門で、バリューがコースエイチティーエムエルという識別子です。

21
00:01:42.292 --> 00:01:44.294
ここで大切な注意があります。

22
00:01:44.294 --> 00:01:50.015
バリューを書いただけでは、その値がフォームで自動的に送信されることはありません。

23
00:01:50.015 --> 00:01:54.449
バリューは、ジャバスクリプトなどが後から読み取るための値です。

24
00:01:54.449 --> 00:01:59.025
送信したい場合は、フォームの仕組みを別に用意する必要があります。

25
00:01:59.025 --> 00:02:02.172
この前提を外すと、動かない原因を見誤ります。

26
00:02:02.172 --> 00:02:04.074
基本の書き方を確認します。

27
00:02:04.074 --> 00:02:09.634
この教材では、開始タグと終了タグを明示し、その間に表示したい文字を書きます。

28
00:02:09.634 --> 00:02:15.925
データタグは文章の途中にも置ける要素なので、段落の中の一部分だけを囲むこともできます。

29
00:02:15.925 --> 00:02:22.216
試すときは、練習用ファイルのボディの適切な位置に写し、保存して再読み込みしてください。

30
00:02:22.216 --> 00:02:25.873
画面の見た目はタグを付ける前と変わらないはずです。

31
00:02:25.873 --> 00:02:27.629
変わらないのが正解です。

32
00:02:27.629 --> 00:02:32.603
囲む範囲は意味のまとまりに合わせ、必要な部分だけに絞るのがコツです。

33
00:02:32.603 --> 00:02:40.065
そのうえで、開発者ツールのエレメンツで、表示文字とバリューが正しく対応しているかを目で確認しましょう。

34
00:02:40.065 --> 00:02:42.502
記事の活用事例を読み解きます。

35
00:02:42.502 --> 00:02:46.564
目的は、表示名と内部の識別値を対応させることです。

36
00:02:46.564 --> 00:02:54.526
講座の一覧では、各項目の表示はエイチティーエムエル入門やシーエスエス入門といった人向けの名前です。

37
00:02:54.526 --> 00:02:59.157
一方、バリューにはコースエイチティーエムエル、コースシーエスエスといった、

38
00:02:59.157 --> 00:03:03.788
システムで一意に決まる識別子を入れます。

39
00:03:03.788 --> 00:03:12.074
こうしておくと、後から表示名の言い回しが変わっても、プログラム側はバリューで同じ講座だと追跡できます。

40
00:03:12.074 --> 00:03:16.949
識別子をそろえておくと、表示名の変更にも強い一覧になります。

41
00:03:16.949 --> 00:03:23.773
申し込み数の集計や、お気に入りの保存など、表示と処理を分けたい場面で力を発揮します。

42
00:03:23.773 --> 00:03:26.516
読み取り方もイメージしておきましょう。

43
00:03:26.516 --> 00:03:32.434
ジャバスクリプトでは、データ要素のバリュープロパティから機械用の値を取得できます。

44
00:03:32.434 --> 00:03:37.776
一方、テキストコンテンツからは、利用者に見えている表示側の文字が取れます。

45
00:03:37.776 --> 00:03:40.518
この二つを使い分けるのがポイントです。

46
00:03:40.518 --> 00:03:44.416
たとえば、講座名をクリックしたときに、表示名ではなく識別子を使って詳細ページを開いたり、

47
00:03:44.416 --> 00:03:48.314
集計したりできます。

48
00:03:48.314 --> 00:03:53.655
なお、ジャバスクリプトが無効な環境では、この読み取り処理自体が動きません。

49
00:03:53.655 --> 00:04:00.151
データタグは値を持たせるだけの要素で、処理まで自動で行うわけではない点に注意してください。

50
00:04:00.151 --> 00:04:04.219
よく比べられるタイムタグとの違いを整理します。

51
00:04:04.219 --> 00:04:11.825
タイムは、日付や時刻専用の要素で、機械用の値はデイトタイム属性に標準の形式で書きます。

52
00:04:11.825 --> 00:04:16.955
開催日や公開日など、日時を表す内容はタイムが適しています。

53
00:04:16.955 --> 00:04:23.323
一方データは、日時に限らない、より一般的な値に対応させるための要素です。

54
00:04:23.323 --> 00:04:27.922
記事も、日時ならタイムが適していると明言しています。

55
00:04:27.922 --> 00:04:35.351
商品コードや講座の識別子のように、日時ではない値ならデータ、という選び方が基本です。

56
00:04:35.351 --> 00:04:43.841
逆に、日時をデータに入れてしまうと、検索エンジンや支援技術に日時として正しく伝わらなくなります。

57
00:04:43.841 --> 00:04:47.855
共通属性と、名前の似た仕組みとの違いも確認します。

58
00:04:47.855 --> 00:04:54.439
データ要素でも、アイディー、クラス、ラングといった共通属性は必要に応じて使えます。

59
00:04:54.439 --> 00:05:00.059
クラスはスタイルや選択のため、ラングは内容の言語を示すために使います。

60
00:05:00.059 --> 00:05:04.796
一方、データスター属性は、要素に独自のデータを付けるためのまったく別の仕組みで、

61
00:05:04.796 --> 00:05:09.533
データ要素そのものとは関係ありません。

62
00:05:09.533 --> 00:05:14.189
名前にデータが付くので混同しがちですが、使い分けましょう。

63
00:05:14.189 --> 00:05:20.131
また、バリューもデータスター属性も、ページのソースを見れば誰でも読めます。

64
00:05:20.131 --> 00:05:25.269
パスワードなどの秘密情報を置く場所ではない点も、共通の注意です。

65
00:05:25.269 --> 00:05:27.642
ブラウザー互換性を確認します。

66
00:05:27.642 --> 00:05:34.206
記事が紹介するエムディーエヌのデータでは、データ要素本体は、クロームが六十二以降、

67
00:05:34.206 --> 00:05:40.770
エッジが十四以降、ファイアフォックスが二十二以降、サファリが十以降に対応しています。

68
00:05:40.770 --> 00:05:44.882
中心となるバリュー属性の対応開始版も、同じ数字です。

69
00:05:44.882 --> 00:05:49.627
現在の主要ブラウザーでは問題なく使えると考えてよいでしょう。

70
00:05:49.627 --> 00:05:58.326
ただし、この表は要素本体の対応を示すもので、読み取り処理やほかの機能まで同じ動作を保証するものではありません。

71
00:05:58.326 --> 00:06:04.811
対応表は記事の確認時点の記録なので、新規導入時は最新情報もあわせて確認しましょう。

72
00:06:04.811 --> 00:06:11.929
古い端末を対象に含める場合は、対象環境で実際に表示と読み取りを試してから採用してください。

73
00:06:11.929 --> 00:06:14.024
よくある間違いを三つ挙げます。

74
00:06:14.024 --> 00:06:16.818
一つ目は、バリューを書き忘れることです。

75
00:06:16.818 --> 00:06:22.824
バリューがなければ、ただ文字を囲んだだけで、機械用の値を対応させる目的が果たせません。

76
00:06:22.824 --> 00:06:25.477
二つ目は、日時に使ってしまうことです。

77
00:06:25.477 --> 00:06:29.109
日付や時刻にはタイムとデイトタイムを使ってください。

78
00:06:29.109 --> 00:06:33.997
三つ目は、データタグを付けたら見た目や動作が変わると期待することです。

79
00:06:33.997 --> 00:06:37.070
表示は変わらず、送信も自動では行われません。

80
00:06:37.070 --> 00:06:42.099
小さな画面幅でも表示が欠けず、対応関係が読み取れるかも確認してください。

81
00:06:42.099 --> 00:06:46.708
あわせて、表示側の文字とバリューの対応がずれていないか、たとえば別の講座の識別子を付けてしまっていないかも、

82
00:06:46.708 --> 00:06:51.317
公開前に見直しましょう。

83
00:06:51.317 --> 00:06:52.364
まとめです。

84
00:06:52.364 --> 00:06:59.695
データタグは、人が読む表示内容に、機械が処理するためのバリューを対応させる要素です。

85
00:06:59.695 --> 00:07:03.011
最後にチェックリストで確認しましょう。

86
00:07:03.011 --> 00:07:08.072
まず、バリューに表記ゆれのない安定した値が書かれているか。

87
00:07:08.072 --> 00:07:11.738
次に、内容が日時ならタイムを選べているか。

88
00:07:11.738 --> 00:07:18.894
そして、ジャバスクリプトで読み取るなど、値を実際に活用する処理が用意されているか。

89
00:07:18.894 --> 00:07:25.875
この三点がそろえば、表示とデータがきれいに分かれた、扱いやすいページになります。

90
00:07:25.875 --> 00:07:29.017
これでデータタグの解説を終わります。

91
00:07:29.017 --> 00:07:33.729
ぜひ、講座一覧や商品リストで実際に試してみてください。