堀北真希うさぎ
主な作品
堀北真希ちゃんのボシュロム社TVCM出演に因んだ、ソフトコンタクトをつけている堀北真希うさぎのイラストと仮想CM動画

ページ案内

環境を判別するには。

JAVAスクリプトを安全に取扱うためには、閲覧環境の判別は欠かせません。

ここでは、JAVAスクリプトにおける環境判別の方法を解説します。

環境を判別するには・目次。

navigator.useAgentプロパティ…ユーザエージェント文字列

navigator.useAgentプロパティはユーザエージェント文字列を与えるプロパティです。

ブラウザの種類。

一般に、navigator.useAgentプロパティには以下のような法則があります。

ネットスケープ/もじら。
Mozilla/」で始まる文字列です。

しかしながら、実際には多くの他社ブラウザがこれと同じフォーマットを採用しているので、他社ブラウザを一通り判断し終わった時点で判断すべきと言えます。

ネットスケープ 4.xまでは「Mozilla/」の直後の数字がブラウザのヴァージョンとなっていましたが、ネットスケープ 6以降及びもじらでは「Mozilla/5.0」に固定されております。

もじらのヴァージョンは、途中にある「rv:」に続く数字を読出す事で判断することが出来ます(例:もじら1.6ベースのブラウザなら「rv:1.6」)。

インターネットエクスプローラ。
Mozilla/」で始まる文字列で、途中に「MSIE 」が含まれます。

この「MSIE 」の直後に続く数字が、IEのヴァージョンとなります(例:IE 6.0なら「MSIE 6.0」)。

オペラ。
オペラではユーザエージェントを変更できますが、必ず「Opera/」または「Opera 」という文字列が含まれます。

これらの文字列の直後に続く数字が、オペラのヴァージョンとなります(例:オペラ 7.23なら「Opera/7.23」)

サファリ(KHTML系ブラウザ)。
Mozilla/5.0」で始まる文字列で、「Gecko/」「Opera」「MSIE」という文字列が含まれないものです。

OS環境(プラットフォーム)。(平成17年 7月 1日 更新)

また、navigator.useAgentプロパティには、多くの場合、OSの種類が書かれます。

ウィンドウズ。
Win」または「Windows」という文字列が含まれます。
マッキントッシュ。
Mac」「MacPPC」など「Mac」で始まる文字列が含まれます。
ユニックス(特にリナックス)。
多くの場合、「X11」という文字列が含まれます。

これは、ユニックス上で動作するウィンドウシステム「Xウィンドウ」を意味します。

また、リナックスなら大抵「Linux」と言う文字列が含まれます。

注意したいこと。

一部の環境では、ユーザエージェント文字列を自由に設定できるものがあります。

そういった環境では、navigator.useAgentプロパティによる判別が機能しなくなることが予想されます。

この為、この手法は出来るだけ使わないで、他の手法が見当たらない場合に限って利用されるべきでしょう。

固有のオブジェクトで判断する。

一部のブラウザには固有のオブジェクトを持つものがあります。

そこで、これらのオブジェクトを用いて判断すると言う方法があります。

この方法はユーザエージェント文字列と違って、閲覧者が変更出来ない情報による判定方法であり、その分精度が高くなります。

ブラウザとオブジェクトの関係。

実際のブラウザの固有オブジェクトの関係は以下のようになります。

主要ブラウザがJAVAスクリプトでサポートするオブジェクト。
オブジェクト document. images document. layers document. all window. opera document. getElementById
ネットスケープ 2.x × × × × ×
ネットスケープ 3.x × × × ×
ネットスケープ 4.x × × ×
インターネットエクスプローラ3.x × × × × ×
インターネットエクスプローラ4.x × × ×
インターネットエクスプローラ5.0以降 × ×
オペラ 6.x ×
オペラ 7.0以降 ×
ドリームパスポート及びプレイステーション × × × ×
もじら系ブラウザ・サファリなど × × ×

具体的な判定処理の流れ。

具体的には以下の手順で判断していきます。

ネットスケープ 4.x
document.layersオブジェクトが存在すればネットスケープ 4.xと判断されます。

CSSの適用可否の判定などで、4.0x系統か4.5以降の系統かを判断したい場合は、ユーザエージェント文字列中に「Mozilla/4.0」という文字列が含まれているか否かで判断します。

2. オペラ
window.operaオブジェクトが存在すればオペラと判断されます。

更にどのヴァージョンかを判断する必要があるなら、ユーザエージェント文字列で判断せざるを得ないでしょう。

3. インターネットエクスプローラ4.x以降
document.allオブジェクトが存在すればインターネットエクスプローラ4.x以降と判断されます。

更に、document.getElementByIdオブジェクトが存在すれば5.x以降と判断されます。

これ以上細かく判断する必要があるなら、ユーザエージェント文字列で判断せざるを得ないでしょう。

4. もじら・サファリ
document.getElementByIdオブジェクトが存在すればもじらかサファリと判断されます。

そこから先、どちらか判断する必要があるなら、ユーザエージェント文字列で判断せざるを得ないでしょう。

5. ネットスケープ 3.x・ドリームパスポート・プレイステーションなど
document.imagesオブジェクトが存在すればこれらのブラウザと判断されます。

