WEBVTT

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

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

3
00:00:04.513 --> 00:00:08.382
HTMLタグ編の二十六本目は、スロットタグです。

4
00:00:08.382 --> 00:00:15.796
スロットは、再利用できる部品の中に、外から渡された文章や要素をはめ込むための差し込み口です。

5
00:00:15.796 --> 00:00:20.793
主にシャドウドムという、部品専用の独立した領域の中で使います。

6
00:00:20.793 --> 00:00:28.530
たとえばカード部品の見出しや本文を、使う側が自由に入れ替えられるのは、この仕組みがあるからです。

7
00:00:28.530 --> 00:00:32.801
今回は、シャドウドムとの関係、名前付きスロットの使い方、コード例と注意点を、

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

9
00:00:37.073 --> 00:00:40.780
少し応用的なタグですが、考え方はシンプルです。

10
00:00:40.780 --> 00:00:44.427
まず、どんな場面で使うかをイメージしましょう。

11
00:00:44.427 --> 00:00:49.819
たとえば、同じデザインのカードを何枚も並べるサイトを考えてください。

12
00:00:49.819 --> 00:00:55.369
枠や余白、文字の大きさは共通でも、見出しや本文はカードごとに違います。

13
00:00:55.369 --> 00:00:59.889
こうした再利用部品を作るとき、部品の作り手が枠組みを用意し、使う側が中身を差し込む、

14
00:00:59.889 --> 00:01:04.408
という分担ができると便利です。

15
00:01:04.408 --> 00:01:06.787
その差し込み口がスロットです。

16
00:01:06.787 --> 00:01:14.240
ダイアログのタイトルと本文、ボタンのラベルなど、部品の一部だけを差し替えたい場面で活躍します。

17
00:01:14.240 --> 00:01:22.328
普通の段落や見出しだけで作るページでは出番は少なく、部品を作る段階で必要になるタグだと覚えてください。

18
00:01:22.328 --> 00:01:25.772
スロットを理解する鍵が、シャドウドムです。

19
00:01:25.772 --> 00:01:31.265
ウェブコンポーネンツでは、部品の内部構造をシャドウドムという独立した領域に置き、

20
00:01:31.265 --> 00:01:36.759
外側のシーエスエスやスクリプトと干渉しにくくできます。

21
00:01:36.759 --> 00:01:42.662
一方、利用者が普通に書くエイチティーエムエルは、ライトドムと呼ばれます。

22
00:01:42.662 --> 00:01:49.550
問題は、ライトドムに書いた文章を、どうやってシャドウドムの中の部品に表示するかです。

23
00:01:49.550 --> 00:01:52.173
そこでスロットが橋渡しをします。

24
00:01:52.173 --> 00:02:00.045
シャドウドム側にスロットを置いておくと、ライトドム側の要素がその位置に差し込まれて表示されます。

25
00:02:00.045 --> 00:02:06.276
シャドウドムの外へスロットだけを置いても、この働きにはならない点が重要です。

26
00:02:06.276 --> 00:02:07.596
基本の書き方です。

27
00:02:07.596 --> 00:02:13.608
スロットには開始タグと終了タグがあり、その間には後で説明する代替の内容を書けます。

28
00:02:13.608 --> 00:02:20.207
配置場所は、部品のシャドウドム側、つまりジャバスクリプトで組み立てるテンプレートの中です。

29
00:02:20.207 --> 00:02:26.952
利用する側は、カスタム要素の開始タグと終了タグの間に、表示したい文章や要素を普通に書きます。

30
00:02:26.952 --> 00:02:31.791
すると、名前のないスロットには、その内容がまとめて差し込まれます。

31
00:02:31.791 --> 00:02:39.857
ファイルを用意するだけでは動かず、部品を定義するスクリプトとセットで使うタグだという点も押さえておきましょう。

32
00:02:39.857 --> 00:02:43.816
構造自体は、差し込み口と差し込む中身、の二つだけです。

