はじめに
ブラウザの種類やバージョン、おのおののブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。本連載では、クロスブラウザスクリプトを実現する方法について、順を追って解説しています。
手法の一つに、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行する方法があります。前回は、ディスプレイの表示領域いっぱいにウィンドウを開くサンプルを例にとり、その方法を解説しました。今回も引き続き、ブラウザの実装に合わせたJavaScriptを実行する例を解説していきます。
前回までの解説内容をもとに進めていくため、既存の記事も併せて参照してください。
既存の記事
- 第1回：ブラウザによるイベントの取り扱いの違いを吸収する
- 第2回：JavaScriptを使ってクライアントのOSに応じた処理を行う
- 第3回：ユーザエージェントからブラウザの種類やバージョンを判断する
- 第4回：ブラウザに合わせたスクリプトを実行する
- 第5回：ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く
Internet Explorer 7とOpera 9の判断方法
さて、本題に入る前に、第3回で各ブラウザのユーザーエージェントの特徴を解説し、第4回で、そのユーザーエージェント情報を元にブラウザを判断する方法を解説しました。しかし、その原稿執筆時から、新たにInternet Explorer（以下、IE） 7とOpera 9が発表されています。今回は、まずこれらの新しいブラウザのユーザーエージェント情報を見ていきましょう。
IE 7とOpera 9のユーザーエージェントの値を持つ、navigatorオブジェクトのuserAgentプロパティの実行結果は、それぞれ次のとおりです。
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
Opera/9.10 (Windows NT 5.1; U; ja)
Opera/9.10 (Macintosh; PPC Mac OS X; U; ja)
IE 7は、今までのユーザーエージェントの命名ルールを踏襲したユーザーエージェントになっています。つまり実際のバージョンとは関係なくバージョン番号は「4.0」で、その後ろにある括弧内の付加情報部分に、実際のバージョンを表す文字列が含まれている、という形式です。そして、IEのバージョンを表す文字列は「MSIE 7.0」なので、この部分を使ってブラウザを判断できます。
これに対し、Operaでは、大幅なユーザーエージェントの見直しが行われています。Opera 9より前のバージョンでは、例えばOpera 8であれば「Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 8.52」といったように、IEに合わせたユーザーエージェントの後ろに、Operaであることを示す文字列と、実際のバージョンを表す文字列を付加した形式をとっていました。つまり、Operaは、ユーザーエージェントから見るとIEのふりをしていたことになります。しかし、Opera 9では、IEのふりをすることを完全にやめ、実際のブラウザ名とバージョンからなるユーザーエージェントになっているのです。
以上のことを踏まえて、IE 7とOpera 9を考慮したブラウザの種類やバージョンを判断するスクリプトは、次のようになります。
if(navigator.userAgent.indexOf("MSIE") == -1){ if(navigator.userAgent.indexOf("Mozilla/2") != -1) {Netscape Navigator2.X用のスクリプト} if(navigator.userAgent.indexOf("Mozilla/3") != -1) {Netscape Navigator3.X用のスクリプト} if(navigator.userAgent.indexOf("Mozilla/4") != -1) {Netscape Navigator4.X用のスクリプト} } if(navigator.userAgent.indexOf("Mozilla/5") != -1){ if(navigator.userAgent.indexOf("Safari") != -1) {Safari用のスクリプト} else{ if(navigator.userAgent.indexOf("Netscape6/") != -1) {Netscape Navigator6.X用のスクリプト} else{ if(navigator.userAgent.indexOf("Netscape/7") != -1) {Netscape Navigator7.X用のスクリプト} else{ if(navigator.userAgent.indexOf("Netscape/8") != -1) {Netscape Navigator8.X用のスクリプト} else{ if(navigator.userAgent.indexOf("Firefox") != -1) {Firefox用のスクリプト} else{Mozilla用のスクリプト} } } } } } if(navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Opera") == -1){ if(navigator.userAgent.indexOf("Mozilla/2") != -1) {Internet Explorer2.X用のスクリプト} if(navigator.userAgent.indexOf("Mozilla/3") != -1) {Internet Explorer3.X用のスクリプト} if(navigator.userAgent.indexOf("Mozilla/4") != -1){ if(navigator.userAgent.indexOf("MSIE 7") != -1) {Internet Explorer7.X用のスクリプト} else{ if(navigator.userAgent.indexOf("MSIE 6") != -1){ if(navigator.userAgent.indexOf("SV1") != -1) {Explorer6.X SP2用のスクリプト} else{Internet Explorer6.X用のスクリプト} } else{ if(navigator.userAgent.indexOf("MSIE 5") != -1) {Internet Explorer5.X用のスクリプト} else{Internet Explorer4.X用のスクリプト} } } } } if(navigator.userAgent.indexOf("Opera") != -1) {Opera用のスクリプト}
第4回『ブラウザに合わせたスクリプトを実行する』で紹介した方法からの変更点は、次のとおりです。
- 前回は、IEとOperaを一緒に判断していましたが、今回は
if文の処理からOperaの判断を除いています。 - 37行目でIE 7.Xを判断しています。
- 53行目でIEの判断処理から切り分けたOperaを判断しています。
if(navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Opera") == -1){
if(navigator.userAgent.indexOf("MSIE 7") != -1)
if(navigator.userAgent.indexOf("Opera") != -1) {Opera用のスクリプト}
例えば、第4回で紹介した「ブラウザの種類をフォームに書き出す」のサンプルを、このブラウザの判断方法を使って作り直すと、次のようになります。
<!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>Sample_1</title> <style type="text/css"> <!-- body { background-color: #ffffff; } --> </style> </head> <body> *ブラウザの種類をフォームに書き出す <p> <form name="Browser"> ブラウザ： <input type="text" name="namae" SIZE=30> </form> </p> <script type="text/javascript"> <!-- var B_Name=document.Browser.namae; var UA=navigator.userAgent; if(UA.indexOf("MSIE") == -1){ if(UA.indexOf("Mozilla/2") != -1) {B_Name.value="Netscape Navigator2.X"} if(UA.indexOf("Mozilla/3") != -1) {B_Name.value="Netscape Navigator3.X"} if(UA.indexOf("Mozilla/4") != -1) {B_Name.value="Netscape Navigator4.X"} } if(UA.indexOf("Mozilla/5") != -1){ if(UA.indexOf("Safari") != -1){B_Name.value="Safari"} else{ if(UA.indexOf("Netscape6/") != -1) {B_Name.value="Netscape Navigator6.X"} else{ if(UA.indexOf("Netscape/7") != -1) {B_Name.value="Netscape Navigator7.X"} else{ if(UA.indexOf("Netscape/8") != -1) {B_Name.value="Netscape Navigator8.X"} else{ if(UA.indexOf("Firefox") != -1) {B_Name.value="Firefox"} else{B_Name.value="Mozilla"} } } } } } if(navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Opera") == -1){ if(UA.indexOf("Mozilla/2") != -1) {B_Name.value="Internet Explorer3.X"} if(UA.indexOf("Mozilla/3") != -1) {B_Name.value="Internet Explorer3.X"} if(UA.indexOf("Mozilla/4") != -1) { if(UA.indexOf("MSIE 7") != -1) {B_Name.value="Internet Explorer7.X"} else{ if(UA.indexOf("MSIE 6") != -1){ if(UA.indexOf("SV1") != -1) {B_Name.value="Internet Explorer6.X PS2"} else{B_Name.value="Internet Explorer6.X"} } else{ if(UA.indexOf("MSIE 5") != -1) {B_Name.value="Internet Explorer5.X"} else{B_Name.value="Internet Explorer4.X"} } } } } if(UA.indexOf("Opera") != -1){B_Name.value="Opera"} //--> </script> </body></html>
- サンプルファイル「sample1.html」を試す
さて、以上がIE 7、Opera 9を考慮した、ブラウザの種類とバージョンを判断する処理となります。とは言え現実的には、クロスブラウザスクリプトを作る場合でも、ここまで細かくブラウザの種類やバージョンを判断するようなことは滅多にないでしょう。実際は、これから紹介するスクリプトや、ここで紹介した処理の必要な部分を抜き出して、あるいは組み合わせて使っていくことになります。
それでは、ブラウザの実装に合わせたJavaScriptを実行する例を見ていきましょう。
