こんばんは、ころすけ(@wg_koro)です。
今までjQueryプラグインって書いたことなかったなー・・・ってことで、プラグイン一個書いてみました。
https://github.com/wgkoro/detectbrowser
detectBrowser.js | jQuery Plugin Registry
※jQuery Plugin Registryにも載せてみたよ！
モバイル(携帯・タブレット)かPCか、ブラウザは何かを判別
これ一つで下記を判別します。
- モバイル機器(iPhone, Android, iPad, Windows Phone)か否か
- タブレットか否か
- 使っているブラウザは何か
- IEだった場合、IEのバージョンは何か (6以降を判別します)
デモサイト
下記ページのボタンを押すと、結果が表示されます。お試しあれ。
DetectBrowser DEMO
使い方
モバイルか否かの判定は下記のようにします。
モバイルだった場合、返値にデバイスの種類(文字列：「android」「iphone」「ipad」)が返ります。
if($.detectBrowser.mobile()){
alert(‘モバイルデバイスでごんす。種類は’ +$.dettectBrowser.mobile() +’でやんす。’);
}
else{
alert(‘多分PCだよ！’);
}
[/javascript]
タブレットかどうかを判定するにはこう。
if($.detectBrowser.isTablet()){
alert(‘タブレットだよ！’);
}
else{
alert(‘タブレットじゃないよ？’);
}
[/javascript]
ブラウザの種類を取得。返ってくる文字列は下記の通り。
- ie
- firefox
- safari
- chrome
- mozilla
alert($.detectBrowser.browser());
[/javascript]
ブラウザがIEだった場合、IEのバージョンも取得できます。
alert($.detectBrowser.ieVersion());
[/javascript]
「IEかどうか」だけ判定したい場合は「isIE」メソッドをどうぞ。
var ie_version = $.detectBrowser.isIE();
if(ie_version){
alert(‘IEだよ！IEのバージョンは’ +ie_version);
}
else{
alert(‘IEじゃないよ！’);
}
[/javascript]
上記の情報全てを一括で取得したい場合は「detect」メソッドを使って下さい。
var all = $.detectBrowser.detect();
console.log(all);
// all.mobile
// all.is_tablet
// all.ie_version
// all.browser
// all.ua
[/javascript]
タブレット判定はUser Agent文字列を使い、下記ロジックで判定を行っています。
- 「ipad」が含まれていればタブレット
- Androidで、かつUser Agentに「mobile」が含まれていなければタブレット。参考:Google ウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう
これ以外にマッチングさせたい文字列がある場合は「addTabletPattern」メソッドを使って、判定パターンを追加することができます。
$.detectBrowser.addTabletPattern(‘SC-01C’); // パターン追加。引数に渡す文字列は正規表現可。
$.detectBrowser.detect(); // 判定
[/javascript]
初めてプラグインを書いてみたけど簡単でびっくり
今回初めて使ってみましたが、jQuery Plugin Registryって楽に登録できるんですね！ちょっと感動しました。
- 通常通りGithubへコードをpush
- GithubでHookを設定
- Plugin Registryで指定されている形式のJSONファイルを作り、自分のリポジトリ内へ追加
- バージョン番号のタグを追加、push。
これだけでレジストリへ公開できちゃいます。詳しくは公式サイトの説明をどうぞ。簡単です。
Publishing Your Plugin | jQuery Plugin Registry
自分のGithubリポジトリをメンテすれば、それに連動して自動でレジストリにも修正が入るのが素晴らしいです。
こんなお手軽なら
色々プラグイン書きたくなりますね。オラワクワクしてきたぞ！