Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptを使ってクライアントのOSに応じた処理を行う

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

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

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

目次

はじめに

 ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮して、同じように動作するスクリプトを、「クロスブラウザスクリプト」と言います。クロスブラウザスクリプトを実現するためのテクニックの一つに、スクリプトが実行されているブラウザの種類を判断し、そのブラウザに合わせたスクリプトを実行する、という方法があります。このテクニックを利用すると、ブラウザの違いだけでなく、ブラウザを実行している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でこのスクリプトを実行し、その違いを確認してみてください。

ユーザエージェント情報の取得(Sample_1.html)
<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を判断する手順を見ていきましょう。


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

著者プロフィール

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

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

バックナンバー

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

もっと読む

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