33
00:02:43.816 --> 00:02:48.349
部品に差し込み口が複数ある場合は、ネーム属性で区別します。

34
00:02:48.349 --> 00:02:52.336
部品側では、見出し用のスロットにタイトルという名前を付ける、というように、

35
00:02:52.336 --> 00:02:56.322
各スロットへ名前を付けます。

36
00:02:56.322 --> 00:03:01.950
利用側では、渡したい要素にスロット属性を書き、行き先の名前を指定します。

37
00:03:01.950 --> 00:03:06.796
両方の名前が一致した要素だけが、そのスロットに差し込まれます。

38
00:03:06.796 --> 00:03:12.893
たとえばカードの見出しと本文を別々に渡したいとき、この振り分けが欠かせません。

39
00:03:12.893 --> 00:03:19.146
名前に決まった候補があるわけではなく、部品の作り手が分かりやすい名前を決めます。

40
00:03:19.146 --> 00:03:25.868
名前のつづりを一文字でも間違えると差し込まれないので、対応関係を丁寧に確認しましょう。

41
00:03:25.868 --> 00:03:28.290
記事の活用事例を見てみましょう。

42
00:03:28.290 --> 00:03:33.513
利用側のコードでは、マイハイフンカードというカスタム要素の中に、タイトルというスロット属性を付けたスパン要素と、

43
00:03:33.513 --> 00:03:38.736
普通の段落を書いています。

44
00:03:38.736 --> 00:03:43.202
スパンの中身は見出し用のスロットへ、スロット属性のない段落は名前のないデフォルトのスロットへ、

45
00:03:43.202 --> 00:03:47.669
それぞれ差し込まれます。

46
00:03:47.669 --> 00:03:52.816
練習では、エイチティーエムエルのファイルにこの利用側のコードと、部品を定義するスクリプトを写して保存し、

47
00:03:52.816 --> 00:03:57.963
再読み込みして確認してください。

48
00:03:57.963 --> 00:04:04.776
開発者ツールのエレメンツで、内容が意図した位置に表示されているか確かめるのがポイントです。

49
00:04:04.776 --> 00:04:07.143
部品側のスクリプトも簡単に確認します。

50
00:04:07.143 --> 00:04:12.748
カスタムエレメンツ、ドット、デファインで、マイハイフンカードという新しい要素を登録します。

51
00:04:12.748 --> 00:04:16.859
その中でアタッチシャドウを呼び、部品専用のシャドウドムを作ります。

52
00:04:16.859 --> 00:04:21.593
そして、その内部のエイチティーエムエルとして、見出しの中にタイトルという名前付きスロットを置き、

53
00:04:21.593 --> 00:04:26.327
続けて名前のないスロットを置く、という組み立てをします。

54
00:04:26.327 --> 00:04:27.821
記事の例も同じ流れです。

55
00:04:27.821 --> 00:04:29.565
ここで大切な注意があります。

56
00:04:29.565 --> 00:04:33.801
例のインナーエイチティーエムエルは、開発者が決めた固定の文字列です。

57
00:04:33.801 --> 00:04:38.036
外部から受け取った入力を、そのまま文字列として連結してはいけません。

58
00:04:38.036 --> 00:04:41.524
安全のため、入力を差し込む設計とは分けて考えてください。

59
00:04:41.524 --> 00:04:49.445
スロットの開始タグと終了タグの間に書いた内容は、フォールバック、つまり代替表示になります。

60
00:04:49.445 --> 00:04:55.253
利用側から何も差し込まれなかった場合だけ、その中身が表示されます。

61
00:04:55.253 --> 00:05:01.502
記事の例では、タイトル用スロットの中に教材という言葉が書かれていて、タイトルが渡されなければ教材と表示され、

62
00:05:01.502 --> 00:05:07.750
渡されればそちらに置き換わります。

