WEBVTT

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

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

3
00:00:04.060 --> 00:00:07.685
HTMLタグ編の三十八本目は、プログレスタグです。

4
00:00:07.685 --> 00:00:15.804
ファイルを送っている途中や、大きな処理が動いているとき、あとどれくらい待てば終わるのかが分かると安心しますよね。

5
00:00:15.804 --> 00:00:20.444
プログレスは、そんな処理の進み具合をバーで伝えるためのタグです。

6
00:00:20.444 --> 00:00:27.259
今回は、基本の書き方から、値の決め方、進捗が分からない場合の書き方までを順に確認していきます。

7
00:00:27.259 --> 00:00:31.318
似た役割のミータータグとの違いも合わせて押さえましょう。

8
00:00:31.318 --> 00:00:36.103
待つ時間の長さが見えるかどうかで、利用者の不安は大きく変わります。

9
00:00:36.103 --> 00:00:39.148
その安心感を作るのが、このタグの役割です。

10
00:00:39.148 --> 00:00:43.110
どんな場面で使うのか、具体例から考えてみましょう。

11
00:00:43.110 --> 00:00:53.411
ファイルをアップロードしている途中、データをダウンロードしている最中、少し時間のかかる計算や送信処理が進んでいる場面が代表例です。

12
00:00:53.411 --> 00:00:59.909
共通しているのは、処理に始まりと終わりがあり、完了までの割合を伝えられることです。

13
00:00:59.909 --> 00:01:06.565
反対に、ディスクの使用量や気温のように、終わりという概念がない測定値には使いません。

14
00:01:06.565 --> 00:01:10.211
そちらは後ほど紹介するミータータグの役割です。

15
00:01:10.211 --> 00:01:15.599
まずは、これは進み続ける処理かどうか、という観点で判断してください。

16
00:01:15.599 --> 00:01:23.840
進捗バーがあると、利用者は処理が止まっていないことを確認でき、途中でページを閉じてしまうことも減ります。

17
00:01:23.840 --> 00:01:25.745
基本の書き方を確認します。

18
00:01:25.745 --> 00:01:32.488
プログレスタグには、開始タグと終了タグがあり、その間に文字で割合を書いておくことができます。

19
00:01:32.488 --> 00:01:34.393
肝心なのは二つの属性です。

20
00:01:34.393 --> 00:01:39.963
バリューは今どこまで進んだかを示す現在の値、マックスは完了となる最大値です。

21
00:01:39.963 --> 00:01:47.878
スライドの例は、マックスが百、バリューが三十なので、全体の三十パーセントまで進んだ状態という意味になります。

22
00:01:47.878 --> 00:01:52.934
マックスを省略すると最大値は一として扱われますが、初心者のうちは百分率で考えるほうが分かりやすいので、

23
00:01:52.934 --> 00:01:57.991
百を明示する書き方をおすすめします。

24
00:01:57.991 --> 00:02:02.241
書く順番はマックスが先でも構いませんが、現在の値と最大値のペアで読む習慣を付けておくと、

25
00:02:02.241 --> 00:02:06.492
値の確認がしやすくなります。

26
00:02:06.492 --> 00:02:09.593
次に、ラベルと組み合わせた実用的な例です。

27
00:02:09.593 --> 00:02:13.875
バーだけが画面にあると、それが何の進捗なのか分かりません。

28
00:02:13.875 --> 00:02:19.338
そこでレーベルタグを一緒に置き、アップロードの進捗、という説明を付けます。

29
00:02:19.338 --> 00:02:24.137
レーベルのフォー属性と、プログレスのアイディーを一致させることで、両者が結びつき、

30
00:02:24.137 --> 00:02:28.936
支援技術を使う人にも何のバーなのかが伝わります。

31
00:02:28.936 --> 00:02:36.319
さらに、タグの中にも三十パーセントと文字で書いておくと、バーが表示できない環境でも内容が伝わります。

32
00:02:36.319 --> 00:02:40.159
見た目と意味の両面で、伝わる書き方を心がけましょう。

33
00:02:40.159 --> 00:02:48.280
実際のページでは、見出しや説明文と並べて置くことも多いので、周囲の文章とのつながりも意識して配置してください。

