WEBVTT

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

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

3
00:00:04.430 --> 00:00:09.652
エイチティーエムエルタグ編の四十七本目は、ノースクリプトタグです。

4
00:00:09.652 --> 00:00:17.405
ノースクリプトは、ジャバスクリプトが使えない環境でのみ表示される、代替の内容を書くためのタグです。

5
00:00:17.405 --> 00:00:23.022
ふだんは画面に出てきませんが、スクリプトが無効な訪問者に対して、動かない理由を伝えたり、

6
00:00:23.022 --> 00:00:28.639
代わりの手段を案内したりする、大切な受け皿になります。

7
00:00:28.639 --> 00:00:32.278
今回は仕組みと基本の書き方、置く場所によるルールの違い、確認の方法まで、

8
00:00:32.278 --> 00:00:35.917
順に学んでいきます。

9
00:00:35.917 --> 00:00:39.872
特に、設定でスクリプトをオフにしている人や、制限のある環境で開く人を想定する場面で、

10
00:00:39.872 --> 00:00:43.828
力を発揮します。

11
00:00:43.828 --> 00:00:46.437
どんな場面で使うのかを整理します。

12
00:00:46.437 --> 00:00:54.265
たとえば、フォームの入力チェックやメニューの開閉をジャバスクリプトに任せているページを考えてください。

13
00:00:54.265 --> 00:00:57.641
スクリプトが無効だと、その機能は動きません。

14
00:00:57.641 --> 00:01:05.008
そのときに何も表示しないと、訪問者はボタンが反応しない理由が分からず、そのまま困ってしまいます。

15
00:01:05.008 --> 00:01:09.536
ノースクリプトで、スクリプトが必要です、という案内や、電話やメールなど別の連絡手段を表示すれば、

16
00:01:09.536 --> 00:01:14.063
行き止まりを防げます。

17
00:01:14.063 --> 00:01:18.514
主役ではなく、あくまで案内と代替が役割だと覚えてください。

18
00:01:18.514 --> 00:01:22.965
逆に、文章を読むだけのページであれば、そもそもスクリプトがなくても内容が伝わるため、

19
00:01:22.965 --> 00:01:27.416
無理に用意する必要はありません。

20
00:01:27.416 --> 00:01:29.356
仕組みはシンプルな二択です。

21
00:01:29.356 --> 00:01:32.612
ブラウザーの設定でスクリプトが有効なら、ノースクリプトの中身は無視され、

22
00:01:32.612 --> 00:01:35.868
画面には何も出ません。

23
00:01:35.868 --> 00:01:41.271
逆にスクリプトが無効なら、中身が通常のエイチティーエムエルとして表示されます。

24
00:01:41.271 --> 00:01:43.349
ここで大切な注意点があります。

25
00:01:43.349 --> 00:01:47.852
スクリプトのファイルが読み込めなかったり、プログラムにエラーがあったりしても、

26
00:01:47.852 --> 00:01:52.355
設定が有効である限りノースクリプトは表示されません。

27
00:01:52.355 --> 00:01:57.066
あくまで、無効という設定そのものに反応する仕組みだと覚えてください。

28
00:01:57.066 --> 00:02:00.391
この区別が、このタグで一番のつまずきどころです。

29
00:02:00.391 --> 00:02:03.994
画面の例のように通常のボタンと並べて置くことで、有効な人には邪魔にならず、

30
00:02:03.994 --> 00:02:07.596
無効な人にだけ案内が届きます。

31
00:02:07.596 --> 00:02:09.798
基本の書き方を確認します。

32
00:02:09.798 --> 00:02:17.758
ノースクリプトには開始タグと終了タグの両方が必要で、その間に代替として見せたい内容を書きます。

33
00:02:17.758 --> 00:02:22.585
画面の例はボディの中に置いたもので、段落を使って、自動の入力確認にはジャバスクリプトが必要です、

34
00:02:22.585 --> 00:02:27.412
と案内しています。