63
00:05:07.750 --> 00:05:13.911
本文用のスロットにも、本文はありません、といった案内を入れておけます。

64
00:05:13.911 --> 00:05:20.071
空っぽの部品が表示されて利用者を困惑させないための、優しい仕組みです。

65
00:05:20.071 --> 00:05:27.992
部品を作るときは、差し込まれない場合の姿まで設計しておくと、再利用しやすい部品になります。

66
00:05:27.992 --> 00:05:31.255
注意点と、よくある間違いをまとめます。

67
00:05:31.255 --> 00:05:33.487
一つ目は名前の不一致です。

68
00:05:33.487 --> 00:05:37.951
部品側のネームと利用側のスロット属性が少しでも違うと、要素はどこにも差し込まれず、

69
00:05:37.951 --> 00:05:42.416
表示されなくなります。

70
00:05:42.416 --> 00:05:44.992
二つ目は置き場所の間違いです。

71
00:05:44.992 --> 00:05:52.547
スロットをシャドウドムの外、普通の文書の中に置くだけでは、差し込み口としては働きません。

72
00:05:52.547 --> 00:05:55.981
三つ目は、テンプレートタグとの混同です。

73
00:05:55.981 --> 00:06:02.506
テンプレートは表示されないひな型を置く仕組みで、スロットとは役割が違います。

74
00:06:02.506 --> 00:06:07.486
うまく表示されないときは、開発者ツールでシャドウルートが作られているか、

75
00:06:07.486 --> 00:06:12.465
名前が一致しているかを順に確かめてください。

76
00:06:12.465 --> 00:06:18.132
三百二十ピクセル程度の画面でも崩れないか、あわせて確認しましょう。

77
00:06:18.132 --> 00:06:20.103
ブラウザー互換性を確認します。

78
00:06:20.103 --> 00:06:24.833
記事が参照するエムディーエヌの記録では、スロット本体は、クロームが五十三以降、

79
00:06:24.833 --> 00:06:29.563
ファイアフォックスが六十三以降、サファリが十以降で対応しています。

80
00:06:29.563 --> 00:06:33.767
エッジについては、共通エンジンのデータを参照して確認する形です。

81
00:06:33.767 --> 00:06:38.234
ネーム属性についても、同じバージョンから対応すると記録されています。

82
00:06:38.234 --> 00:06:44.935
現在の主要ブラウザーでは広く使える仕組みですが、ウェブコンポーネンツ全体の設計はやや応用的な内容です。

83
00:06:44.935 --> 00:06:52.293
古いブラウザーを対象に含める場合は、部品自体が動かない可能性も含めて、代替の表示を用意できるか検討してください。

84
00:06:52.293 --> 00:06:55.840
導入前には、対象ブラウザーの最新情報も確認しましょう。

85
00:06:55.840 --> 00:06:57.525
最後に練習とまとめです。

86
00:06:57.525 --> 00:07:03.140
スロットは、シャドウドムで作る再利用部品に、外から内容を差し込むための口でした。

87
00:07:03.140 --> 00:07:04.965
大切なポイントは三つです。

88
00:07:04.965 --> 00:07:09.177
一つ目は、スロットはシャドウドムの中に置いて初めて働くこと。

89
00:07:09.177 --> 00:07:15.073
二つ目は、複数ある場合は部品側のネームと利用側のスロット属性を正確に一致させること。

90
00:07:15.073 --> 00:07:19.285
三つ目は、何も渡されない場合の代替表示まで用意することです。

91
00:07:19.285 --> 00:07:26.445
練習として、記事のカード部品の例を写し、タイトルと本文を自分の文章に変えて表示を確認してみてください。

92
00:07:26.445 --> 00:07:27.708
お疲れさまでした。

93
00:07:27.708 --> 00:07:31.218
部品化の考え方は、大きなサイトを作る力になります。

94
00:07:31.218 --> 00:07:34.868
次回もエイチティーエムエルタグの解説を続けましょう。