ユーザエージェント情報からOSの情報を判断する
それではまず手始めに、ブラウザが実行されているOSが、Windowsか、MacOSか、あるいは、そのどちらでもないかを判断し、それぞれのOS用に用意したスクリプトを実行する方法を見ていきましょう。
Windowsの場合、userAgentプロパティの値の中には、「Windows」「WinNT」「Win98」といった文字列が含まれています。そのため、userAgentプロパティ内に「Win」という文字列が含まれている場合、ブラウザを実行しているOSは、Windowsであると判断することができます。
また、MacOSの場合、userAgentプロパティの値の中に、「Macintosh」「Mac OS」といった文字列が含まれています。このことからWindowsと同様に、プロパティ内に「Mac」という文字列が含まれている場合、そのブラウザが実行されているOSは、MacOSであると判断できます。
さらに、「Win」という文字列も「Mac」という文字列も含まれていない場合、そのOSは、WindowsでもMacOSでもない、それ以外のOSということになります。
以上から、それぞれのOSを判断し、そのOSのみで実行されるスクリプトは、次の用法で設定することができます。
if(navigator.userAgent.indexOf("Win") != -1 ){ // Windows系OSでのみ実行されるスクリプト } if(navigator.userAgent.indexOf("Mac") != -1 ){ // MacOSでのみ実行されるスクリプト } if(navigator.userAgent.indexOf("Win") == -1 && navigator.userAgent.indexOf("Mac") == -1){ // その他のOSで実行されるスクリプト }
if文の条件式内で使用している演算子のうち、「!=」は比較した値が等しくない時に、「==」は、比較した値が等しい時に真（true）の値を返します。また、「&&」は、論理演算子のAND演算子となります。
if文の条件式で、今回のように文字列を判断するような場合によく使う演算子を、以下にまとめておきます。演算子は、この他にも色々ありますが、クロスブラウザスクリプトを作っていく上で、以下の演算子は、これからも頻繁に出てくることになります。
| 式 | 意味 |
x == y | xはyと等しい |
x != y | xとyとは等しくない |
x && y | AND（xかつy） |
x || y | OR（xまたはy） |
x ! y | NOT（xはyでない） |
| 式 | 意味 |
x === y | xはyと等しい（形の変更を行わない） |
x !== y | xとyとは等しくない（形の変更を行わない） |
以上を元に、例えば、Windows、MacOS、それ以外のOSを判断し、各OSによって違った文字を表示するスクリプトは、次のようになります（Sample_2.html）。
<script type="text/javascript"> <!-- if(navigator.userAgent.indexOf("Win") != -1 ){ document.write("Windows系OSをお使いですね") } if(navigator.userAgent.indexOf("Mac") != -1 ){ document.write("MacOSをお使いですね") } if(navigator.userAgent.indexOf("Win") == -1 && navigator.userAgent.indexOf("Mac") == -1){ document.write("Windows系OS、MacOS以外のOSをお使いですね") } //--> </script>
このスクリプトをWindowsで実行した場合、3行目から5行目のスクリプトが、MacOSの場合は、6行目から8行目、それ以外のLinuxなどのOSの場合は、9行目から11行目のスクリプトが、それぞれ実行されます。これにより、Windowsで実行した場合は、「Windows系OSをお使いですね」、MacOS場合は、「MacOSをお使いですね」、その他のOSの場合は、「Windows系OS、MacOS以外のOSをお使いですね」という文字が、ブラウザに表示されます。
さらにWindows系、MacOS以外の別のOSも判断したいような場合、同様にuserAgentプロパティから、目的のOSを特定する文字列を調べるスクリプトを、追加すればいいことになります。例えば、Windows、MacOSの他、さらにLinuxも判断したいような場合は、次のようになります（Sample_3.html）。
<script type="text/javascript"> <!-- if(navigator.userAgent.indexOf("Win") != -1 ){ document.write("Windows系OSをお使いですね") } if(navigator.userAgent.indexOf("Mac") != -1 ){ document.write("MacOSをお使いですね") } if(navigator.userAgent.indexOf("Lin") != -1 ){ document.write("Linuxをお使いですね") } if(navigator.userAgent.indexOf("Win") == -1 && navigator.userAgent.indexOf("Mac") == -1 && navigator.userAgent.indexOf("Lin") == -1){ document.write("Windows系OS、MacOS、Linux以外のOSをお使いですね") } //--> </script>
スクリプトを整理する
さて、以上がOSを判断するスクリプトです。しかし、このスクリプトは、if文の条件式が長いため分かりにくく、メンテナンス性も良いとはいえません。そこで、このスクリプトを、変数を使って少し整理して見ましょう。
JavaScriptの場合、変数は以下の用法で設定します。
var 変数名 = 値
「変数名」は、一定の条件下において、ユーザー側で自由に設定することができます。「値」には、今回のような条件式の他、文字列や数値、オブジェクト・メソッド・プロパティ、あるいは変数自身なども、設定することができます。このようにして設定すると、「変数名」に「値」が代入され、それ以降は、「変数名」を使用することによって、「値」を取り出すことができます。なお、varは省略可能です。
それでは、if文の条件式を、変数を使って整理したサンプル（Sample_4.html）を見てみましょう。
<script type="text/javascript"> <!-- var agent = navigator.userAgent.toLowerCase() ; var Win_OS = agent.indexOf("win") != -1 ; var Mac_OS = agent.indexOf("mac") != -1 ; var Linux_OS = agent.indexOf("lin") != -1 ; var Other_OS = agent.indexOf("win") == -1 && agent.indexOf("mac") == -1 && agent.indexOf("lin") == -1 ; if(Win_OS){ document.write("Windows系OSをお使いですね") } if(Mac_OS){ document.write("MacOSをお使いですね") } if(Linux_OS ){ document.write("Linuxをお使いですね") } if(Other_OS){ document.write("Windows系OS、MacOS、Linux以外のOSをお使いですね") } //--> </script>
サンプルでは、まず3行目で、userAgentプロパティの値を変数agentに代入しています。さらにこの時、stringオブジェクトのtoLowerCaseメソッドを使って、userAgentプロパティの値をすべて小文字に変更しています。
JavaScriptは、アルファベットの大文字、小文字を区別します。また、userAgentプロパティ内にあるOSを表す文字列は、今のところ、先頭が大文字、以下が小文字と、大文字、小文字が入り交じっています。しかし今後このような状態が続いていくことは、保証できません。サンプルですべての値を小文字にしたのは、このような心配を排除し、より厳密な判断がきるようにするためです。なお、アルファベットを小文字に変えるtoLowerCaseメソッドと似た役割をするものに、アルファベットの小文字を大文字に変換するtoUpperCaseメソッドがあります。
その後は、4行目でWindows系OSの判定式を変数Win_OSに、5行目でMacOSのOSの判定式を変数Mac_OSに、6行目でLinuxの判定式を変数Linux_OSに、7行目から9行目でその他のOSの判定式を変数Other_OSに、それぞれ代入しています。
そして、10行目以降で、その判定式を代入した変数を、if文の判定式として使い、それぞれのOSの判断を行っています。
どうでしょうか。スクリプトがすっきりして、見やすくなったのではないでしょうか。
まとめ
今回は、JavaScriptを使って、スクリプトが実行されている端末のOSを判断する方法について解説しました。JavaScriptの動作だけを考えると、OSによって違いがあるような場合は、ほとんどありません。そのため、単純に「どのようなブラウザでも同じように動くスクリプト」、という観点だけで考えると、今回のスクリプトは、一見クロスブラウザスクリプトとは関係ないように思えるかもしれません。
しかし、今回のスクリプトは、OSの違いによる見栄えや、JavaScript以外も含めた動作の違いを、可能な限り同じにしたサイトを構築する際に、有効な手段の一つとなります。OSの違いによる見栄えや動作の違いをなくし、どのOSから見ても同じに見えるサイトを構築することは、ユーザビリティの観点から見ても、重要なことです。そういった意味でも、今回紹介したスクリプトは、JavaScriptの動作だけではなく、サイト全体の統一といった、大きな意味でのクロスブラウザを実現するためには、重要なスクリプトであるといえるでしょう。
さて、OSを判断するために、NavigatorオブジェクトのuserAgentプロパティの値から、OSの種類を判断できる特定の文字列を探し出しました。Navigatorオブジェクトは、ブラウザに関する情報を集めたオブジェクトです。その中には、userAgentプロパティ以外にも、ブラウザに関する情報を持った多くのプロパティがあります。これらのプロパティの値から、今回や前回解説したように、色々な情報を取り出したり、調べることによって、JavaScriptが実行されているブラウザの種類やバージョンなどを詳細に知ることができます。このことに関しては、またの機会に詳しく解説していきたいと思います。
