[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
Post on:2016年1月12日
sponsors
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。
ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。
Feature.jsの特徴
Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。
WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。
- touch
- タッチイベントがサポートされるかの判定で、タッチスクリーンデバイスの判定ではありません。
- css3Dtransform
- Android上のWebkit系ブラウザで非常に稀ですが、間違った判定するかもしれません。これは必要があれば改善します。
- deviceMotionとdeviceOrientation
- 多くのデスクトップブラウザがイベントリスナーをサポートしており、デバイスが必要とするセンサーを持っていなくてもポジティブな結果を返します。
- placeholder
- iOS 3のSafariで間違った判定を行いますが、このOSのユーザーは基本的にいないためこの問題は考慮しません。
Feature.jsの使い方
Step 1: 外部ファイル
当スクリプトをhead内か</body>の上に、外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="/js/feature.min.js"></script> </body> |
これで準備は終了です。スクリプトの初期化は必要ありません。
Step 2: ブラウザの機能を判定
いくつかの書式があります。まずは、基本の書式から。
|
1 2 3 4 5 |
if (feature.webGL) { console.log("WebGL supported"); } else { console.log("WebGL not supported"); } |
Modernizrのように、HTMLの要素にclassとして利用することもできます。
|
1 2 3 |
if (feature.webGL) { document.documentElement.className += " webgl"; } |
jQueryを使っているなら、記述はもっとシンプルになります。
|
1 2 3 |
if (feature.webGL) { $("html").addClass("webgl"); } |
複数の機能を判定する場合は、結合させるだけです。
「&&」「||」などの演算子が利用できます。
|
1 2 3 |
if (feature.canvas && feature.webGL) { console.log("Canvas and WebGL are supported") } |
実際の動作は、下記のテストページでご確認ください。
当環境のデスクトップ（Win7, OS X）、タブレット（iOS）、スマホ（iOS）で見てみたところ、期待通りの結果が表示されていました。
sponsors
