Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんｗ そこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事情が無い限りはメンテナンスされているライブラリを使うべきです。
つい最近もiPadが「iOS」から「iPadOS」に変更になったと同時にSafariのUAが劇的に変化して痛い目をみましたｗ
今回はこの手の判定用のライブラリとしてはメジャーな「Bowser」の使い方をメモしておきます。ちなみにBowserって「スーパーマリオ」の「クッパ」のことなんですね。Bowserでググると意図せずクッパとの戦いになって困ってましたｗ
※このページの内容はいずれも執筆時点の物です。ドキュメントに無い情報はv2.10.0のソースコードを参考にしています。
目次
準備
1系と2系
現在Bowserは2.x系が提供されていますが、旧版の1.x系と比べAPIが大きく変化しています。このページでは2系の内容を取り上げますが、ネット上では1.x系の紹介が多くあるので合わせて読む場合はご注意ください。
インストール
CDN
HTMLからscriptタグで直接読み込む場合はjsdelivrにアップされていますので、これを利用します。
<script src="https://cdn.jsdelivr.net/npm/bowser@latest/es5.js"></script>
- cdnjsは1系のみのようです。
ダウンロード
ダウンロードして自分のディレクトリに放り込みたい場合は、GitHubのReleasesから落とせます。通常はes5.jsを利用すれば良いでしょうか。すでにminifyしてあります。
npm
もちろんnpmでも入ります。
$ npm install bowser
HTMLのベース
次の項目からHTML上で利用する際のサンプルを掲載しますが、いずれも以下の様なHTML中に書いているとお考えください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bowser Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bowser@latest/es5.js"></script>
<script>
// ここにコード
</script>
</body>
</html>
Bowserで環境情報を調べる
少なくともこれらの判定を行っているページで、Babelなどを利用せずに直接JavaScriptを書いている場合は、ES5までの仕様に準拠して書くことをオススメします。ES2015(ES6)以降の文法では古いブラウザで動きませんので、そもそも判定が出来なくなってしまうためです。
ですのでconstやアロー演算子を使った無名関数などはグッとこらえる必要がありますｗ こらえきれない場合は素直にBabelを使ってください。
ブラウザ
GoogleChromeやFireFoxなどブラウザの種類とバージョンを調べます。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
var ua = browser.getBrowser();
console.log(ua);
// {name: "Chrome", version: "84.0.4147.125"}
switch(ua.name){
case "Internet Explorer":
alert("IEは禁止です!!!");
break;
case "PlayStation 4":
alert("PS4は確認してないねん(´・ω・`)");
break;
}
}
ua.nameに入る文字列は以下の通りです。ソースコードから直接抜き出しましたがめっちゃありますねｗ これ以外のブラウザの場合はUserAgentの名前がありそうな場所の文字列が返ってきます。
| # | name |
|---|---|
| 1 | ‘Googlebot’ |
| 2 | ‘Opera’ |
| 3 | ‘Samsung Internet for Android’ |
| 4 | ‘NAVER Whale Browser’ |
| 5 | ‘MZ Browser’ |
| 6 | ‘Focus’ |
| 7 | ‘Swing’ |
| 8 | ‘Opera Coast’ |
| 9 | ‘Opera Touch’ |
| 10 | ‘Yandex Browser’ |
| 11 | ‘UC Browser’ |
| 12 | ‘Maxthon’ |
| 13 | ‘Epiphany’ |
| 14 | ‘Puffin’ |
| 15 | ‘Sleipnir’ |
| 16 | ‘K-Meleon’ |
| 17 | ‘WeChat’ |
| 18 | ‘QQ Browser Lite’ |
| 19 | ‘QQ Browser’ |
| 20 | ‘Internet Explorer’ |
| 21 | ‘Microsoft Edge’ |
| 22 | ‘Vivaldi’ |
| 23 | ‘SeaMonkey’ |
| 24 | ‘Sailfish’ |
| 25 | ‘Amazon Silk’ |
| 26 | ‘PhantomJS’ |
| 27 | ‘SlimerJS’ |
| 28 | ‘BlackBerry’ |
| 29 | ‘WebOS Browser’ |
| 30 | ‘Bada’ |
| 31 | ‘Tizen’ |
| 32 | ‘QupZilla’ |
| 33 | ‘Firefox’ |
| 34 | ‘Electron’ |
| 35 | ‘Chromium’ |
| 36 | ‘Chrome’ |
| 37 | ‘Google Search’ |
| 38 | ‘Android Browser’ |
| 39 | ‘PlayStation 4’ |
| 40 | ‘Safari’ |
OS
macOSやWindowsなど利用者のOSの種類やバージョンを調べます。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
var os = browser.getOS();
console.log(os);
// {name: "macOS", version: "10.15.6", versionName: "Catalina"}
switch(os.name){
case "Windows":
case "Windows Phone":
alert("Windows関係は禁止です!!!");
break;
case "iOS":
case "Android":
alert("メジャーなスマホは禁止です!!!");
break;
}
}
os.nameとos.versionNameにはそれぞれ以下の文字列が入ります。versionNameはWindows, macOS, Androidのみ対応しているようです。
| # | name | versionName |
|---|---|---|
| 1 | ‘Windows Phone’ | |
| 2 | ‘Windows’ | ‘NT’ ‘XP’ ‘2000’ ‘XP’ ‘2003’ ‘Vista’ ‘7’ ‘8’ ‘8.1’ ’10’ |
| 3 | ‘macOS’ | 10.5 – ‘Leopard’ 10.6 – ‘Snow Leopard’ 10.7 – ‘Lion’ 10.8 – ‘Mountain Lion’ 10.9 – ‘Mavericks’ 10.10 – ‘Yosemite’ 10.11 – ‘El Capitan’ 10.12 – ‘Sierra’ 10.13 – ‘High Sierra’ 10.14 – ‘Mojave’ 10.15 – ‘Catalina’ |
| 4 | ‘iOS’ | |
| 5 | ‘Android’ | 1.5 – ‘Cupcake’ 1.6 – ‘Donut’ 2.0 – ‘Eclair’ 2.1 – ‘Eclair’ 2.2 – ‘Froyo’ 2.x – ‘Gingerbread’ 3.x – ‘Honeycomb’ 4.0 – ‘Ice Cream Sandwich’ 4.1 – ‘Jelly Bean’ 4.4 – ‘KitKat’ 5.x – ‘Lollipop’ 6.x – ‘Marshmallow’ 7.x – ‘Nougat’ 8.x – ‘Oreo’ 9.x – ‘Pie |
| 6 | ‘WebOS’ | |
| 7 | ‘BlackBerry’ | |
| 8 | ‘Bada’ | |
| 9 | ‘Tizen’ | |
| 10 | ‘Linux’ | |
| 11 | ‘Chrome OS’ | |
| 12 | ‘PlayStation 4’ | |
| 13 | ‘Roku’ |
versionNameのmacOSとAndroidはバージョン名は含まれません。引用符で囲まれたコードネームの部分が返ります。
プラットフォーム
PCかモバイル、タブレットかなどを調べます。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
var pratform = browser.getPlatform();
console.log(pratform);
// {type: "desktop", vendor: "Apple"}
switch(pratform.type){
case "tv":
alert("TV用のOSは未対応なんです(´・ω・`)");
break;
}
}
pratform内に入る内容は以下の通りです。vendorやmodelは機種によっては入らない場合があります。
| # | type | vendor | model |
|---|---|---|---|
| 1 | ‘tablet’ | ‘Nexus’ ‘Apple’ ‘Amazon’ | ‘iPad’ ‘Kindle Fire HD 7’ |
| 2 | ‘mobile’ | ‘Huawei’ ‘Apple’ ‘Nexus’ ‘BlackBerry’ ‘Microsoft’ | ‘ipod’ ‘iphone’ |
| 3 | ‘desktop’ | ‘Apple’ | |
| 4 | ‘tv’ | ||
| 5 | ‘bot’ | ‘Google’ |
Bowserで特定の環境かどうか調べる
ブラウザ判定
例えばChromeを使っているかどうか判定します。isBrowser()にはブラウザ名を直接指定します。戻り値はBoolean。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
// Google Chromeか判定する
if( browser.isBrowser("Chrome") ){
alert("Yes");
}
else{
alert("No");
}
}
OSやプラットフォームを判定
is()メソッドではOSやプラットフォーム、またブラウザなどすべての状態を判定することができます。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
// OSとブラウザを同時に判定する
if( browser.is("Windows") && browser.is("Firefox") ){
alert("Yes");
}
else{
alert("No");
}
}
推奨環境か一発で判定する
WebサービスやWebブラウザ上でゲームなどを作成する際には、必ずOS毎に対応ブラウザを定義するわけですが、satisfies()に設定情報を渡すと対応環境かどうかを一発で判定してくれます。最終的にBooleanが返ってきますので、後はよしなに処理を振り分けたり警告メッセージを表示するなどします。
window.onload = function(){
var browser = bowser.getParser(window.navigator.userAgent);
var isValidBrowser = browser.satisfies({
//--------------------
// OS毎の設定
//--------------------
windows: {
"Microsoft Edge": ">=80" // Chromium版以降
},
macos: {
"safari": ">=13" // 最新版
},
//--------------------
// 全OS共通
//--------------------
"Chrome": ">=80", // 2020年3月31日版
"FireFox": ">=75" // 2020年4月7日版
});
// 判定
if( isValidBrowser ){
alert("Yes");
}
else{
alert("No");
}
}
こういう環境情報は定期的に見直す必要が出てくるんですけど、気をつけないと忘れちゃうんですよねｗ 特に最近はWebブラウザの状況が目まぐるしく変わってきているので、少なくとも半年に一回程度はメンテしたいところです。
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