34
00:02:48.280 --> 00:02:51.935
バリューとマックスの決め方を、もう少し詳しく見ます。

35
00:02:51.935 --> 00:02:55.732
バリューはゼロ以上、マックス以下に収めるのが原則です。

36
00:02:55.732 --> 00:02:58.965
マックスは必ずゼロより大きな数にしてください。

37
00:02:58.965 --> 00:03:03.324
単位はパーセントでなければならない、という決まりはありません。

38
00:03:03.324 --> 00:03:06.909
たとえば二百件の処理のうち七十件が終わったなら、バリュー七十、マックス二百と、

39
00:03:06.909 --> 00:03:10.494
そのまま件数で書けます。

40
00:03:10.494 --> 00:03:15.556
割合の計算はブラウザーが行い、バーは三十五パーセントの位置まで伸びます。

41
00:03:15.556 --> 00:03:22.445
扱っているデータの単位そのままで書けるので、変換ミスが起きにくい点も、このタグの便利なところです。

42
00:03:22.445 --> 00:03:26.592
最大値を百にそろえるか、件数のままにするかは、チームやページ全体で決め方を統一しておくと、

43
00:03:26.592 --> 00:03:30.740
読み手も書き手も迷いません。

44
00:03:30.740 --> 00:03:35.060
進捗の割合が分からない場面では、どう書けばよいのでしょうか。

45
00:03:35.060 --> 00:03:38.661
答えはシンプルで、バリュー属性を書かないことです。

46
00:03:38.661 --> 00:03:42.909
バリューがないプログレスは不確定な状態となり、ブラウザーは処理が進んでいることだけを示す、

47
00:03:42.909 --> 00:03:47.158
動きのあるバーを表示します。

48
00:03:47.158 --> 00:03:53.638
たとえば、サーバーからの応答を待っていて、全体量がまだ分からない読み込みの場面に合います。

49
00:03:53.638 --> 00:03:59.975
適当な数字をでっち上げて書くよりも、正直に分からないと示すほうが、利用者を惑わせません。

50
00:03:59.975 --> 00:04:04.871
割合が判明したタイミングで、バリューを付けた形に切り替えてください。

51
00:04:04.871 --> 00:04:12.792
読み込み中という文字を中に入れておくと、不確定な状態であることが、バーの見た目以外からも伝わりやすくなります。

52
00:04:12.792 --> 00:04:15.708
よく似たタグに、ミーターがあります。

53
00:04:15.708 --> 00:04:21.215
使い分けの基準は、値が時間とともに終わりへ向かって進むかどうかです。

54
00:04:21.215 --> 00:04:27.046
プログレスは、ダウンロードのように、完了に向けて増えていく進捗専用です。

55
00:04:27.046 --> 00:04:35.954
一方ミーターは、ディスクの使用量、テストの点数、残りの容量など、決まった範囲の中にある現在の測定値を示します。

56
00:04:35.954 --> 00:04:40.975
こちらは進んでいるわけではなく、その時点の状態を表しています。

57
00:04:40.975 --> 00:04:46.968
迷ったときは、この値は放っておくと完了に近づくか、と自問してみてください。

58
00:04:46.968 --> 00:04:51.342
近づくならプログレス、状態を示すだけならミーターです。

59
00:04:51.342 --> 00:04:55.067
名前が似ているため混同しやすい組み合わせです。

60
00:04:55.067 --> 00:05:00.412
違いを言葉で説明できるようになると、実務でも自信を持って選べます。

61
00:05:00.412 --> 00:05:02.394
大切な注意点があります。

62
00:05:02.394 --> 00:05:07.018
プログレスタグを置いただけでは、バーは勝手に動きません。

63
00:05:07.018 --> 00:05:13.128
表示を更新する仕組みは、ジャバスクリプトなどで別に用意する必要があります。

64
00:05:13.128 --> 00:05:18.412
実際の処理、たとえばアップロードの進行状況を受け取るたびに、バリューを新しい値に書き換えることで、

65
00:05:18.412 --> 00:05:23.697
バーが少しずつ伸びていきます。

66
00:05:23.697 --> 00:05:31.128
そのとき、タグの中の文字のパーセント表示も一緒に更新すると、数字と見た目が食い違いません。

