ブラウザのバージョンを調べる２

HOME
JavaScript入門
ブラウザのバージョンを調べる２

前のページではInternet ExplorerとFireFoxのブラウザバージョンを調べる方法について見ました。このページでは残るブラウザ、Opera，Safari，Google Chromeのブラウザバージョンを調べてみたいと思います。

今回もnavigator.userAgentを利用してブラウザバージョンを取得する方法について考えます。

ブラウザバージョンを調べる流れ

前のページと比べて、今回はちょっと手間が増えます。ブラウザを判別するために固有の文字列をindexOf()で探しますが、それがそのまま切り出し位置になりません。ということで開始位置取得にもう一度indexOf()を使用することになります。

以下に私の環境でのnavigator.userAgentの値をもう一度記しておきます。これを見てそれぞれのブラウザの判別文字列、開始文字列、終了文字列を表にすると以下のようになります。

Opera: Opera/9.80 (Windows NT 6.1; U; en) Presto/2.9.168 Version/11.50
Chrome: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.163 Safari/535.1
Safari: Mozilla/5.0 (Windows; U; Windows NT 6.1; ja-JP) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

ブラウザ	判別文字列	開始文字列	終了文字列
Opera	Opera	Version	最後（文字列長）
Chrome	Safari○ Chrome○	Chrome	半角スペース
Safari	Safari○ Chome×	Version	半角スペース

ではこの表を元にスクリプトを組んでみましょう。

ブラウザ判別スクリプト

では、以下のスクリプトをHTMLのBODY内に記入してみてください。

<script>

var nvUA = navigator.userAgent;
var cutSt,cutEd;  //バージョンを切り出す位置情報を取得
var bwVer;    //バージョンを格納

//Operaか調べる
if ( nvUA.indexOf("Opera") != -1 )
{
  //開始位置の指標「Version」の位置を取得、終了位置は文字列長
  cutSt = nvUA.indexOf("Version");
  cutEd   = nvUA.length;
  
  //バージョンの切り出し
  bwVer = nvUA.substring(cutSt+8,cutEd);
  
  //頭に「Opera」を付けてバージョンを書き出す
  document.write("Opera "+ bwVer);
}

//「Safari」が含まれるか調べる
if ( nvUA.indexOf("Safari") != -1 )
{
  //「Chrome」が含まれるか調べる
  if ( nvUA.indexOf("Chrome") != -1 )
  {
    cutSt = nvUA.indexOf("Chrome");
    cutEd   = nvUA.indexOf(" ",cutSt);
    
    bwVer =nvUA.substring(cutSt+7,cutEd);
    
    document.write("Google Chrome "+bwVer);
  }
  else
  {
    cutSt = nvUA.indexOf("Version");
    cutEd   = nvUA.indexOf(" ",cutSt);
    
    bwVer = nvUA.substring(cutSt+8,cutEd);
    
    document.write("Safari "+bwVer);
  }
}

</script>

＜上記スクリプトの結果＞

スクリプトの解説

上記スクリプトについて説明していきます。

変数の宣言

変数の宣言部分は前項と全く同じにしています。そちらを参考になさってください。

Operaか調べる

indexOf()を使って「Opera」があるかを調べています。文字列が存在していれば、if文の中の処理を行います。

切り取り開始の指標となる「Version」の位置を、再びindexOf()で取得します。終了位置は文字列長で代用しています。文字列の長さを取得するのはlengthでした。

実際に切り取りたいのはバージョンの数字の部分だけです。それで変数cutStから「Version/」の8文字を加えた位置からsubstring()で切り取ります。終了位置は変数cutEdです。

最後にdocument.write()で、ブラウザ名とバージョンを書き出しています。

「Safari」が含まれるか調べる

次はSafariとChromeを識別します。これは先に「Safari」を調べて、存在していれば「Chrome」を調べることで判別できました。「Chrome」があればChrome、無ければSafariです。 if文を2回使ってこれらの文字列が含まれるかどうかで分岐しています。

「Chrome」が存在する場合

「Chrome」が含まれているならば、今度は切り取り位置をindexOf()で取得していきます。開始位置「Chrome」の位置を変数cutStに格納します。

終了位置は「半角スペース」ですが、半角スペースは沢山あります。ですから検索開始位置を変数cutStにして、そこから最初に出現する半角スペースの位置を取得し、変数cutEdに格納します。

substring()で切り取る際は、切り取り開始位置を「Chrome/」の7文字分加えた所から切り取っています。

最後にブラウザ名とバージョンをdocument.write()で書き出します。

「Chrome」が存在しない場合

「Safari」があって「Chrome」が無いなら、Safariということになります。 else文の中で上の表に従って切り取り開始位置と終了位置を取得します。

切り取り開始位置は「Version」を検索します。終了位置は「半角スペース」ですが、こちらも検索開始位置を変数cutStにして間違った値を取得しないようにします。

実際に切り取る際には「Version/」の8文字を加えた位置からsubstring()で切り取ります。そしてdocument.write()でブラウザ名とバージョンを書き出しています。

前へ INDEXへ