さらに正確に判断する必要があるなら、ユーザエージェント文字列で判断せざるを得ないでしょう。

6. インターネットエクスプローラ3.x・ネットスケープ 2.x
今までの判定で判断されなかったものは、インターネットエクスプローラ3.xかネットスケープ 2.xと考えられます。

実際の処理の概略。(平成17年 8月19日 訂正)

また、実際の処理は以下のようになります。

// ネットスケープ 4.xか?
if (document.layers) {
        (ネットスケープ 4.x処理)
    }
// オペラか?
else if (window.opera) {
    if ((navigator.userAgent.indexOf('Opera/6.')<0) && (navigator.userAgent.indexOf('Opera 6.')<0)) {
            (オペラ 7.x以降の処理)
            }
    else {
            (オペラ 6.x以前の処理)
            }
    }
// インターネットエクスプローラ4.x以降か?
else if (document.all) {
    else if (document.getElementById) {
            (インターネットエクスプローラ5.0以降処理)
        }
    else {
            (インターネットエクスプローラ4.x処理)
        }
    }
// もじら・サファリか?
else if (document.getElementById) {
        (もじら・サファリ処理)
    }
// ネットスケープ 3.x・ドリームパスポート・プレイステーションなどか?
else if (document.images) {
        (ネットスケープ 3.x・ドリームパスポート・プレイステーションなどでの処理)
    }
// インターネットエクスプローラ3.x・ネットスケープ 2.xの場合。
else {
        (インターネットエクスプローラ3.x・ネットスケープ 2.xでの処理)
    }

携帯電話向けブラウザの判別(平成17年 9月 3日 修正)。

近年では、オペラに代表されるモバイル対応フルブラウザも増えてきており、その中にはJAVAスクリプトにも対応しているものも増えてきております。

携帯端末に搭載されているブラウザでは、画面が狭いなどの理由から、別な処理をするべき状況もあるでしょう。

しかしながら、現在のところ、携帯端末向けのブラウザかどうかを厳密に判定する方法が確立しておりません。

せいぜい、navigator.useAgentプロパティを調べて、プラットフォームがデスクトップ向けOSでない事を確認するしか方法が無いでしょう。

殆どのブラウザはnavigator.useAgentプロパティにおいて、OS名を併記しております。

そこで、ウィンドウズやマッキントッシュ或いはリナックスのどれでも無いと判断された場合に、モバイル向けブラウザと判断すると言う方法が執れる事になるのです。

また、モバイル端末の銘柄やモバイル専用ブラウザの銘柄を検出した場合も、モバイルと判定出来ます。

具体的な方法としては、以下のようになるでしょう。(平成17年 9月 3日 修正)

    if ((navigator.userAgent.indexOf('Mozilla/')>-1 || navigator.userAgent.indexOf('Opera/')>-1) &&
        navigator.userAgent.indexOf('Win')<0 &&
        navigator.userAgent.indexOf('Mac')<0 &&
        navigator.userAgent.indexOf('X11')<0 &&
        navigator.userAgent.indexOf('Linux')<0 &&
        navigator.userAgent.indexOf('B-right/V')<0 ||
        navigator.userAgent.indexOf('UP.Browser')>-1 ||
        navigator.userAgent.indexOf('Nokia/')>-1 ||
        navigator.userAgent.indexOf('SIE-')==0 ||
        navigator.userAgent.indexOf('MOT-')==0) {
        return(0);
        }
  1. 一行目は「Mozilla/」「Opera/」がユーザエージェント文字列に含まれている場合に限り、プラットフォームの判定を行うと言うものです。
  2. 二行目から六行目まで、プラットフォーム判定を行っております。
    1. 二行目はウィンドウズかどうかを判定しております(多くのウィンドウズ上で動くブラウザはユーザエージェント文字列に「Win」と言う文字列を含みます)。
    2. 三行目はマッキントッシュかどうかを判定しております(多くのマッキントッシュ上で動くブラウザはユーザエージェント文字列に「Mac」と言う文字列を含みます)。
    3. 四行目はユニックス(リナックスも含む)かどうかを判定しております(多くのユニックス(リナックスを含む)上で動くブラウザはユーザエージェント文字列に「X11」と言う文字列を含みます。これはユニックスそのものを意味するものではなく、ユニックス上のXウインドウシステムを意味します)。但し、一部のリナックス用ブラウザでこの条件を満たさないものもあり、そのため四行目で「Linux」と言う文字列を検索します。
    4. 六行目はBトロン超漢字かどうかを判定しております(超漢字に標準添付されている基本ブラウザはJAVAスクリプトには対応しておりません。しかしながら、JAVAスクリプトに対応したもじらもじらファイヤーバードも移植されております)。
  3. 七行目以降はモバイル銘柄を判定しております。UPブラウザ(ヴァージョン 7.0以降でJAVAスクリプトが使えるようになりました), ノキア, シーメンス及びモトローラ端末固有の文字列を判定しております。

最後に注意したい事。

くどいようですが、この方法は完璧なものではありません

出来る事なら、これらの判定を潜り抜けるような携帯端末でも、問題なく操作出来るようにすべきですし、逆にこれらの判定で弾かれるPCでも、便利に利用出来るようにすべきなのです。

しらぎくのウェブサイト作成入門サイトマップ



marguerite.site@gmail.com