JavaScriptの無効化ユーザーと有効化ユーザーへの対応の切替え
昔はセキュリティの問題から意図的に利用しているブラウザのJavaScriptを無効にする方がいましたが、現在ではほとんどのWebページでJavaScriptが利用されていて、有効になっていないとまともに観覧することができないWebページもあり無効にするメリットはなくなってきています。
ですが何らかの理由でJavaScriptを無効にしているユーザーもほんの少数ですがいます。
そうした方へも問題なくWebサイトや個々のページを利用してもらえるように、HTMLのnoscript要素を利用してJavaScriptの無効化ユーザーと有効化ユーザーへの対応の切替えを行うことができます。
noscript要素は利用する頻度は少ないですがもしものために覚えておくと良いでしょう。
noscript要素の使い方
HTML4.01まではbody要素の中でしか利用できなかったnoscript要素ですが、HTML5からはhead要素の中でも利用できるようになりました。
ただ、head要素の中で記述する場合は、link,style,meta要素しか入れることができません。
noscript要素の利用は、開始タグと終了タグの中に記述していきます。
<noscript>
//スクリプトが無効になっているブラウザに対応させる記述
</noscript>
実際にどのように利用していくのかをhead要素の中で利用する場合とbody要素の中で利用する場合と2パターンをサンプルで説明します。
head要素の中でnoscript要素を利用
CSS3ではアニメーションなど多くの動きが実装できますので、JavaScriptを利用しなくてもある程度動きのあるリッチなWebサイトが構築できるでしょう。もしスクリプトが無効であった場合に別のCSSで対応するといったこともできます。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>noscript sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<noscript>
<link rel="stylesheet" href="css/noscript.css">
</noscript>
</head>
スマートフォン用の動きのあるグローバルメニューなど動かなくことを考えて、スクリプトが無効のとき用のCSSを読み込むようにすれば対応ができます。他にも多くの動きがJavaScriptで実装されていると思うので、ある程度問題なくWebサイトが利用できるようにCSSで構築しておくのも良いでしょう。
body要素の中でnoscript要素を利用
body要素の中で記述する場合は、よくフォールバックを提供するために利用されます。
例えば、スクリプトが無効になっていることをユーザーに伝えるだけであれば以下のように対応することができます。
<main>
<script type="text/javascript">
document.write("あなたはスクリプトが作動するブラウザをご利用です。")
document.write("<h2>noscript sample<\/h2>");
document.write("<p>スクリプトが作動するブラウザで表示されるコンテンツ<\/p>");
</script>
<noscript>
<p>ご利用のブラウザはJavaScriptをサポートしていません。</p>
</noscript>
</main>
script要素では普通にJavaScriptを記述しておいて、もしスクリプトが無効なブラウザを利用している場合はスクリプトが効きませんのでnoscript要素が効くようになります。ここでJavaScriptをサポートされていないことをユーザーに伝えることができます。
他にも、どうしてもJavaScriptを有効にしてもらわないとサービスを提供できないWebページでしたら、ユーザーに対してスクリプトを有効化させるように促すメッセージなどを表示させると良いでしょう。
一応お伝えしておくと、noscript要素はXHTML構文ではサポートされていません。
今やほとんどのWebサイトがHTML5で構築されているので気にしなくても大丈夫だと思いますが。
そんなに頻繁に利用することはないnoscript要素ですが、もしものために覚えておきましょう。
