ブラウザに合わせたスクリプトを実行する

クロスブラウザスクリプトの作成テクニック 第4回

今回は、JavaScriptを使ってブラウザの種類やバージョンを判断し、実行するスクリプトを変える方法を、実例を挙げながら解説しています。具体的には、ユーザエージェントから使用されているブラウザを判断し、各ブラウザ用のページへ遷移させるスクリプトについて解説します。

はじめに

　ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを、クロスブラウザスクリプトと言います。本連載では、クロスブラウザスクリプトを実現する方法について順を追って解説します。

　クロスブラウザスクリプトを作る上で、それぞれのブラウザがどのJavaScriptをサポートしているかを知ることは大切です。さらに、それを知った上で、そのスクリプトが実行されるブラウザの種類やバージョンを特定することが、すべての基本となり、最も重要な事柄の一つになります。

　前回、『ユーザエージェントからブラウザの種類やバージョンを判断する』では、JavaScriptに対応した主なブラウザがサポートしているJavaScriptを明確にしました。そしてさらに、ブラウザの種類やバージョンに関しては、ブラウザ自身の素性を表すユーザエージェントを元に、どのブラウザがどのようなユーザエージェントを持っているか、ブラウザが発展してきた経緯と共に解説しました。

　今回は、前回までの事柄を元に、JavaScriptを使ってブラウザの種類やバージョンを判断し、実行するスクリプトを変える方法を、実例を挙げながら解説していきたいと思います。

　今回は、前回解説した内容をふまえて解説を進めて行くことになります。前回の内容も併せて参照するようにしてください。

ブラウザの種類を判断するスクリプト

　それでは、ブラウザの種類を判断するスクリプトを見てみましょう。

　JavaScriptがサポートされたのは、Netscape Navigatorではバージョン2から、Internet Explorerではバージョン3からとなります。また、それ以外のJavaScriptをサポートしているブラウザで一般的なものには、Netscape Navigatorから派生したMozilla、Firefoxをはじめ、OperaやSafariなどがあります。これらのブラウザを判断するスクリプトは、次のようになります（このスクリプトの「○○用スクリプト」の箇所に、それぞれのブラウザ用のスクリプトを設定します）。

ブラウザの種類を判断するスクリプト

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){
    if(navigator.userAgent.indexOf("Mozilla/2") != -1)
        {Internet Explorer3.X用のスクリプト}
    if(navigator.userAgent.indexOf("Mozilla/3") != -1)
        {Internet Explorer3.X用のスクリプト}
    if(navigator.userAgent.indexOf("Mozilla/4") != -1){
        if(navigator.userAgent.indexOf("Opera") != -1)
            {Opera用のスクリプト}
        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用のスクリプト}
            }
        }
    }
}

　このスクリプトでは、ユーザエージェントの値に「Mozilla/2」「Mozilla/3」「Mozilla/4」を持つブラウザのうち、Safariを含めたNetscape Navigator系のブラウザか、Operaを含めたInternet Explorer系のブラウザのどちらであるかは、ユーザエージェント内にInternet Explorerを表す文字列である「MSIE」があるかで判断しています。

　また、以下に挙げる、ユーザエージェントの情報と実際のブラウザのバージョンが異なる点も考慮しています。

• バージョン6以降のNetscape NavigatorやMozilla、Firefox、Safariのユーザエージェントのバージョンを表す値が、実際のバージョンと異なる「Mozilla/5」であること。
• 一部のInternet Explorer 3.Xが、バージョン2を示すような値を持っていること。
• バージョン5以降のInternet ExplorerやOperaのバージョンを表す値が「Mozilla/4」であること。

　さらに、このスクリプトでは、ユーザエージェント内に文字列「SV1」があるかどうかで、Windows XP SP2であるかも判断しています。

　次に、このスクリプトを実際に利用したサンプルを見てみましょう。