Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ユーザエージェントからブラウザの種類やバージョンを判断する

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/03/17 12:00

今回は、JavaScriptを使って、スクリプトが実行されているブラウザの種類やバージョンを判断する方法について解説します。具体的には、ユーザエージェントに関する情報を持っているnavigatorオブジェクトのuserAgentプロパティから、ブラウザに関する情報を探し出します。

目次

はじめに

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

 クロスブラウザを実現する方法の一つに、「JavaScriptを実行するブラウザの種類やバージョンを判断し、そのブラウザに合わせたスクリプトを実行する」という方法があります。JavaScriptは、ブラウザの種類やバージョンによってサポートされている内容が異なることがあるため、ブラウザを判断し、その違いを吸収することは、クロスブラウザを実現する上でとても重要です。

 ブラウザの種類やバージョンを判断するためには、navigatorオブジェクトを使います。navigatorオブジェクトには、ブラウザに関する基本的な情報がプロパティとして収められています。この連載でも、前回navigatorオブジェクトのuserAgentプロパティを、前々回appNameプロパティを使って、ブラウザや、ブラウザが実行されているOSの種類を判断する方法を解説しました。

 navigatorオブジェクトは、ブラウザ自身の素性を表すユーザエージェント情報の全部、あるいは一部をオブジェクトとして持っています。これらの情報は、ブラウザを判断する時の重要な材料となります。しかし、このユーザエージェントの情報は素直にブラウザ自身を表していない場合が数多く、一筋縄ではいきません。このことは、ブラウザが開発されバージョンアップを重ねて来た経緯に、多いに関係があります。

 今回は、まずJavaScriptの種類と対応するブラウザの関係を明確にすると共に、navigatorオブジェクトが所有する「ブラウザの判断に使用できるプロパティ」を紹介します。そして、各ブラウザのユーザエージェントの特徴についても解説します。

 今回解説する内容(特にユーザエージェントに関して)は、一見クロスブラウザスクリプトと関係ないように思えるかもしれません。しかし、ブラウザ切り分けのテクニックの基礎となる、とても重要な部分です。

JavaScriptとブラウザの関係

 まず始めに、どのブラウザが、どのバージョンのJavaScriptをサポートしているかを表1にまとめます。これを知ることは、クロスブラウザスクリプトを作る上での基礎であり、大変重要です。現在JavaScriptはバージョン1.5までが公開されています。JavaScriptは基本的に下位互換が取れているため、JavaScript 1.5をサポートしているブラウザであれば、一部の例外を除き、それ以下のバージョンのJavaScriptもサポートしています。

表1 JavaScriptの各バージョンの特徴とサポートブラウザ
JavaScriptの種類 対応ブラウザ 特徴
JavaScript 1.0 Netscape Navigator 2.0以降、Internet Explorer 3.0以降 ブラウザのウィンドウを操作するwindowオブジェクトや、日付を取り扱うDateオブジェクトなど、基本的なオブジェクトが既に規格化されています。
JavaScript 1.1 Netscape Navigator 3.0以降、Internet Explorer 4.0以降 画像を取り扱うImageオブジェクトがサポートされました。これにより、ページ表示後の画像置き換えが可能になりました。
JavaScript 1.2 Netscape Navigator 3.0以降、Internet Explorer 4.0以降 ディスプレイサイズなど、ディスプレイに関する情報を持つscreenオブジェクトが追加されました。Netscape Navigatorでは、ウィンドウ上に絶対座標でコンテンツの位置を設定したり、重なりを指定することができるLayerオブジェクトが追加されています。また、Netscape Navigator、Internet Explorerとも、JavaScriptを使ってスタイルシートを操作することが可能です。
JavaScript 1.3 Netscape Navigator 4.06、Internet Explorer 5.0以降 文字コードがUNICODEになったほか、日付を取り扱うDateオブジェクトで年号が4桁で表せるようになったり、ミリセコンド単位の時間を扱えるようになったり、といった細かな部分で追加・変更が行われています。これらの処置は、ECMAScript(ECMA-262)の第1版と互換をとるためのものです。
JavaScript 1.4 なし ECMAScriptの第1版と完全互換のスクリプトです。JavaScript 1.4を搭載したブラウザは、結局発表されませんでした。
JavaScript 1.5 Netscape Navigator 6以降、Internet Explorer 5.0以降、Opera、Safari ECMAScriptの第3版と完全互換をとったスクリプトです。ナビゲータオブジェクト、ビルトインオブのうち、JavaScript 1.5として規格化されているのは、ECMAScriptと同様に、ビルトインオブジェクトの部分のみです。しかし、DOMをコントロールする方法は規定されているので、DOM化されたブラウザであれば、DOMの各要素に対し、JavaScriptを使ってアクセスし、値の取得、変更が可能です。

 表の中で、ECMAScriptというスクリプトが出てきています。このECMAScriptは、ヨーロッパの標準化機関であるECMA(European Computer Manufacturers Association)によって、インターネットで使用することを目的として標準化されたスクリプト言語です。ECMAScriptは、もともとJavaScript 1.1をベースとして規格化が進められ、現在、ECMA-262として仕様が一般に公開されています。

 ECMAScriptは、本来ブラウザで使われることを目的としていました。しかし、今では標準的なスクリプト言語として、ブラウザだけでなく、一般のアプリケーションでもサポートされるようになり、現在では、JavaScript対応をうたったブラウザやアプリケーションが数多く発表されています。しかし、これらのブラウザやアプリケーションは、正確にはJavaScript対応ではなく、ECMAScript対応といった方がよいのかもしれません。

 ECMAScriptでは、JavaScriptの手法を用いて、DOM(Document Object Model)にアクセスする方法を規定しています。また、Netscape NavigatorやInternet Explorer、Opera、Safariなどの最新版のブラウザはDOM化されているため、JavaScriptの手法を用いてDOMにアクセスし、設定されている値を変更することによって、HTMLファイルが表示された後でも表示内容を動的に変更することができます。このように、ブラウザの表示を動的に変更する手法を「Dynamic HTML」と言います。そしてこれをさらに一歩進めたものが「Ajax」です。Ajaxでは、サーバ間通信のインタフェースの一部にJavaScriptを使うことによって、効率よく通信を行い、かつその結果を動的に表示します。

 しかし、JavaScriptの実装やDOMの実装は、ブラウザの種類やバージョン、OSの種類によって異なります。これらの違いを吸収するためにも、ブラウザの種類やバージョンの判断は重要なのです。


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

著者プロフィール

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

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

バックナンバー

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

もっと読む

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