第71回 「Internet ExplorerとSafari、Operaを判別する」


 今回はInternet ExplorerとSafari、Operaを判別する方法について説明します。
 ブラウザを完璧に判別するのは難しいのですが、基本的にuserAgentに含まれる文字列でブラウザを調べていきます。含まれる文字列を調べる場合には正規表現を使う方法と単純な文字列検索を使う方法があります。単純に特定の文字列が含まれるかどうか調べればよいので、indexOf()を使って調べます。indexOf()は以下の書式になります。

検索対象文字列.indexOf(検索文字列,検索位置)

 今回はuserAgentが検索対象文字列になります。検索位置は省略することができ、省略した場合は先頭(ゼロ)になります。
 検索文字列が特定のブラウザを示すものになりますが、Internet ExplorerとSafariのuserAgentが返す文字列は以下のようになります。上がInternet Explorerで下がSafariになります。

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/103u (KHTML, like Gecko) Safari/100

 Internet Explorerの場合はMSIEという文字列があるかどうか調べます。userAgent内では他にInternet Explorerを示す文字列がないためです。Safariの場合にはuserAgent内にSafariの文字列があるかどうか調べます。
 実際のスクリプトは以下のようになります。ボタンをクリックするとブラウザ名が表示されます。


<html>
<head>
<title></title>
<script language="JavaScript"><!--
// ブラウザ名を文字列で返します。
function checkBrowser()
{
var uName = navigator.userAgent;
if (uName.indexOf("Safari") > -1) return "Safari";
if (uName.indexOf("MSIE") > -1) return "Internet Explorer";
}
// --></script>
</head>
<body>
<form>
<input type="button" value="チェック" onClick="checkBrowser()">
</form>
</body>
</html>


 次にOperaブラウザも判別してみます。Operaが返すuserAgentの文字列は以下のようになります。

Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Opera 7.01 [en]

 OperaはInternet Explorerではないにも関わらずMSIEという文字が含まれています。ブラウザは過去の経緯によりシェアの多いブラウザだと思わせるようにappName、appVersion、userAgentが返す文字列を詐称(いつわる)する事が多々あります。ブラウザ判別プログラムが複雑になってしまうのは、このようなシェア争いの経緯による所もあります。
 しかし、複雑になってしまってもどうしようもないので、うまく判別していくしかありません。上記のスクリプトではOperaはInternet Explorerになってしまいますので、ここにOperaを判別するためuserAgent内にOperaの文字列があるかどうか調べます。
 実際のスクリプトは以下のようになります。


<html>
<head>
<title></title>
<script language="JavaScript"><!--
// ブラウザ名を文字列で返します。
function checkBrowser()
{
var uName = navigator.userAgent;
if (uName.indexOf("Safari") > -1) return "Safari";
if (uName.indexOf("Opera") > -1) return "Opera";
if (uName.indexOf("MSIE") > -1) return "Internet Explorer";
return "Netscape";
}
// --></script>
</head>
<body>
<form>
<input type="button" value="チェック" onClick="alert(checkBrowser())">
</form>
</body>
</html>


 注意しないといけないのは以下のように先にInternet Explorerを判別するとOperaであってもInternet Explorerになってしまう事です。


function checkBrowser()
{
var uName = navigator.userAgent;
if (uName.indexOf("Safari") > -1) return "Safari";
if (uName.indexOf("MSIE") > -1) return "Internet Explorer";
if (uName.indexOf("Opera") > -1) return "Opera";
return "Netscape";
}

 確実に、それと判別できるブラウザからチェックしていくのがポイントです。特に新しいブラウザは過去のブラウザ名を返すことが多いため、基本的に最新のブラウザからチェックしていきます。サンプルではいずれも該当しない場合にはNetscapeとしていますが、本当はもっとしっかりと判別する必要があります。ただ、Netscape自体の役割、シェアとも低くなっているため様子を見てスクリプトを作るのが良いでしょう。


 次回はInternet Explorerのバージョンを判別します。






2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)