67
00:05:31.128 --> 00:05:38.560
タグは進捗を見せる器、進捗を数えて伝えるのはプログラム、という分担を覚えておいてください。

68
00:05:38.560 --> 00:05:42.936
処理が完了したらバリューをマックスと同じ値にし、完了したことを文字でも伝えると、

69
00:05:42.936 --> 00:05:47.312
より丁寧な案内になります。

70
00:05:47.312 --> 00:05:49.228
属性と見た目を整理します。

71
00:05:49.228 --> 00:05:53.502
プログレス専用の属性は、バリューとマックスの二つだけです。

72
00:05:53.502 --> 00:06:00.282
ほかに、アイディー、クラス、ラング、独自の値を保持するデータ属性といった共通属性が使えます。

73
00:06:00.282 --> 00:06:02.640
見た目については注意が必要です。

74
00:06:02.640 --> 00:06:09.420
バーの色や形はブラウザーが標準で用意したものが表示され、ブラウザーごとに少しずつ異なります。

75
00:06:09.420 --> 00:06:17.378
幅や高さはシーエスエスで調整できますが、バーの色を細かく変える指定はブラウザーごとに書き方が分かれています。

76
00:06:17.378 --> 00:06:23.274
まずは標準の見た目で使い、必要な場合だけ公式資料を確認しながら調整してください。

77
00:06:23.274 --> 00:06:27.990
色を変える場合は、進捗が伝わるコントラストを保つことも大切です。

78
00:06:27.990 --> 00:06:31.380
薄すぎる色は、進み具合が分かりにくくなります。

79
00:06:31.380 --> 00:06:33.345
ブラウザー互換性を確認します。

80
00:06:33.345 --> 00:06:39.569
記事が参照するエムディーエヌの記録では、プログレスタグはクロームがバージョン六以降、

81
00:06:39.569 --> 00:06:45.793
エッジが十二以降、ファイアフォックスが六以降、サファリが六以降と、主要ブラウザーで古くから対応しています。

82
00:06:45.793 --> 00:06:50.509
バリューとマックスの両属性についても、同じ範囲で対応が記録されています。

83
00:06:50.509 --> 00:06:54.702
そのため、対応を心配して使用をためらう必要はほとんどありません。

84
00:06:54.702 --> 00:06:59.550
ただし先ほど触れたように、バーの見た目の細部はブラウザーごとに異なります。

85
00:06:59.550 --> 00:07:03.612
公開前に、対象のブラウザーで一度表示を確認しておくと安心です。

86
00:07:03.612 --> 00:07:11.080
スマートフォン向けのブラウザーでも基本的な表示はそろっていますが、実機での見え方は最後に自分の目で確かめましょう。

87
00:07:11.080 --> 00:07:13.082
最後に注意点とまとめです。

88
00:07:13.082 --> 00:07:15.084
気をつけたいのは三つです。

89
00:07:15.084 --> 00:07:17.855
一つ目、バーだけを置かないことです。

90
00:07:17.855 --> 00:07:22.629
何の進捗なのか、レーベルや見出しで必ず言葉でも示してください。

91
00:07:22.629 --> 00:07:27.249
二つ目、進捗が分からないときに適当な数字を書かないことです。

92
00:07:27.249 --> 00:07:30.174
バリューを省く不確定な表示が正解です。

93
00:07:30.174 --> 00:07:32.330
三つ目、用途の取り違えです。

94
00:07:32.330 --> 00:07:35.872
容量などの測定値はミータータグに任せましょう。

95
00:07:35.872 --> 00:07:43.725
練習として、ラベル付きで七十パーセントのプログレスを書き、値の意味を自分の言葉で説明してみてください。

96
00:07:43.725 --> 00:07:45.111
お疲れさまでした。

97
00:07:45.111 --> 00:07:49.115
次回は、整形済みテキストを示すプリタグを解説します。

98
00:07:49.115 --> 00:07:54.504
進捗表示は、速さそのものではなく、待つ間の不安を減らすための工夫です。

99
00:07:54.504 --> 00:07:58.508
その視点を持つことが、良いページ作りにつながります。