35
00:02:27.412 --> 00:02:32.832
続けて、説明文はそのまま読めます、と伝えているのがポイントです。

36
00:02:32.832 --> 00:02:41.131
何が使えなくて、何はそのまま使えるのかをセットで示すと、訪問者は次にどうすればよいか判断できます。

37
00:02:41.131 --> 00:02:44.010
まずはこの形から身につけましょう。

38
00:02:44.010 --> 00:02:52.648
コード自体は短く、段落タグをそのまま内側に入れるだけなので、初めて書く人でも迷うことは少ないはずです。

39
00:02:52.648 --> 00:02:57.397
置く場所によってルールが変わるのが、このタグの難しいところです。

40
00:02:57.397 --> 00:03:04.074
ボディの中に置く場合は、段落や見出し、リンクなど、画面に出る通常の内容をそのまま書けます。

41
00:03:04.074 --> 00:03:11.642
一方、ヘッドの中に置く場合は制限が強く、書けるのはリンク、スタイル、メタといった限られた要素だけです。

42
00:03:11.642 --> 00:03:18.023
ヘッドは文書全体の設定を置く場所なので、画面に表示する文章を直接書くことはできません。

43
00:03:18.023 --> 00:03:25.146
置きたい内容が文章なのか設定なのかを考えて、ヘッドとボディのどちらに置くべきか判断してください。

44
00:03:25.146 --> 00:03:29.227
記事でも、ヘッド内では内容に強い制約がある点が注意として挙げられていますので、

45
00:03:29.227 --> 00:03:33.308
この違いは必ず押さえてください。

46
00:03:33.308 --> 00:03:36.285
ヘッドでの代表的な使い方を紹介します。

47
00:03:36.285 --> 00:03:41.144
スクリプトで後から表示を切り替える前提のページでは、スクリプトが無効なときに、

48
00:03:41.144 --> 00:03:46.002
要素が隠れたままになってしまうことがあります。

49
00:03:46.002 --> 00:03:54.307
そこでヘッドのノースクリプトの中にスタイルタグを置き、無効な場合だけ適用される予備のスタイルを用意します。

50
00:03:54.307 --> 00:03:59.008
画面の例では、メニューを常に表示する指定に切り替えています。

51
00:03:59.008 --> 00:04:05.120
このようにヘッド側は、文章ではなく見た目のフォールバックを担当させる場所です。

52
00:04:05.120 --> 00:04:08.411
ボディ側の案内と役割を分けて考えましょう。

53
00:04:08.411 --> 00:04:11.545
考え方としては、もしものときの保険です。

54
00:04:11.545 --> 00:04:16.560
用意しておくだけで、無効な環境でも最低限読めるページになります。

55
00:04:16.560 --> 00:04:18.187
属性について確認します。

56
00:04:18.187 --> 00:04:21.711
ノースクリプトには、この要素専用の属性はありません。

57
00:04:21.711 --> 00:04:29.166
必要に応じて使うのは、アイディーやクラス、ラングなどのグローバル属性、つまり多くの要素に共通する属性だけです。

58
00:04:29.166 --> 00:04:32.825
たとえばクラスを付けておけば、案内文全体に枠や背景色といったスタイルを、

59
00:04:32.825 --> 00:04:36.485
シーエスエスでまとめて付けられます。

60
00:04:36.485 --> 00:04:39.738
専用属性がない分、覚えることは少なくて済みます。

61
00:04:39.738 --> 00:04:43.059
子要素に付ける属性と混同しないよう、タグそのものには特別な指定は要らない、

62
00:04:43.059 --> 00:04:46.380
と整理しておきましょう。

63
00:04:46.380 --> 00:04:53.428
データスター属性で独自の値を保持することもできますが、秘密情報を置く場所ではない点にも注意してください。

64
00:04:53.428 --> 00:04:56.108
よくある間違いを二つ確認します。

65
00:04:56.108 --> 00:05:00.211
一つ目は、ノースクリプトがあるから主要な内容までジャバスクリプト任せにしてよい、

