2013年6月18日火曜日

HTML5のブラウザ検知をどうするか? 〜 「Modernizr」+α(File系とBlob)

HTML5のブラウザ検知をどうするか?

簡単に思いつくのはユーザーエージェント(UA)で検知する方法だろう。

しかし、

・UAは簡単に偽装できる
・世界中のブラウザのUAを調べるのも面倒
・微妙に変わっていくバージョン管理も面倒
・「え〜?正規表現とか書くのぉ?」(^^);
・調べきれていないブラウザはキックするのか?

など、色々と問題がある。

というわけで、HTML5特有の機能自体をチェックしてUAに依存しないようにする方法が有効そうだ。

そこでTwitterも使っているらしい「Modernizr」というJavaScriptライブラリ(MIT&BSDライセンス)を使わせて頂く。

Modernizr: the feature detection library for HTML5/CSS3

ここで使いたいHTML5の機能を選んでカスタマイズできる。

Modernizr Download Builder

今回使う機能はCanvas、Drag 'n Drop、Inline SVG、SVGなので、それらをチェックする。


「Extra」のところと「Extensibility」のところでデフォルトでチェックされているものがいくつかある。今回はExtraのところは必要なかったのでチェックを外した。始めExtensibbilityのModernizr.hasEvent()も外したが、これを外すと動作しないようなのでチェックしておく。

カスタマイズが終わったら「GENERATE!」する。

すると下の方のテキストエリアにコードが出力されるので、「DOWNLOAD」ボタンでJSファイルをダウンロードする。


あとはHTMLの方でこのように読み込ませる。

<!DOCTYPE html>
<html lang="ja">

<head>
    <script src="js/modernizr.custom.js"></script>
    <script type="text/javascript">
      if (Modernizr.canvas && Modernizr.svg && Modernizr.draganddrop && Modernizr.inlinesvg && window.File && window.FileReader && window.FileList && window.Blob){
        alert("対応");
      } else {
        alert("非対応");
      }
    </script>
</head>

<body>
    <h1>HTML5ブラウザ検知</h1>
</body>

</html>

上の例は、bodyが解釈されてレンダリングが始まる前に(ページが真っ白な状態で)必要な機能のチェックが行われ、対応・非対応をダイアログで表示する。

各機能は「Modernizr.canvas」のような感じでチェックする。対応ならtrueが返ってくる。各機能とModernizrのプロパティーとの対応はここに書いてある。

Modernizr Documentation

今回は特に、File系の機能とBlobの機能も必要だったのだけど、Modernizrにはそれらしきプロパティーが無い。

そこで、「window.File」のような感じで必要な機能をさらに列挙していった。恐らくModernizerにプロパティーが無いのは、このように簡単にチェックできるためだと思われ。

これでUA依存のブラウザ検知とはサヨナラだ。