WEBVTT

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

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

3
00:00:04.347 --> 00:00:07.918
HTMLタグ編の三十二本目は、サンプタグです。

4
00:00:07.918 --> 00:00:14.593
サンプは、サンプルアウトプットの略で、プログラムが返した出力結果を示すためのタグです。

5
00:00:14.593 --> 00:00:22.045
たとえば、処理が成功したときに画面へ出るメッセージや、エラーで表示される文言がこれにあたります。

6
00:00:22.045 --> 00:00:27.168
人が打ち込む文字と、コンピューターが返す文字は、意味が正反対です。

7
00:00:27.168 --> 00:00:33.223
その違いを読み手とブラウザーにきちんと伝えることが、この小さなタグの役割です。

8
00:00:33.223 --> 00:00:38.812
今回は、よく似たタグとの使い分けを中心に、初心者向けに順番に解説します。

9
00:00:38.812 --> 00:00:43.056
では、どんな場面で使うのか、具体例から見ていきましょう。

10
00:00:43.056 --> 00:00:46.693
身近なのは、ツールを実行したあとの結果表示です。

11
00:00:46.693 --> 00:00:51.089
ファイルを変換したら変換が完了しました、という文言が出る。

12
00:00:51.089 --> 00:00:55.636
保存に失敗したら、保存できませんでした、というエラーが出る。

13
00:00:55.636 --> 00:01:00.183
こうした、プログラム側から返ってくる文字がサンプの担当です。

14
00:01:00.183 --> 00:01:07.155
解説記事やマニュアルで、実際にその文言どおり画面に出ますよ、と引用して見せるときに使います。

15
00:01:07.155 --> 00:01:14.127
自分の感想や説明文ではなく、あくまで機械が出した言葉そのものを示す、という点がポイントです。

16
00:01:14.127 --> 00:01:19.280
環境によって出力が変わる場合は、その条件も一緒に説明すると親切です。

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

18
00:01:21.419 --> 00:01:27.838
使い方はとてもシンプルで、出力にあたる部分を開始タグと終了タグで囲むだけです。

19
00:01:27.838 --> 00:01:30.800
画面のスライドは記事の活用事例です。

20
00:01:30.800 --> 00:01:41.497
成功すると、ビルドコンプリーテッド、と表示されます、という一文の中で、実際にプログラムが出す英語の部分だけをサンプで囲んでいます。

21
00:01:41.497 --> 00:01:48.245
前後の日本語はふつうの説明文、囲まれた部分だけが出力だ、と意味が分かれるわけです。

22
00:01:48.245 --> 00:01:55.815
サンプ自体は文章の流れの中で使うインライン要素なので、段落のピーなどの中に置くのが基本です。

23
00:01:55.815 --> 00:02:00.588
専用の属性はなく、書き方で迷うところはほとんどありません。

24
00:02:00.588 --> 00:02:04.821
ここが今回いちばん大切な、似たタグとの使い分けです。

25
00:02:04.821 --> 00:02:06.938
三つを並べて覚えましょう。

26
00:02:06.938 --> 00:02:13.613
まずケービーディーは、キーボード入力、つまり人が打ち込むコマンドやキーを示します。

27
00:02:13.613 --> 00:02:17.846
次にコードは、プログラムのソースコードそのものです。

28
00:02:17.846 --> 00:02:22.893
そしてサンプは、実行した結果としてプログラムが返した出力です。

29
00:02:22.893 --> 00:02:26.801
たとえば、コマンドを打ち込む、がケービーディー。

30
00:02:26.801 --> 00:02:31.848
そのコマンドを実行したら、この文言が返ってきた、がサンプです。

31
00:02:31.848 --> 00:02:36.732
入力と出力は方向が逆なので、混ぜて使うと読み手が混乱します。

32
00:02:36.732 --> 00:02:41.128
誰が言った言葉なのか、という視点で選ぶと間違えません。

33
00:02:41.128 --> 00:02:46.174
もう一つの活用例として、エラーメッセージの示し方を見てみましょう。

34
00:02:46.174 --> 00:02:51.985
スライドの例では、ファイルが見つからないと、エラー、ファイルノットファウンド、

35
00:02:51.985 --> 00:02:57.796
と表示されます、という文章で、エラーの文言そのものをサンプで囲んでいます。

36
00:02:57.796 --> 00:03:03.759
初心者がつまずいたとき、エラーの文言で検索して解決策を探すことはよくあります。

37
00:03:03.759 --> 00:03:10.029
そのため、マニュアルでは文言を要約せず、画面に出る通りに正確に示すことが大切です。

38
00:03:10.029 --> 00:03:16.145
サンプで囲むことで、ここからここまでが実際の表示ですよ、と境界がはっきりします。

39
00:03:16.145 --> 00:03:21.956
説明の文章は自分の言葉で、引用する出力はサンプで、と分けて書くのがコツです。

40
00:03:21.956 --> 00:03:26.385
出力が複数行にわたるときの書き方も覚えておきましょう。

41
00:03:26.385 --> 00:03:34.423
開始から完了まで何行も流れるログのような出力は、改行や空白をそのまま保つプレタグと組み合わせます。

42
00:03:34.423 --> 00:03:38.523
プレの中にサンプを置けば、行の並びを崩さずに、これはプログラムの出力です、

43
00:03:38.523 --> 00:03:42.624
という意味も付けられます。

44
00:03:42.624 --> 00:03:49.514
コードが主体ならプレの中にコード、出力が主体ならプレの中にサンプ、という選び方です。

