jQuery で ブラウザ、バージョン、プラットフォーム を判別する プラグイン

7 件のコメント

jQuery で閲覧ブラウザ、バージョン、プラットフォーム を判別する プラグイン を作成しました。 jQuery 1.9 から browser のサポートがなくなるので、その対応用プラグインです。 タブレットと携帯電話(モバイル)の判別も行えます。

window.navigation.userAgent 文字列を利用します。 文字列をせっせと解析して、各フラグを立てて回ります。

インストール

通常利用

ダウンロードした js ファイル または zip ファイル中 //src/jquery.depend.js を、jQueryを読み込んだ後に読み込むようにします。

1
2
<script type="text/javascript" src="./jquery-1.9.1.js" ></script>
<script type="text/javascript" src="./jquery.depend.js" ></script>

旧 jQuery プラグイン 互換モード 利用

古い実装の jQuery プラグイン と混在して利用する場合、うまく動作しないケースがあります。 そのような場合、以下のように __BACKWARD_COMPATIBILITY_ENABLED グローバルフラグ を有効にすると動作する可能性があります。 ただし、このフラグを有効にすると、 $.browser.version オブジェクト が テキスト に変更される点 (バージョンに関するメソッドが利用できなくなる点) に注意してください。

1
2
3
4
5
<script type="text/javascript">
  window.__BACKWARD_COMPATIBILITY_ENABLED = true;
</script>
<script type="text/javascript" src="./jquery-1.9.1.js" ></script>
<script type="text/javascript" src="./jquery.depend.js" ></script>

使い方

ブラウザ判定

基本的に jQuery 1.9 以前と同じコードが利用できます (サポートには jQuery 1.9 以上 と記載がありますが…)。 判定できる ブラウザ は、Opera、MSIE、Firefox、Chrome、Android標準ブラウザ、Safari、Silk、Mercury等。

1
2
3
if ($.browser.msie) {
    // Internet Explorer の場合
}

ブラウザバージョン判定

バージョン判定は文字列ではなく、 object になっています。 バージョン判定はメソッドを通すことで簡単に比較できるようになっています。

1
2
3
if ($.browser.is('msie') && $.browser.version.isOrLess(7)) {
    // Internet Explorer 7.0 以前のブラウザの場合
}

プラットフォーム判定

携帯電話、タブレットを判別します。

1
2
3
4
5
6
7
if ($.platform.mobile) {
    // 携帯端末(iPhone, Android, Windows Phone...)の場合
} else if ($.platform.tablet) {
    // タブレット端末(iPad, Android)の場合
} else {
    // 通常PCの場合
}

ここでは、プラグインの一部機能しか取り上げていません。 詳細は下記の wiki をご参照ください。

garafu / jquery.depend Wiki(英語)

まぁ、すでに Browser プラグイン が存在しているのですが… このプラグインは Android タブレット端末 の判定が少し厳しいような気がしました(コードでのみ確認)。 あとは何より個人的な興味もあって作ってみたという経緯です。

更新履歴

2020/06/24
リンク更新:v1.1.8。"Microsoft Edge (chromium版)"対応。
2015/05/17
リンク更新:v1.1.7。"Microsoft Edge"対応。Opera のバージョンが正しく取得できない不具合修正。
2015/05/06
リンク更新:v1.1.6。Opera のバージョンが正しく取得できない不具合修正。
2013/10/20
リンク更新:v1.1.5。IE11対応。
2013/06/04
リンク追加:latest version、older version

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!

 

  1. 使えるプラグインです。
    2015年現在でも問題なく動作します。
    仕事で使わせて頂きました。
    ありがとうございます。

    返信削除
    返信
    1. 財前徳行 さん

      ご連絡ありがとうございます。
      お役に立っているようで嬉しいです。
      こうしたコメントをいただけると自分の励みになります。

      API の wiki 等、本当はもう少し整備した方が良いだろうと思いながら
      未だ出来ておらず、分かりづらいところがあるかもしれません。
      何か問題や疑問点等出てきた場合、コメント等で報告いただけると助かります。

      できるだけ対応、回答するようにいたします ^^

      削除
  2. 意外と良いブラウザ判定プラグインが無いため愛用させて頂いております。
    ありがとうございます。

    ただ、v1.1.5に於いてOperaのバージョン取得で問題があるように思いました。
    ユーザーエージェントでoperaの文字列の有無で判定しているようですが
    operaのバージョン15からユーザーエージェントでoperaからoprへ変更されたため
    うまくバージョンが取得出来ていない様でした。

    このプラグインはMITライセンスなので私は該当部分を修正して継続使用しておりますが
    オリジナルも良ければ修正された方が良いかもしれません。

    返信削除
    返信
    1. japan medal さん

      Opera の 情報ありがとうございます!!
      まったく気づいていませんでした。。
      (Opera は UA が コロコロ 変わりすぎですね…)

      いただいた情報を元に、Opera に限らず、 Chrome、Firefox のデスクトップ最新版(2015/05/06 時点) も調査しました。
      結果的には Opera だけが問題で、 Chrome と Firefox に変更はありませんでした。

      Opera 修正版 は V1.1.6 になります。
      使い慣れていないですが… npm も追加してみました。

      ブログ記事を変えるのは一般的ではない気がしますが…
      あわせてこの記事自体を少し変更、更新しました。

      また何かお気づきの点等ありましたら、
      ご連絡いただけると嬉しいです。

      今後ともよろしくお願いいたします。

      削除
  3. 早急な対応ありがとうございます。

    > Opera は UA が コロコロ 変わりすぎですね…
    >
    全くその通りですね。
    私の所有しているOperaのバージョンだけでOpera/ Version/ OPR/の
    3通りの判定要素がありますので。
    三項演算子じゃ足りません(笑)

    Opera各バージョンにおけるユーザーエージェント
    --------------------------------------
    バージョン8.5
    Opera/8.5 (Windows NT 5.1; U; ja)
    --------------------------------------
    バージョン9
    Opera/9.00 (Windows NT 5.1; U; ja)
    --------------------------------------
    バージョン10
    Opera/9.80 (Windows NT 6.1; U; ja) Presto/2.9.168 Version/11.50
    --------------------------------------
    バージョン12
    Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; ja) Presto/2.10.289 Version/12.00
    Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.17
    --------------------------------------
    バージョン15
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36 OPR/15.0.1147.100
    --------------------------------------
    バージョン29
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36 OPR/29.0.1795.47

    返信削除
    返信
    1. 失礼、バージョン10はバージョン11の間違いでした。

      削除
    2. japan medal さん

      Opera の UA サンプル ありがとうございます。

      少し反応が遅くなってしましましたが…
      いただいたUAサンプルは単体テストに追加させていただきました。
      それに従って、Opera で バージョンが正しく読めないパターンがあることに気づいたので、修正しました。

      > 三項演算子じゃ足りません(笑)
      確かに3通りで、私は2通りしか対応していませんでした。。
      新しい v1.1.7 では対応済みです。

      蛇足かもしれませんが、
      Microsoft の新しいブラウザ Edge (Project Spartan) の対応を行いました。
      まだ、Windows 10 Insider Preview でのチェックしかできませんが、
      ご参考にしていただければ、と思います。

      削除