Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

スタイルシートやレイヤーを操作する

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/01/24 00:00

本連載では、クロスブラウザスクリプトを実現する方法を解説しています。前回は、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行する方法を、ディスプレイの表示領域いっぱいにウィンドウを開くサンプルを例に解説しました。今回も引き続き、ブラウザの実装に合わせたJavaScriptを実行する例を紹介していきます。

目次

はじめに

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

 手法の一つに、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行する方法があります。前回は、ディスプレイの表示領域いっぱいにウィンドウを開くサンプルを例にとり、その方法を解説しました。今回も引き続き、ブラウザの実装に合わせたJavaScriptを実行する例を解説していきます。

 前回までの解説内容をもとに進めていくため、既存の記事も併せて参照してください。

既存の記事

Internet Explorer 7とOpera 9の判断方法

 さて、本題に入る前に、第3回で各ブラウザのユーザーエージェントの特徴を解説し、第4回で、そのユーザーエージェント情報を元にブラウザを判断する方法を解説しました。しかし、その原稿執筆時から、新たにInternet Explorer(以下、IE) 7とOpera 9が発表されています。今回は、まずこれらの新しいブラウザのユーザーエージェント情報を見ていきましょう。

 IE 7とOpera 9のユーザーエージェントの値を持つ、navigatorオブジェクトのuserAgentプロパティの実行結果は、それぞれ次のとおりです。

IE 7
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) 
Opera 9(Windows版)
Opera/9.10 (Windows NT 5.1; U; ja)
Opera 9(MacOS X版)
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の判断を除いています。
  • 30~31行目
    if(navigator.userAgent.indexOf("MSIE") != -1
       && navigator.userAgent.indexOf("Opera") == -1){
    
  • 37行目でIE 7.Xを判断しています。
  • 37行目
    if(navigator.userAgent.indexOf("MSIE 7") != -1)
    
  • 53行目でIEの判断処理から切り分けたOperaを判断しています。
  • 53行目
    if(navigator.userAgent.indexOf("Opera") != -1) {Opera用のスクリプト}
    

 例えば、第4回で紹介した「ブラウザの種類をフォームに書き出す」のサンプルを、このブラウザの判断方法を使って作り直すと、次のようになります。

sample_1.html
<!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の実行例(Firefox 2.0)
sample1の実行例(Firefox 2.0)

 さて、以上がIE 7、Opera 9を考慮した、ブラウザの種類とバージョンを判断する処理となります。とは言え現実的には、クロスブラウザスクリプトを作る場合でも、ここまで細かくブラウザの種類やバージョンを判断するようなことは滅多にないでしょう。実際は、これから紹介するスクリプトや、ここで紹介した処理の必要な部分を抜き出して、あるいは組み合わせて使っていくことになります。

 それでは、ブラウザの実装に合わせたJavaScriptを実行する例を見ていきましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 半場 方人(ハンバ マサヒト)

    Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃...

バックナンバー

連載:クロスブラウザスクリプトの作成テクニック

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5