WEBVTT

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

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

3
00:00:03.925 --> 00:00:08.551
エイチティーエムエルタグ編の六十三本目は、アイフレーム、タグです。

4
00:00:08.551 --> 00:00:15.561
アイフレームは、今見ているページの中に、別の文書を小さな窓のように埋め込んで表示するためのタグです。

5
00:00:15.561 --> 00:00:22.009
動画のプレイヤー、地図、ほかのウェブページなど、外部の内容をその場で見せたいときに使います。

6
00:00:22.009 --> 00:00:28.458
ただし、埋め込む内容は独立した別のページなので、安全性や読み込みに関する配慮が欠かせません。

7
00:00:28.458 --> 00:00:33.785
今回は基本の書き方から、安全に使うための制限の付け方まで順番に学びましょう。

8
00:00:33.785 --> 00:00:39.813
名前のアイフレームは、インラインフレーム、つまり行の中に置けるフレームという意味です。

9
00:00:39.813 --> 00:00:41.617
基本の書き方を確認します。

10
00:00:41.617 --> 00:00:48.002
アイフレームには開始タグと終了タグの両方が必要で、終了タグを書き忘れないようにしてください。

11
00:00:48.002 --> 00:00:53.970
画面の例では、ソース属性で読み込むページを指定し、タイトル属性で内容を説明しています。

12
00:00:53.970 --> 00:01:00.631
埋め込まれた側の文書は、外側のページとは独立して読み込まれ、独自のスクロールやリンクを持ちます。

13
00:01:00.631 --> 00:01:05.489
つまり、ページの中にもう一つ小さなブラウザーが入っているイメージです。

14
00:01:05.489 --> 00:01:11.041
置き場所は、見出しや段落と同じように、ボディの中の内容に合った位置にしましょう。

15
00:01:11.041 --> 00:01:17.425
リンクをクリックすると埋め込みの中だけが切り替わり、外側のページはそのまま残る点も特徴です。

16
00:01:17.425 --> 00:01:19.806
中心になる二つの属性を見ます。

17
00:01:19.806 --> 00:01:23.615
ソースは、埋め込みたい文書のユーアールエルです。

18
00:01:23.615 --> 00:01:28.060
ここに指定されたページが、そのまま窓の中に表示されます。

19
00:01:28.060 --> 00:01:32.504
もう一つのタイトルは、アイフレームにとって特に大切です。

20
00:01:32.504 --> 00:01:39.806
中身は別の文書なので、音声でページを読む人には、窓の中に何があるのかが分かりにくくなります。

21
00:01:39.806 --> 00:01:47.584
タイトルに、会場周辺の地図、のように具体的な説明を書くことで、中身を開かなくても目的が伝わります。

22
00:01:47.584 --> 00:01:53.933
地図、動画、といった一言だけで済ませず、何の地図か、何の動画かまで書きましょう。

23
00:01:53.933 --> 00:01:55.819
次に大きさと読み込みです。

24
00:01:55.819 --> 00:02:00.534
ウィドゥスとハイトで幅と高さを数値で指定すると、ブラウザーは読み込み前から表示領域の目安が分かり、

25
00:02:00.534 --> 00:02:05.249
ページのガタつきを抑えられます。

26
00:02:05.249 --> 00:02:09.602
画面上の柔軟な大きさは、シーエスエスで調整するのが基本です。

27
00:02:09.602 --> 00:02:15.695
また、ローディングにレイジーを付けると、画面に近づくまで読み込みを後回しにできます。

28
00:02:15.695 --> 00:02:23.674
ページの下の方にある埋め込みに有効ですが、冒頭で最初に見せたい内容に付けると表示が遅れるので注意してください。

29
00:02:23.674 --> 00:02:26.721
狭い画面ではみ出さないかも確認しましょう。

30
00:02:26.721 --> 00:02:29.459
ソースドックという書き方も紹介します。

31
00:02:29.459 --> 00:02:38.680
通常はソースで外部のファイルを読み込みますが、ソースドックでは、表示したいエイチティーエムエルそのものを属性の中に直接書きます。

32
00:02:38.680 --> 00:02:45.885
別ファイルを用意しなくても、小さな見本をその場で表示できるので、解説ページのデモなどに向いています。

33
00:02:45.885 --> 00:02:52.801
ただし、属性の中にタグを書くため、二重引用符や小なり記号などを、そのまま書けない場面があります。

34
00:02:52.801 --> 00:02:58.420
文字参照を使って正しくエスケープしないと、表示が崩れたり途中で切れたりします。

35
00:02:58.420 --> 00:03:02.743
短い内容にとどめ、複雑な文書はファイルに分ける方が安全です。

36
00:03:02.743 --> 00:03:05.917
安全面で最も重要なのが、サンドボックスです。

37
00:03:05.917 --> 00:03:11.398
サンドボックスを付けると、埋め込んだ文書の機能は、いったん強く制限されます。

38
00:03:11.398 --> 00:03:19.765
フォームの送信、スクリプトの実行、別ページへの移動などが止まるため、信頼しきれない内容でも被害を広げにくくなります。

39
00:03:19.765 --> 00:03:25.247
必要な機能は、アロースクリプツのように、許可を一つずつ値に追加して戻します。

40
00:03:25.247 --> 00:03:30.728
特に注意したいのは、アロースクリプツとアローセームオリジンの組み合わせです。

