WEBVTT

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

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

3
00:00:03.924 --> 00:00:08.575
エイチティーエムエルタグ編の百四本目は、ビーディーアイタグです。

4
00:00:08.575 --> 00:00:14.752
ビーディーアイは、双方向テキストの分離、つまりバイダイレクショナル・アイソレートという名前のとおり、

5
00:00:14.752 --> 00:00:20.929
外から来た文字列の文字方向を、周囲の文章から独立させるための要素です。

6
00:00:20.929 --> 00:00:26.743
日本語や英語は左から右へ読みますが、アラビア語やヘブライ語は右から左へ読みます。

7
00:00:26.743 --> 00:00:30.376
ユーザー名のように、どちらの方向の文字が入るか分からない文字列を表示するとき、

8
00:00:30.376 --> 00:00:34.010
この分離が役立ちます。

9
00:00:34.010 --> 00:00:39.315
今回は、ビーディーアイの意味、ビーディーオーとの違い、ディーアイアール属性、

10
00:00:39.315 --> 00:00:44.620
コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

11
00:00:44.620 --> 00:00:48.284
まず、なぜ表示が崩れるのかを知っておきましょう。

12
00:00:48.284 --> 00:00:57.596
ブラウザーはふだん、ユニコードの双方向アルゴリズムというルールで、文字ごとにどちらの方向へ並べるかを自動で判断しています。

13
00:00:57.596 --> 00:01:04.924
左から右へ書く文字と、右から左へ書く文字が一つの文に混ざると、この判定が前後の文字に影響し合い、

14
00:01:04.924 --> 00:01:12.252
ハイフンや感嘆符、数字といった中立的な記号の位置が、意図しない場所へ跳んでしまうことがあります。

15
00:01:12.252 --> 00:01:17.137
たとえばアラビア語のユーザー名の直後に件数や記号を続けると、名前だけでなく、

16
00:01:17.137 --> 00:01:22.022
その後ろの文章まで並びが崩れて読める場合があります。

17
00:01:22.022 --> 00:01:29.197
自分で書いた文章なら直せますが、利用者が入力した名前は、どんな文字が来るか事前に分かりません。

18
00:01:29.197 --> 00:01:31.640
ここがビーディーアイの出番です。

19
00:01:31.640 --> 00:01:38.364
ビーディーアイの役割は、囲んだ範囲を、方向の判定における一つの独立した島として扱うことです。

20
00:01:38.364 --> 00:01:40.118
ポイントは二つあります。

21
00:01:40.118 --> 00:01:45.527
一つ目は、中身の文字方向そのものは、ブラウザーの自動判定に任せることです。

22
00:01:45.527 --> 00:01:48.305
ビーディーアイは方向を決めつけません。

23
00:01:48.305 --> 00:01:54.152
二つ目は、その範囲の内側で起きた方向の影響が、外側の文章へ漏れ出さないことです。

24
00:01:54.152 --> 00:01:58.245
逆に、外側の文章の方向が内側へ入り込むこともありません。

25
00:01:58.245 --> 00:02:03.654
つまりビーディーアイは、並び順を命令するのではなく、仕切りを作る要素です。

26
00:02:03.654 --> 00:02:09.501
記事でも、外から来た名前などの文字方向を周囲から独立させる、と説明されています。

27
00:02:09.501 --> 00:02:15.348
この控えめな働きが、方向の分からない文字列を安全に埋め込むための基本になります。

28
00:02:15.348 --> 00:02:17.656
基本の書き方を見ていきます。

29
00:02:17.656 --> 00:02:21.942
この教材では、開始タグと終了タグを明示して書きます。

30
00:02:21.942 --> 00:02:30.679
ビーディーアイは文章の途中の一部分を囲むインライン要素なので、段落を表すピータグの中などに置いて使います。

31
00:02:30.679 --> 00:02:39.746
囲むのは、投稿者名や商品名、検索キーワードなど、外部から受け取って表示する文字列の範囲だけに絞るのが基本です。

32
00:02:39.746 --> 00:02:43.867
自分で書いた通常の文章全体を囲む必要はありません。

33
00:02:43.867 --> 00:02:51.945
終了タグを書き忘れると、分離の範囲が意図せず広がってしまうので、タグの対応は必ず確認してください。

