ブラウザに合わせてページを振り分ける
ここでは、『Sample_1.html』のスクリプトを応用したサンプルを紹介します。ブラウザを判断し、ブラウザに合わせて用意した各ページへ移動するスクリプトを見てみましょう。
ブラウザには、機能的に大きな変化があったバージョンがあります。前のサンプルでは、ブラウザの種類やそのバージョンを1種類ずつ判断していました。それを今度は、大きく変更があったバージョンのブラウザを、ある程度まとめて振り分けるようにします。
ブラウザの種類やバージョンによる違いに合わせて最適化されたページに振り分けるといった処理は、以前からよく行われてきました。JavaScriptが出てくるまではCGIなどを使って、サーバー側で行う必要がありましたが、JavaScriptがサポートされてからは、ブラウザ側で行えるようになったのです。そういった意味では、この処理は最もJavaScriptらしい処理の一つと言えます。
今回、ブラウザの振り分け方は次のようにします。
- Netscape Navigatorのバージョン2および3、Internet Explorerのバージョン3は、古いブラウザ用のページへ振り分ける。
- スタイルシートがサポートされたInternet Explorerのバージョン4は、Internet Explorer 4用のページに振り分ける。
- スタイルシートはサポートされたが、完全ではなかったNetscape Navigatorのバージョン4は、Netscape Navigator 4用のページに振り分ける。
- Netscape Navigatorのバージョン6、7、8は、機能的な変化はほとんどないので同じページに振り分ける。
- 同様に描画に関する機能にあまり差がないFirefoxとMozillaも、同じページに振り分ける。
- 機能的にそれほど差がないInternet Explorerのバージョン5と6も、同じページに振り分ける。
- ただし、Internet Explorerのバージョン6のSP2版は、セキュリティ関連の機能が数多く追加されているので、別のページに振り分ける。
- Opera、Safariは、それぞれの専用ページへ振り分ける。
それではサンプルを見ていきましょう（Sample_2.html）。実際に試す場合は、サンプル以外にも、それぞれのブラウザ用のページを用意しておいてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!--
body { background-color: #ffffff; }
--> </style> </head> <body> *各ブラウザ専用ページに振り分ける <p> <script type="text/javascript"> <!--
document.write("ブラウザ判別中...");
//--> </script> </p> <noscript> <a href="No_Script.html">JavaScript未対応ブラウザ用のページはこちら</a> </noscript> <script type="text/javascript"> <!--
var UA=navigator.userAgent;
if(UA.indexOf("Mozilla/2") != -1 || UA.indexOf("Mozilla/3") != -1){location.href = "Old.html"} if(UA.indexOf("MSIE") == -1 && UA.indexOf("Mozilla/4") != -1)
{location.href = "Old.html"} if(UA.indexOf("MSIE") == -1 && UA.indexOf("Mozilla/4") != -1) サンプルでは、25行目～38行目の<script type="text/javascript">～</script>にスクリプトを設定しています。このサンプルでも前のサンプルと同様、イベントハンドラを使って関数を呼び出すようにすると、古いブラウザでは機能しない場合があるため、今回も、body要素の一番最後にスクリプトを設定しています。それでは、スクリプトを見ていきましょう。
Sample_1.htmlの「ブラウザの種類をフォームに書き出す」では、if文を入れ子にしていくことによって、ブラウザを判断していました。今回のサンプルでは少し方法を変えて、論理演算子のOR演算子「||」やAND演算子「&&」を使って、ブラウザを判断しています。論理演算子に関しては、第2回『JavaScriptを使ってクライアントのOSに応じた処理を行う』で解説していますので、併せて参照してください。
Sample_1と同様Sample_2でも、27行目「var UA=navigator.userAgent;」でユーザエージェントの値を、変数UAに代入しています。そして、実際のブラウザの振り分け処理は、28行目～37行目になります。
if(UA.indexOf("Mozilla/2") != -1 || UA.indexOf("Mozilla/3") != -1)
このスクリプトを、バージョン3か2のNetscape NavigatorやInternet Explorer 3で実行した場合、これらのブラウザは、ユーザエージェント内に、「Mozilla/2」か「Mozilla/3」の文字列が含まれているので、28行目のif文の条件式「UA.indexOf("Mozilla/2") != -1 || UA.indexOf("Mozilla/3") != -1」が真となります。続くif文の処理で、locationオブジェクトのhrefプロパティに「Old.html」の値を設定するため、HTMLファイル「Old.html」がブラウザに読み込まれます。
この他のブラウザも同様に、それぞれ振り分けるブラウザが持つユーザエージェントを判断し、それぞれのブラウザ用に用意したページへと振り分けていきます。
例えば、MozillaかFirefox用のページへの振り分けの判断は、ユーザエージェントに「Mozilla/5」と「Netscape」という文字列が含まれていて、さらに「Safari」という文字列が含まれていないブラウザとなるので、31行目にある条件式、「UA.indexOf("Mozilla/5") != -1 && UA.indexOf("Netscape") == -1 && UA.indexOf("Safari") == -1」となります。
Internet Explorer 5か、SP2でないInternet Explorer 6であるかの判定は、ユーザエージェント内に「MSIE 5」という文字列が含まれていて、かつ「Opera」という文字列が含まれていないか、あるいは、文字列「MSIE 6」が含まれていて、かつ「SV1」「Opera」という文字列が含まれていないか、という条件で判定します。33行目の「UA.indexOf("MSIE 5") != -1 && UA.indexOf("Opera") == -1 || (UA.indexOf('MSIE 6') != -1 && UA.indexOf('SV1') == -1 && UA.indexOf('Opera') == -1)」という記述が該当します。
今回のサンプルでは、ブラウザ振り分けのスクリプト以外にも、22行目～24行目でnoscript要素を使って、JavaScriptに対応していないブラウザを使っていたり、JavaScriptの実行を止めているユーザーのためのリンクを作っています。
<noscript> <a href="No_Script.html">JavaScript未対応ブラウザ用のページはこちら</a> </noscript>
また、「ブラウザ判別中...」という文字も、16行目～20行目でJavaScriptを使って書き出すことによって、JavaScriptに対応していないブラウザでは、表示しないようにしています。
<script type="text/javascript"> <!--
document.write("ブラウザ判別中...");
//--> </script>
クロスブラウザスクリプトのサイトを作る場合、JavaScriptだけに気を配るのではなく、JavaScriptを実行できない、あるいはJavaScriptを実行しない環境のユーザーにも配慮したサイト作りを心がけることが必要です。
まとめ
今回は、ブラウザの種類やバージョンを判断するスクリプトを紹介し、解説しました。次回も、今回に引き続き、ブラウザにおけるJavaScriptの実装の違いを吸収するために、ブラウザの種類を判断し、それに合わせたスクリプトを作る例を紹介していきたいと思います。