45
00:03:49.514 --> 00:03:55.501
ただし、実際の画面で改行位置が変わることもあるので、長い一行をそのまま載せるときは、

46
00:03:55.501 --> 00:04:01.488
スマホのような狭い画面で横にはみ出さないかも確認してください。

47
00:04:01.488 --> 00:04:03.329
属性について整理します。

48
00:04:03.329 --> 00:04:06.704
サンプには、このタグ専用の属性はありません。

49
00:04:06.704 --> 00:04:11.306
必要に応じて、すべての要素で使えるグローバル属性を使います。

50
00:04:11.306 --> 00:04:12.993
代表的なのは三つです。

51
00:04:12.993 --> 00:04:19.283
アイディーは文書の中で一つだけの目印で、ジャバスクリプトからの参照などに使います。

52
00:04:19.283 --> 00:04:24.038
クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。

53
00:04:24.038 --> 00:04:29.561
ラングは、その部分の言語を示すもので、日本語ならジェイエーを指定します。

54
00:04:29.561 --> 00:04:33.242
ほかに、独自の値を保持するデータ属性もあります。

55
00:04:33.242 --> 00:04:37.998
注意点として、クラス名を付けても要素の意味自体は変わりません。

56
00:04:37.998 --> 00:04:43.060
意味はタグで、見た目はシーエスエスで、と役割を分けて考えましょう。

57
00:04:43.060 --> 00:04:45.527
見た目についても触れておきます。

58
00:04:45.527 --> 00:04:52.929
多くのブラウザーでは、サンプの内容は等幅フォント、いわゆる文字の幅がそろった書体で表示されます。

59
00:04:52.929 --> 00:04:58.481
プログラムの出力らしい見た目になるよう、標準でそう決められているのです。

60
00:04:58.481 --> 00:05:01.411
ただ、これはあくまで標準の見た目です。

61
00:05:01.411 --> 00:05:07.887
目立たせたい場合は、スライドのようにシーエスエスで背景色や余白を足すことができます。

62
00:05:07.887 --> 00:05:13.439
逆に、等幅にしたいだけならサンプを使う、という選び方はおすすめしません。

63
00:05:13.439 --> 00:05:19.915
あくまで意味がプログラムの出力であるときに選び、見た目の調整はシーエスエスに任せる。

64
00:05:19.915 --> 00:05:21.920
これが正しい役割分担です。

65
00:05:21.920 --> 00:05:24.127
ブラウザー互換性を確認します。

66
00:05:24.127 --> 00:05:29.425
記事が参照するエムディーエヌの記録では、サンプ要素は、クロームがバージョン一以降、

67
00:05:29.425 --> 00:05:34.722
エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、

68
00:05:34.722 --> 00:05:40.020
とても古くからすべての主要ブラウザーで対応しています。

69
00:05:40.020 --> 00:05:42.227
安心して使えるタグの一つです。

70
00:05:42.227 --> 00:05:44.729
ただし、これは要素本体の対応です。

71
00:05:44.729 --> 00:05:51.645
新しいシーエスエスの見た目などを組み合わせる場合は、そちら側の対応状況は別に確認してください。

72
00:05:51.645 --> 00:06:00.180
また、スマホのブラウザーでは表示のされ方が異なる場合もあるため、大切なページでは実機でも一度確認しておくと安心です。

73
00:06:00.180 --> 00:06:03.595
実装前後のチェックポイントをまとめます。

74
00:06:03.595 --> 00:06:07.180
一つ目、サンプはプログラムの出力専用です。

75
00:06:07.180 --> 00:06:12.986
強調したい一般の文章や、自分の書いた説明文に使うものではありません。

76
00:06:12.986 --> 00:06:16.913
タグ名ではなく、内容の意味から判断しましょう。

77
00:06:16.913 --> 00:06:25.621
二つ目、実際の環境で出力の文言が変わる場合は、バージョンや設定など、変わる条件も一緒に書いておきます。

78
00:06:25.621 --> 00:06:29.718
読み手が自分の画面と照らし合わせやすくなります。

79
00:06:29.718 --> 00:06:31.767
三つ目は表示の確認です。

80
00:06:31.767 --> 00:06:41.158
三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、出力の文言が欠けたりはみ出したりしないか確かめます。

81
00:06:41.158 --> 00:06:42.695
意味、条件、表示。

82
00:06:42.695 --> 00:06:45.256
この三点を確認すれば十分です。

83
00:06:45.256 --> 00:06:47.325
最後に練習とまとめです。

84
00:06:47.325 --> 00:06:51.981
サンプは、プログラムから返された出力を示すタグでした。

85
00:06:51.981 --> 00:06:54.222
大切なポイントは三つです。

86
00:06:54.222 --> 00:06:59.050
一つ目、人が入力する内容はケービーディー、ソースコードはコード、返ってきた出力はサンプと、

87
00:06:59.050 --> 00:07:03.878
役割で使い分けること。

88
00:07:03.878 --> 00:07:09.396
二つ目、専用の属性はなく、見た目の調整はシーエスエスで行うこと。

89
00:07:09.396 --> 00:07:16.120
三つ目、複数行の出力はプレと組み合わせ、エラーの文言は正確に引用することです。

90
00:07:16.120 --> 00:07:26.121
練習として、よく使うツールの成功メッセージとエラーメッセージを、サンプを使ってマニュアル風に書き分けてみてください。

91
00:07:26.121 --> 00:07:27.673
お疲れさまでした。

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