34
00:02:51.945 --> 00:02:56.891
また、ビーディーアイ自体は見た目を変える要素ではありません。

35
00:02:56.891 --> 00:03:04.144
太字になったり色が変わったりはしないので、装飾したい場合はシーエスエスを別に指定します。

36
00:03:04.144 --> 00:03:06.898
次に、ディーアイアール属性を確認します。

37
00:03:06.898 --> 00:03:11.924
ディーアイアールには、左から右を意味するエルティーアール、右から左を意味するアールティーエル、

38
00:03:11.924 --> 00:03:16.949
そして自動判定を意味するオートの三つの値があります。

39
00:03:16.949 --> 00:03:22.870
ビーディーアイでは、この属性を指定しなくても、オートを指定したのと同じ扱いになります。

40
00:03:22.870 --> 00:03:27.414
中の文字列を見て、ブラウザーが方向を判断してくれる設計だからです。

41
00:03:27.414 --> 00:03:32.371
これが、方向を言い切らなければならないビーディーオーとの大きな違いです。

42
00:03:32.371 --> 00:03:39.049
文字列の言語が確実に分かっている場合にだけ、エルティーアールやアールティーエルを明示しても構いませんが、

43
00:03:39.049 --> 00:03:45.727
分からないからこそビーディーアイを使う場面では、基本は省略、またはオートと覚えてください。

44
00:03:45.727 --> 00:03:50.684
むやみにアールティーエルを固定すると、かえって表示を崩す原因になります。

45
00:03:50.684 --> 00:03:54.039
前回扱ったビーディーオーとの違いを整理します。

46
00:03:54.039 --> 00:03:56.811
ビーディーアイは仕切りを作るだけです。

47
00:03:56.811 --> 00:04:01.478
中身の方向は自動判定に任せ、周囲との影響の行き来だけを断ちます。

48
00:04:01.478 --> 00:04:09.355
一方、ビーディーオーは自動判定そのものを上書きし、ディーアイアール属性で指定した方向へ強制的に並べ替えます。

49
00:04:09.355 --> 00:04:18.545
そのためビーディーオーではディーアイアールが必須で、エルティーアールかアールティーエルのどちらかを言い切らなければなりません。

50
00:04:18.545 --> 00:04:26.277
たとえるなら、ビーディーアイは部屋に間仕切りを置くこと、ビーディーオーは家具の並び順まで命令することです。

51
00:04:26.277 --> 00:04:30.361
実務では、まずビーディーアイで足りるかを考えてください。

52
00:04:30.361 --> 00:04:35.904
ユーザー入力の表示で必要なのは、ほとんどの場合、強制ではなく分離のほうです。

53
00:04:35.904 --> 00:04:39.730
記事の活用事例をもとに、コード例を確認します。

54
00:04:39.730 --> 00:04:44.555
場面は、投稿者名の後ろに投稿件数を続けて表示する一覧です。

55
00:04:44.555 --> 00:04:52.872
名前の部分をビーディーアイで囲み、その後ろに、ハイフンと三件の投稿という日本語の案内を続けています。

56
00:04:52.872 --> 00:05:01.024
スライドの例では名前を英字で書いていますが、実際にアラビア語の名前が入った場合を想像してください。

57
00:05:01.024 --> 00:05:10.673
ビーディーアイがないと、右から左へ読む名前の影響で、ハイフンや数字の位置が名前の反対側へ跳んでしまうことがあります。

58
00:05:10.673 --> 00:05:15.331
ビーディーアイで囲んでおけば、名前の中は名前の方向で、後ろの日本語は日本語の順序で、

59
00:05:15.331 --> 00:05:19.989
それぞれ正しく表示されます。

60
00:05:19.989 --> 00:05:24.480
練習では、練習用ファイルにこの例を書き、名前の部分だけ文字を変えて再読み込みし、

61
00:05:24.480 --> 00:05:28.972
表示を確認してみてください。

62
00:05:28.972 --> 00:05:33.277
ビーディーアイが役立つ場面は、名前表示だけではありません。

63
00:05:33.277 --> 00:05:38.917
コメント欄やレビューの投稿者名、ランキングやスコア表に並ぶ表示名、掲示板の引用文など、

64
00:05:38.917 --> 00:05:44.558
利用者が自由に入力した文字列を文章へ埋め込む場面すべてが対象です。