41
00:03:30.728 --> 00:03:35.921
条件によっては制限を自分で外せてしまい、サンドボックスの意味が薄れます。

42
00:03:35.921 --> 00:03:38.374
本当に必要な場合だけにしましょう。

43
00:03:38.374 --> 00:03:45.875
まずは値なしのサンドボックスで表示を確認し、足りない機能だけを一つずつ許可していく進め方がおすすめです。

44
00:03:45.875 --> 00:03:48.624
ほかの制限の仕組みも押さえます。

45
00:03:48.624 --> 00:03:57.387
アローは、埋め込んだ側でカメラやマイク、全画面表示などの機能を使ってよいかを細かく決めるポリシーです。

46
00:03:57.387 --> 00:04:04.603
動画の埋め込みでよく見かける、アローフルスクリーンは、全画面表示を許可する指定です。

47
00:04:04.603 --> 00:04:13.881
リファラーポリシーは、埋め込み先へ移動したり読み込んだりするときに、参照元の情報をどこまで送るかを決めます。

48
00:04:13.881 --> 00:04:17.832
例のノーリファラーは参照元を送らない指定です。

49
00:04:17.832 --> 00:04:23.674
どちらも、必要な機能と情報だけを渡す、という考え方で設定しましょう。

50
00:04:23.674 --> 00:04:25.988
実際の活用場面を整理します。

51
00:04:25.988 --> 00:04:33.261
代表的なのは、動画サービスや地図サービスが用意した公式の埋め込みコードを使うケースです。

52
00:04:33.261 --> 00:04:36.898
あのコードの正体は、まさにアイフレームです。

53
00:04:36.898 --> 00:04:44.667
また、自分のサイトの中で、案内ページや申し込みフォームを別文書として埋め込む使い方もあります。

54
00:04:44.667 --> 00:04:50.453
ここで知っておきたいのは、相手側の設定で埋め込みを拒否できることです。

55
00:04:50.453 --> 00:04:58.718
エックスフレームオプションズなどの仕組みで禁止されているページは、ソースに指定しても表示されません。

56
00:04:58.718 --> 00:05:04.503
表示されないときは、自分のコードだけでなく相手側の許可も疑いましょう。

57
00:05:04.503 --> 00:05:11.942
埋め込みが増えるほどページは重くなりやすいので、本当に必要な場所だけに使うことも大切です。

58
00:05:11.942 --> 00:05:13.793
記事の活用例を読み解きます。

59
00:05:13.793 --> 00:05:16.702
これは、隔離した小さな文書を埋め込む例です。

60
00:05:16.702 --> 00:05:21.990
タイトルには、エイチティーエムエルの表示見本、と内容が分かる説明が入っています。

61
00:05:21.990 --> 00:05:28.337
読み込むファイルの代わりにソースドックを使い、こんにちは、という短い段落を直接書き込んでいます。

62
00:05:28.337 --> 00:05:34.022
ソースドックの中では、小なり記号が文字参照に置き換えられている点にも注目してください。

63
00:05:34.022 --> 00:05:37.856
そしてサンドボックスが値なしで付いているため、スクリプトなどの機能はすべて制限された、

64
00:05:37.856 --> 00:05:41.690
最も安全な状態になっています。

65
00:05:41.690 --> 00:05:45.128
幅と高さで表示領域も示された、要点を押さえた例です。

66
00:05:45.128 --> 00:05:47.605
ブラウザー互換性を確認します。

67
00:05:47.605 --> 00:05:54.954
記事が参照するエムディーエヌの記録では、アイフレーム要素本体はクロームが一以降、

68
00:05:54.954 --> 00:06:02.302
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、ごく初期から対応しています。

69
00:06:02.302 --> 00:06:05.110
基本のソースや幅、高さも同様です。

70
00:06:05.110 --> 00:06:12.293
一方で、サンドボックスはクローム五以降、ソースドックはクローム二十以降、

71
00:06:12.293 --> 00:06:19.477
アローはクローム六十以降、ローディングはクローム七十七以降など、属性ごとに開始時期が大きく異なります。

72
00:06:19.477 --> 00:06:26.743
要素が表示されても新しい属性が効くとは限らないので、目的の属性は個別に確認してください。

73
00:06:26.743 --> 00:06:36.156
また三百二十ピクセル程度の狭い画面で、埋め込みの中身が欠けたり操作できなくなったりしないかも合わせて試しましょう。

74
00:06:36.156 --> 00:06:37.399
最後にまとめです。

75
00:06:37.399 --> 00:06:40.161
アイフレームタグのポイントは三つでした。

76
00:06:40.161 --> 00:06:45.408
一つ目、ソースで埋め込む文書を指定し、タイトルで中身が何かを必ず伝えること。

77
00:06:45.408 --> 00:06:51.485
二つ目、サンドボックスやアローを使って、埋め込んだ文書に渡す権限は必要最小限に絞ること。

78
00:06:51.485 --> 00:06:58.666
三つ目、幅と高さで領域を確保し、表示されない場合は相手側が埋め込みを拒否していないかも確認することです。

79
00:06:58.666 --> 00:07:06.813
練習として、自分の案内ページをタイトルとサンドボックス付きで埋め込み、保存後に正しく表示されるか確かめてみてください。

80
00:07:06.813 --> 00:07:08.056
お疲れさまでした。