第74回 「MacOS XのブラウザSafariのバージョンを判別(1)」
今回はMacOS XのブラウザSafariのバージョンを判別するプログラムを作成します。
SafariはMacOS Xでの標準ブラウザになるのですが、他のブラウザと比べてやっかいな状態になっています。多くの場合に判別するブラウザは
・Internet Explorer
・Netscape Navigator
ですが、ここにSafariが入ってくる事になります。Safariがやっかいなのは以下のuserAgentの文字列を見てみると分かります。
●MacOS X 10.2のもの
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.6
●MacOS X 10.3のもの
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/103u (KHTML, like Gecko) Safari/100.1
実際にはSafari/85だったり細かいバージョンがいくつか存在します。困るのはGeckoという文字が入っている事です。なぜ困るかと言うと、この文字がGeckoエンジンを利用したブラウザ、代表的なものとしてはNetscape 6以降、Mozillaなどがあります。これらは同じエンジンを利用しているので、ほぼ同じようにレイアウトされます。(HTML,CSSなどの解釈が同じ)
Netscape 6以降かどうかは、このGeckoの文字列で判別する事が多いため、間違ってSafariもNetscapeと判別されてしまいます。このため、ブラウザを判別する場合には
(1) Safari
(2) Netscape
の順番で処理しなければなりません。この順番でブラウザを判別したらSafariのバージョンを抜き出す作業に入ります。
Safariの場合にはuserAgent以外にもappVersionにバージョンが表記されています。
5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/103u (KHTML, like Gecko) Safari/100.1
文字列の最後の/以降がバージョンになります。と書きたい所なのですが、Safariのバージョンは
・MacOS X 10.2のもの(v85.x)がバージョン1.0
・MacOS X 10.3のもの(v100.x)がバージョン1.1
となっています。つまりuserAgentに書かれているバージョンと名目上のバージョンが異なっているのです。どこから、どの範囲がどのバージョンになるのかはApple Computer次第という何とも困った状態になっています。
今回はuserAgent内のバージョン(v85やv100)のみを抜き出してみることにします。
文字列の最後からみて/がある次の文字列以降がバージョンになるのでlastIndexOf()を使って文字列の最後から検索を行います。/の次の文字から一番最後までを抜き出します。最後の位置は文字列の長さになりますのでlengthを使って取得することができます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
// Safariのバージョンを返します
function getVersion()
{
var uName = navigator.userAgent;
sPtr = uName.lastIndexOf("/");
ePtr = uName.length;
ver = uName.substring(sPtr+1,ePtr);
return eval(ver);
}
// --></script>
</head>
<body>
<form>
<input type="button" value="チェック" onClick="alert(getVersion())">
</form>
</body>
</html>
また、split()を使って判別すると非常に簡単になります。これは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
// Safariのバージョンを返します
function getVersion()
{
var uName = navigator.userAgent;
ver = uName.split("/")[3];
return eval(ver);
}
// --></script>
</head>
<body>
<form>
<input type="button" value="チェック" onClick="alert(getVersion())">
</form>
</body>
</html>
次回はv85.xだったら1.0、v100.xだったら1.1を返すプログラムについて説明します。