この記事はHTML 4/XHTML 1での<noscript>要素についての解説記事です。
HTML 5での<noscript>要素に関する解説記事は、HTML 5 リファレンス内のHTML 5での<noscript>要素をご覧ください。
クライアントスクリプトが実行出来ない場合の代替HTMLとなる<noscript>要素についての解説です。
<noscript>要素とは、クライアントサイドスクリプトが実行出来ない場合の代替HTMLです。通常は内容は非表示とされておりますが、
では、代わりに<noscript>要素の内容を有効にします。
但し、ユーザエージェントがクライアントサイドスクリプトをサポートしていて、<script>要素のsrc属性で示されたスクリプトが見つからなかったと言う場合には<noscript>の内容は表示されません。
<noscript>要素は、以下の文書型で利用出来ます。
<noscript>要素はスクリプティングモジュールに属します。
<noscript>要素はブロックレヴェル要素です。
<noscript>要素の内容はブロックレヴェル要素に限られます。
<noscript>要素には、以下の属性が定められております。
尚、<script>要素と違って、言語を指定する属性(type属性などに相当する属性)は存在しません。
従って、複数のクライアントサイドスクリプト言語を利用している場合には注意が必要です。
JAVAスクリプトに対応していない環境を自動的に峻別するため、しばしば以下のような記述が見られます。
<head><meta http-equiv="content-type" content="text/html; charset=shift_jis" /><meta http-equiv="content-script-type" content="text/javascript" /><title>○○のページ(スクリプト対応版)</title>…<noscript><meta http-equiv="refresh" content="0;URL=スクリプト非対応版へのURI" /></noscript></head>
しかし、この記述は文法違反です。
何故なら、<noscript>要素は<head>要素の内容として認められていないからです。
加えて、<noscript>要素内に<meta>要素を記述するのも文法違反です。
このような違反を犯した場合、ユーザエージェントに依っては期待通りの処理をしてもらえなくても文句を言う事は出来ないでしょう。
そもそも、<meta http-equiv="refresh">要素に依るリダイレクト指定も好ましいものではありません。
これには二つの理由があります。
この例の場合、ユーザエージェントがクライアントサイドスクリプトにもリフレッシュにも対応していなければ何も起こらない、すなわちスクリプト非対応版へ移動出来ないと言う最悪の事態になってしまいます。
また、<script>要素でスクリプト対応環境版へリダイレクトさせるスクリプトを実行させる方法もありますが、<meta http-equiv="refresh">要素に依るリダイレクト指定よりは幾つかの点でまだマシとは言え、好ましいものとは言えません。
<head><meta http-equiv="content-type" content="text/html; charset=shift_jis" /><meta http-equiv="content-script-type" content="text/javascript" /><title>○○のページ(スクリプト非対応版)</title>…<script type="text/javascript"><![CDATA[//location.href='スクリプト対応版へのURI';//]]></script></head>
スクリプトでのリダイレクトも、<meta http-equiv="refresh">同様ページを読んでいる最中にページが見られなくなる事があり得ると言う弊害があるからです。
どうしてもスクリプト対応環境と非対応環境を峻別したいのであれば、以下のような手動化の方がベターでしょう。
<head><meta http-equiv="content-type" content="text/html; charset=shift_jis" /><meta http-equiv="content-script-type" content="text/javascript" /><title>○○のページ(スクリプト対応版)</title>…</head><body><noscript class="notes"><ul><li>一部機能がご利用になれない場合、<a href="スクリプト非対応版へのURI">簡易版</a>をご利用ください。</li></ul></noscript>…</body>
勿論、クライアントスクリプトが実行出来ない環境にも可能な限り対応しなければならない事は言うまでもありません。
<noscript>要素には<script>要素と違って言語を指定する属性がありません。
現状、複数のスクリプト言語をサポートしているユーザエージェントはJAVAスクリプトとVBスクリプトをサポートするウィンドウズ版のインターネットエクスプローラくらいですが、実際にJAVAスクリプトとVBスクリプトを双方利用した場合にどうなるでしょうか。
HTML 4.01の仕様書には以下のような事が書かれております。
- The user agent doesn't support a scripting language invoked by a SCRIPT element earlier in the document.
これを和訳すると、
となります。
earlier
と言う表現は「〜より前の」と言う意味の比較級ですので、ここでは当該<noscript>要素の前の<script>要素がサポートしていないと解釈するのが順当と思われます。
つまり、複数言語を利用している場合は、<script>要素での指定が変わる度にそれ以降の<noscript>要素での対象言語が変わると考えられます。
ですから、以下のようなHTMLがあった場合、ウィンドウズ版インターネットエクスプローラ以外でJAVAスクリプトに対応しているユーザエージェントなら
いけない筈です。
<!-- JAVAスクリプトを扱う<script>要素 --><script type="text/javascript" src="…"></script><!-- 一番目の<noscript>要素 --><noscript>…</noscript><!-- VBスクリプトを扱う<script>要素 --><script type="text/vbscript" src="…"></script><!-- 二番目の<noscript>要素 --><noscript>…</noscript>
しかしながら、制作者が調べたところ、オペラ 7.x以降ではそのように処理されましたが、ファイヤーフォックスなどではそのような処理はされませんでした。
実際に複数のスクリプト言語を併用するケースは余り無いと思われますが、このような問題もある事は知っていて損は無いでしょう。
ネットスケープ 4.xでは、CSSを利用している文書で<noscript>要素の直後から余白などのスタイルが崩れる事があります。
好ましくはありませんが、テーブルで囲むと崩れなくなります。
XHTMLで記述した文書をXMLとして配信した場合、<noscript>要素は代替コンテンツとして機能しません。
XHTMLの場合に限った事ではありませんが、初めからスクリプトに全く依存しない文書を作り、スクリプトが動作する環境では文書読込終了時にスクリプトでのDOM操作で不要な代替コンテンツ要素を非表示にするなどした方が良いでしょう。
<script>要素でポップアップメニューをJAVAスクリプトで表示させる場合の記述です。
ここでは、<noscript>要素でポップアップメニューが表示出来ない環境向けの代替メニューも記述しております。
<div class="menu"><script type="text/javascript" src="popUpMenu.js"></script><noscript><h2>メニュー</h2><ul><li><a rel="next" href="about.html">このサイトについて</a></li>…<li><a rel="appendix" href="http://…/bbs.cgi">掲示板</a></li><li><a rel="bookmark" href="link.html">リンク</a></li></ul></noscript></div>
人気女優をモデルにしたオリジナルキャラクタのイラスト例とアニメーション動画
