はじめに
ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮して、同じように動作するスクリプトを、「クロスブラウザスクリプト」と言います。クロスブラウザスクリプトを実現するためのテクニックの一つに、スクリプトが実行されているブラウザの種類を判断し、そのブラウザに合わせたスクリプトを実行する、という方法があります。このテクニックを利用すると、ブラウザの違いだけでなく、ブラウザを実行しているOSの違いを、ある程度判断することも可能です。
ブラウザの見栄えは、OSの違いによって変わる場合があります。代表的な例として、例えば、WindowsとMacintoshのディスプレイの明度の違いがあげられるでしょう。ディスプレイの設定が標準状態の場合、Windowsの方がMacintoshと比べて、明度が低いため、同じ写真や画像を表示しても、Windowsの方が、Macintoshより暗く表示されてしまいます。このため、Macintoshで加工した画像を使ったサイトを、Windowsで見ると、画像が暗くてよくわからない、といったことが起こる場合があります。このような時、今回紹介する方法を使って、ブラウザが実行されているOSを判断すると、それぞれのOSに最適化した画像を用意しておき、OSに合わせて別の画像を表示する、といったことが可能になります。
それ以外にも、それぞれのOSに合わせてフォントやマージンなどを設定した、CSSの設定ファイルを用意しておいて、OSごとに違った設定ファイルを読み込む、といった使い方が考えられるでしょう。
今回は、ユーザエージェントに関する情報を持っている、navigatorオブジェクトのuserAgentプロパティから、OSに関する情報を探しだすことによってOSを判断し、OSに応じて異なるスクリプトを実行する方法について、解説します。
ユーザエージェント情報について
ユーザエージェントとは、HTTPのヘッダー部分につけられている文字列です。この文字列は、ブラウザ自身を表す文字列からできており、しばしばブラウザ自身のことをさす場合もあります。そしてその内容は、ブラウザごとに違い、ブラウザの名前やバージョンといったような、ブラウザに関する詳細な情報からなっています。
JavaScriptでは、NavigatorオブジェクトのuserAgentプロパティが、ブラウザのユーザエージェント情報を持っています。Navigatorオブジェクトは、ブラウザに関する情報を待ったオブジェクトです。
NavigatorオブジェクトのuserAgentプロパティは、次の用法で使用します。
navigator.userAgent
次のサンプル（Sample_1.html）では、ブラウザのユーザエージェント情報を取得し、ブラウザに書き出しています。できればぜひ、色々なバージョンのブラウザ、OSでこのスクリプトを実行し、その違いを確認してみてください。
<script type="text/javascript"> <!-- document.write(navigator.userAgent) //--> </script>
ユーザエージェント情報の中には、色々な情報が含まれています。そして、その中には、「Macintosh」「Mac OS」「Mac_PowerPC」「WinNT」あるいは「Windows」、さらには「Linux」「SunOS」「BSD」といった、OSに関連する文字も含まれています。OSを判断するためには、userAgentプロパティ内の、これらの値を調べ、判断すればいいのです。
今回、userAgentプロパティ内の特定の値を調べるには、String（文字列）オブジェクトのindexOfメソッドを使います。Stringオブジェクトは、文字列に関する情報を提供したり、文字列の操作を行うオブジェクトです。前回の『ブラウザによるイベントの取り扱いの違いを吸収する』でも、appNameプロパティの先頭の文字を、StringオブジェクトのcharAtメソッドを使って取り出しました。前回や今回のように、Navigatorオブジェクトのプロパティの値を、Stringオブジェクトを使って操作することができるのは、Navigatorオブジェクトのプロパティが、元々文字列の属性を持っているからです。
indexOfメソッドは、文字列の中から特定の文字列を検索するメソッドです。indexOfメソッドの用法は、次の通りです。
文字列.indexOf(検索対象文字列,[検索開始位置])
indexOfメソッドは、設定した文字列の中から、「検索対象文字列」で指定した文字の位置を、0スタートの先頭から数えた数値で返します。また、もし文字列内に指定した文字が含まれていない場合は、「-1」の値を返します。また、「検索開始位置」は省略可能で、その場合は先頭から検索します。
次に、実際にOSを判断する手順を見ていきましょう。
