WEBVTT

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

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

3
00:00:03.858 --> 00:00:08.129
エイチティーエムエルタグ編の八十六本目は、ダイアログタグです。

4
00:00:08.129 --> 00:00:14.742
ダイアログは、ページの上に小さな窓を重ねて表示し、利用者に確認や案内を伝えるための専用要素です。

5
00:00:14.742 --> 00:00:20.253
たとえば、削除してよいか尋ねたり、申し込み完了を知らせたりする場面が代表的です。

6
00:00:20.253 --> 00:00:28.657
以前はディブで自作することが多かったのですが、専用タグを使うと、開閉やキーボード操作の土台をブラウザーが用意してくれます。

7
00:00:28.657 --> 00:00:33.134
今回は、ダイアログの意味から、オープン属性、ショーモーダルによる表示、閉じ方、

8
00:00:33.134 --> 00:00:37.612
シーエスエス、注意点まで順番に確認していきましょう。

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

10
00:00:39.608 --> 00:00:43.906
ダイアログは、開始タグと終了タグで内容を囲んで書きます。

11
00:00:43.906 --> 00:00:48.819
中には見出しや段落、ボタン、フォームなどを入れることができます。

12
00:00:48.819 --> 00:00:52.810
大切なのは、書いただけでは画面に表示されない点です。

13
00:00:52.810 --> 00:00:57.570
オープン属性がない状態では、ダイアログは隠れたままになります。

14
00:00:57.570 --> 00:01:02.789
つまりダイアログは、必要なタイミングで開いてこそ意味がある要素です。

15
00:01:02.789 --> 00:01:07.395
まずは練習ファイルで、見出しと短い案内文だけのシンプルなダイアログを用意し、

16
00:01:07.395 --> 00:01:12.000
まだ何も表示されないことを確認してください。

17
00:01:12.000 --> 00:01:15.992
この隠れていることが初期状態だと覚えておきましょう。

18
00:01:15.992 --> 00:01:19.914
開く方法のひとつ目が、オープン属性です。

19
00:01:19.914 --> 00:01:26.188
オープンと書くだけで、ダイアログは開いた状態として表示されます。

20
00:01:26.188 --> 00:01:32.855
これは真偽属性といって、あるかないかで状態が決まるタイプの属性です。

21
00:01:32.855 --> 00:01:43.051
ただし、オープン属性で開いたダイアログは、その場に表示されるだけで、背景のページはそのまま操作できます。

22
00:01:43.051 --> 00:01:46.188
いわゆるノンモーダルな表示です。

23
00:01:46.188 --> 00:01:54.423
常時出しておきたいお知らせには向きますが、必ず読んでほしい確認画面には物足りません。

24
00:01:54.423 --> 00:02:01.482
記事も、オープンで表示するだけとショーモーダルは異なると注意しています。

25
00:02:01.482 --> 00:02:06.972
この違いが、次に学ぶモーダル表示への分かれ道になります。

26
00:02:06.972 --> 00:02:11.481
本命の開き方が、ジャバスクリプトのショーモーダルメソッドです。

27
00:02:11.481 --> 00:02:18.753
ショーモーダルで開くと、ダイアログは画面の前面に出て、閉じるまで背景のページを操作できなくなります。

28
00:02:18.753 --> 00:02:20.498
これがモーダル表示です。

29
00:02:20.498 --> 00:02:24.571
削除の確認や、必ず答えてほしい案内は、こちらで開きます。

30
00:02:24.571 --> 00:02:30.825
一方、ショーメソッドで開くとオープン属性と同じノンモーダルになり、背景も操作できます。

31
00:02:30.825 --> 00:02:35.188
使い分けの目安は、答えるまで先に進ませたくないかどうかです。

32
00:02:35.188 --> 00:02:39.406
また、すでに開いているダイアログに再度ショーモーダルを呼ぶとエラーになるので、

33
00:02:39.406 --> 00:02:43.624
開く前に状態を確認する配慮も大切です。

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

35
00:02:45.725 --> 00:02:51.328
例は、案内を開くボタンを押すと、参加のご案内というモーダルが表示される構成です。

36
00:02:51.328 --> 00:02:58.752
ボタンとダイアログにはそれぞれアイディーが付いていて、スクリプトがそのアイディーを目印に要素を取得します。

37
00:02:58.752 --> 00:03:07.297
ボタンのクリックでショーモーダルを呼び、ダイアログの中には、メソッドがダイアログのフォームと閉じるボタンが置かれています。

38
00:03:07.297 --> 00:03:12.689
試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みし、

39
00:03:12.689 --> 00:03:18.082
ボタンを押して前面に表示されるか、閉じるボタンで戻れるかを実際に確認してください。

40
00:03:18.082 --> 00:03:21.164
構造と動作をセットで確かめることが大切です。

41
00:03:21.164 --> 00:03:24.040
閉じ方には主に三つの方法があります。

42
00:03:24.040 --> 00:03:28.994
一つ目は、ジャバスクリプトのクローズメソッドで閉じる方法です。

43
00:03:28.994 --> 00:03:36.026
二つ目は、モーダル表示中にエスケープキーを押す方法で、利用者にとっておなじみの操作です。

44
00:03:36.026 --> 00:03:40.820
三つ目が、フォームのメソッドにダイアログと指定する方法です。

45
00:03:40.820 --> 00:03:47.691
このフォームの中のボタンを押すと、ページ遷移や送信を行わずにダイアログだけが閉じます。

46
00:03:47.691 --> 00:03:55.521
さらに、押されたボタンのバリューは、ダイアログのリターンバリューとしてスクリプトから読み取れます。