66
00:05:00.211 --> 00:05:04.314
という考え方です。

67
00:05:04.314 --> 00:05:10.343
それではスクリプトが使えない訪問者は、案内だけで肝心の情報を読めません。

68
00:05:10.343 --> 00:05:16.037
本文や重要な手続きは、できる限りスクリプトなしでも届く形が理想です。

69
00:05:16.037 --> 00:05:18.549
二つ目は、案内文の書き方です。

70
00:05:18.549 --> 00:05:23.740
長々と説明するのではなく、必要な理由と次に取る行動を短く示し、代替のリンクや連絡先まで含めて、

71
00:05:23.740 --> 00:05:28.932
初めて役に立つ案内になります。

72
00:05:28.932 --> 00:05:33.370
また、スクリプトが有効な人には一切見えないため、通常時の見た目を気にせず、

73
00:05:33.370 --> 00:05:37.808
率直な案内を書ける点も特徴です。

74
00:05:37.808 --> 00:05:41.711
作ったあとは、必ず自分で表示を確認しましょう。

75
00:05:41.711 --> 00:05:46.633
確認の手順は、ブラウザーの開発者ツールや設定でジャバスクリプトを一時的に無効にして、

76
00:05:46.633 --> 00:05:51.555
ページを再読み込みするだけです。

77
00:05:51.555 --> 00:06:01.567
案内が期待どおりの位置に出るか、中のリンクが正しく動くか、スマートフォンほどの細い画面幅でも文章が切れないかを見ます。

78
00:06:01.567 --> 00:06:08.526
終わったら設定を有効に戻し、今度は案内がきちんと消えていることも確認してください。

79
00:06:08.526 --> 00:06:13.956
有効と無効の両方を試すことが、このタグを正しく理解する近道です。

80
00:06:13.956 --> 00:06:18.708
三百二十ピクセル程度の幅や文字を拡大した状態でも、案内の内容や操作部分が欠けないかも、

81
00:06:18.708 --> 00:06:23.460
あわせて見ておきましょう。

82
00:06:23.460 --> 00:06:25.356
ブラウザー互換性を確認します。

83
00:06:25.356 --> 00:06:31.171
記事が参照するエムディーエヌの記録では、ノースクリプトタグはクロームが一以降、

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

85
00:06:36.986 --> 00:06:40.905
基本的な使い方で、対応状況を心配する必要はほとんどありません。

86
00:06:40.905 --> 00:06:46.973
ただし、スクリプトを無効化する設定の場所や、開発者ツールの操作手順はブラウザーごとに異なります。

87
00:06:46.973 --> 00:06:51.145
対象のブラウザーで実際に無効化して、表示を確かめることが大切です。

88
00:06:51.145 --> 00:06:57.592
モバイル版のブラウザーでは配信条件が異なる場合もあるため、利用対象の実機でも一度試しておくと安心です。

89
00:06:57.592 --> 00:06:58.946
最後にまとめです。

90
00:06:58.946 --> 00:07:05.713
ノースクリプトタグは、スクリプトが無効な場合にだけ表示される、代替内容のためのタグでした。

91
00:07:05.713 --> 00:07:07.217
ポイントは三つです。

92
00:07:07.217 --> 00:07:11.278
一つ目、ボディでは案内文などの通常の内容が書けること。

93
00:07:11.278 --> 00:07:16.692
二つ目、ヘッドでは書ける要素が限られ、主にスタイルの予備として使うこと。

94
00:07:16.692 --> 00:07:23.008
三つ目、プログラムのエラーでは表示されず、あくまで無効という設定に反応することです。

95
00:07:23.008 --> 00:07:29.024
練習として、自分のページに短い案内を一つ追加し、無効化して確かめてみてください。

96
00:07:29.024 --> 00:07:30.377
お疲れさまでした。

97
00:07:30.377 --> 00:07:31.731
次回もお楽しみに。

98
00:07:31.731 --> 00:07:38.348
小さなタグですが、使えない環境の人を置き去りにしないための、やさしい仕組みだと言えます。