65
00:05:44.558 --> 00:05:50.792
多言語対応のストアで、現地語の商品名や地名を日本語の説明文へ差し込む場合も同じです。

66
00:05:50.792 --> 00:05:55.839
共通点は、表示するまで中身の言語や方向が分からない、ということです。

67
00:05:55.839 --> 00:06:06.675
逆に、開発者が自分で書いた見出しや本文は、言語が分かっているので、段落や文書全体にラング属性やディーアイアール属性を指定する従来の方法で十分です。

68
00:06:06.675 --> 00:06:12.464
外部由来の短い文字列を文中へ埋め込むとき、と覚えると使いどころを間違えません。

69
00:06:12.464 --> 00:06:14.726
安全面の注意も押さえてください。

70
00:06:14.726 --> 00:06:18.896
記事が明記しているとおり、ビーディーアイはクロスサイトスクリプティング、

71
00:06:18.896 --> 00:06:23.066
いわゆるエックスエスエスの対策ではありません。

72
00:06:23.066 --> 00:06:30.133
ビーディーアイはあくまで文字方向を分離する要素で、悪意のある文字列を無害化する働きは一切ありません。

73
00:06:30.133 --> 00:06:37.060
利用者が入力した文字列をページへ挿入するときは、ジャバスクリプトならテキストコンテンツを使って文字列として入れる、

74
00:06:37.060 --> 00:06:43.986
サーバー側ならエスケープ処理を行うなど、通常の安全な挿入方法を必ず守ってください。

75
00:06:43.986 --> 00:06:48.651
入力値をそのままエイチティーエムエルとして流し込むと、ビーディーアイで囲んでいても、

76
00:06:48.651 --> 00:06:53.315
スクリプトやタグが実行される危険は変わりません。

77
00:06:53.315 --> 00:06:57.132
分離と無害化は別の話、と切り分けて覚えておきましょう。

78
00:06:57.132 --> 00:06:59.242
ブラウザー互換性を確認します。

79
00:06:59.242 --> 00:07:04.588
記事が紹介するエムディーエヌのデータでは、ビーディーアイ要素本体は、クロームが十六以降、

80
00:07:04.588 --> 00:07:09.934
ファイアフォックスが十以降、サファリが六以降から対応しています。

81
00:07:09.934 --> 00:07:14.506
エッジについては共通エンジンのデータを参照する形ですが、現在のエッジはクロームと同じエンジンを採用しているため、

82
00:07:14.506 --> 00:07:19.079
問題なく使えます。

83
00:07:19.079 --> 00:07:27.238
いずれも十年以上前のバージョンから使えることが分かり、現在の主要ブラウザーでは互換性を心配する必要はほぼありません。

84
00:07:27.238 --> 00:07:32.584
ただし記事も注意しているように、この表は要素本体の対応開始版を示すものです。

85
00:07:32.584 --> 00:07:40.744
スマートフォンのブラウザーなど、利用対象の環境では、実際にアラビア語などの文字列を入れて表示を試しておくと安心です。

86
00:07:40.744 --> 00:07:44.299
まとめとして、よくある間違いを三つ挙げます。

87
00:07:44.299 --> 00:07:50.118
一つ目は、自分で書いた文章まで全部ビーディーアイで囲んでしまうことです。

88
00:07:50.118 --> 00:07:54.319
分離は外部由来の文字列に絞るからこそ意味があります。

89
00:07:54.319 --> 00:08:00.299
二つ目は、ディーアイアール属性にアールティーエルを固定してしまうことです。

90
00:08:00.299 --> 00:08:05.309
方向が分からない文字列こそ、オートの自動判定に任せてください。

91
00:08:05.309 --> 00:08:10.965
三つ目は、見た目が変わらないからとスパン要素で済ませてしまうことです。

92
00:08:10.965 --> 00:08:16.622
スパンには方向を分離する働きがないため、記号の跳ぶ問題は解決しません。

93
00:08:16.622 --> 00:08:25.026
ビーディーアイは、方向の分からない文字列を周囲から独立させる、小さいけれど国際化には欠かせない要素です。

94
00:08:25.026 --> 00:08:28.581
これでビーディーアイタグの解説を終わります。

95
00:08:28.581 --> 00:08:34.076
まずは記事の例で、名前を変えたときの表示を実際に試してみてください。