47
00:03:55.521 --> 00:04:03.192
オーケーが押されたのかキャンセルなのかを判別できるので、確認画面ではこの仕組みがとても便利です。

48
00:04:03.192 --> 00:04:06.476
ジャバスクリプトとの連携をもう少し深く見ます。

49
00:04:06.476 --> 00:04:10.189
ダイアログが閉じると、クローズイベントが発生します。

50
00:04:10.189 --> 00:04:14.187
このタイミングでリターンバリューを読み取れば、利用者がオーケーを選んだのか、

51
00:04:14.187 --> 00:04:18.185
キャンセルを選んだのかが分かります。

52
00:04:18.185 --> 00:04:22.255
エスケープキーで閉じられた場合は、その前にキャンセルイベントが発生するので、

53
00:04:22.255 --> 00:04:26.324
必要なら閉じるのを防ぐこともできます。

54
00:04:26.324 --> 00:04:31.108
実務では、削除ボタンを押したらモーダルを開き、クローズイベントで結果を見て、

55
00:04:31.108 --> 00:04:35.892
本当に削除するかどうかを決める、といった流れが典型例です。

56
00:04:35.892 --> 00:04:42.460
表示はエイチティーエムエル、判断はスクリプト、と役割を分けると分かりやすいコードになります。

57
00:04:42.460 --> 00:04:44.971
見た目はシーエスエスで整えます。

58
00:04:44.971 --> 00:04:52.346
ダイアログ自体にパディングやボーダーラジアス、影を指定すれば、カードのような見た目になります。

59
00:04:52.346 --> 00:04:57.681
そしてモーダル表示のときだけ現れる特別な要素が、バックドロップです。

60
00:04:57.681 --> 00:05:05.684
ダイアログの後ろの画面全体を指す疑似要素で、半透明の黒で暗くすると、前面の窓に自然と視線が集まります。

61
00:05:05.684 --> 00:05:13.843
幅については、マックスウィドスで上限を決めておくと、広い画面でも文章が横に伸びすぎず読みやすくなります。

62
00:05:13.843 --> 00:05:24.200
スマートフォンでは画面幅いっぱいに近くなることもあるので、三百二十ピクセル程度の狭い幅でもボタンが欠けないかを必ず確認してください。

63
00:05:24.200 --> 00:05:26.864
アクセシビリティの観点も欠かせません。

64
00:05:26.864 --> 00:05:34.714
モーダルを開くと、キーボードのフォーカスはダイアログの中に移動し、タブキーを押しても中を循環するようになります。

65
00:05:34.714 --> 00:05:39.480
背景にフォーカスが逃げないので、キーボード利用者も迷子になりません。

66
00:05:39.480 --> 00:05:44.527
そして閉じると、フォーカスは開くきっかけになったボタンへ自動で戻ります。

67
00:05:44.527 --> 00:05:48.592
この戻り先があるおかげで、操作の続きを自然に再開できます。

68
00:05:48.592 --> 00:05:51.676
注意点は、閉じる手段を必ず用意することです。

69
00:05:51.676 --> 00:05:57.424
ボタンが見当たらず、エスケープキーも知らない利用者は画面から抜け出せなくなります。

70
00:05:57.424 --> 00:06:03.732
見出しで内容を伝え、閉じるボタンを分かりやすい言葉で置くことが、優しいモーダルの条件です。

71
00:06:03.732 --> 00:06:06.014
ブラウザー互換性を確認します。

72
00:06:06.014 --> 00:06:12.023
記事が紹介するエムディーエヌのデータでは、ダイアログ要素本体は、クロームが三十七以降、

73
00:06:12.023 --> 00:06:18.032
ファイアフォックスが九十八以降、サファリが十五点四以降で対応しています。

74
00:06:18.032 --> 00:06:22.899
現在広く使われているブラウザーなら、安心して採用できる要素です。

75
00:06:22.899 --> 00:06:27.311
一方で注意したいのが、クローズドバイという新しい属性です。

76
00:06:27.311 --> 00:06:31.799
これは、背景クリックなど、どの操作で閉じてよいかを細かく決める属性ですが、

77
00:06:31.799 --> 00:06:36.286
対応開始の時期が要素本体と大きく異なります。

78
00:06:36.286 --> 00:06:40.698
記事でも、本体とは別に対応を確認するよう案内されています。

79
00:06:40.698 --> 00:06:48.304
新しい属性を使うときは、未対応のブラウザーでも閉じるボタンで確実に閉じられる設計にしておきましょう。

80
00:06:48.304 --> 00:06:50.648
よくある間違いとまとめです。

81
00:06:50.648 --> 00:06:56.677
まず、オープン属性を付けただけなのにモーダルになったと思い込むミスです。

82
00:06:56.677 --> 00:07:00.361
背景を止めたいならショーモーダルが必要です。

83
00:07:00.361 --> 00:07:03.208
次に、閉じるボタンの置き忘れです。

84
00:07:03.208 --> 00:07:09.404
開く処理ばかりに集中して、利用者が戻れなくなるケースは意外と多くあります。

85
00:07:09.404 --> 00:07:15.935
そして、確認が不要な内容まで何でもモーダルにする使いすぎにも注意してください。

86
00:07:15.935 --> 00:07:22.801
モーダルは操作を止める強い手段なので、本当に今答えてほしい場面に絞るのが原則です。

87
00:07:22.801 --> 00:07:30.504
ダイアログは、開く、答える、閉じる、戻る、という一連の流れがブラウザーに支えられた要素です。

88
00:07:30.504 --> 00:07:35.863
ディブの自作から一歩進んで、ぜひ専用タグで実装してみてください。

89
00:07:35.863 --> 00:07:39.212
これでダイアログタグの解説を終わります。