特集：JavaScriptライブラリ「Modernizr」入門
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5／CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。
本稿では、Webブラウザーで使用できる機能を調べるのに、ユーザー・エージェント文字列を使ってブラウザー単位で判定するのではなく、機能単位で使えるかどうかを判別する方法を紹介する。
Modernizrとは
HTML5やCSS3では、HTMLで表現できることが大幅に強化された。そのため、HTML5＆CSS3が普及するにつれ、きれいな見た目のサイトやリッチなレイアウトを持つサイトが増えてきている。
しかし、HTML5／CSS3機能の実装状況はブラウザーごとに異なるため、HTML5／CSS3の仕様として定義されているからといってそのまま使えるわけではない。この実装の差異に対応するために、これまでは、JavaScriptやサーバーサイドでユーザー・エージェント文字列を比較したり、「<!--[if IE 8]>」のような条件付きコメントを使って切り分けたりしてきた。
最近ではその手法も現実的ではなくなってきている。その理由は、ブラウザーのバージョン・アップが頻繁になってきており、ユーザー・エージェントのバージョンによってどの機能が実装されているかを開発者が（バージョン・アップのたびに調べたりして）追っていくことは大変になってきているためだ。
また、例えば、先日公開されたWindows 8.1 Previewに含まれているInternet Explorer 11（以降、IE 11）のユーザー・エージェント文字列は以下のように「MSIE」の記述がない。
|
Mozilla/5.0 (Windows NT 6.3; ARM; Trident/7.0; Touch; rv:11.0) like Gecko
|
前バージョンのIE 10では「Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)」のように「MSIE」という文字列が含まれていたが、IE 11ではこれが含まれなくなった。
最終リリース版でも同様になるかどうかはまだ分からないが、「ブラウザーのバージョンでHTML5／CSS3機能を判定する時代ではない」という意思表示であると理解することができる。
そういった課題に対応する際に使えるのが、Modernizr（モダナイザー）だ。Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptから確認できるようにする機能を提供する。
ちなみにVisual Studio 2012でASP.NET関連のプロジェクトを作ると、（基本的に）標準でModernizrが使えるようになっている。そのため、自分でダウンロードしてプロジェクト内にあらためて追加する必要はない。
Modernizrの使い方
Modernizrの使い方は大きく分けて、CSSコードに記述する方法とJavascriptで使う方法の2つがある。
Modernizrの使い方： CSS編
例えばModernizrの「CSS Gradient」でグラデーション表示を指定する例を見てみよう。
|
<style>
.no-cssgradients .gradients {
background: #32ff40;
}
.cssgradients .gradients {
background: -moz-linear-gradient(-45deg, #32ff40 0%, #efef56 50%, #ff89f7 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#32ff40), color-stop(50%,#efef56), color-stop(100%,#ff89f7));
background: -webkit-linear-gradient(-45deg, #32ff40 0%,#efef56 50%,#ff89f7 100%);
background: -o-linear-gradient(-45deg, #32ff40 0%,#efef56 50%,#ff89f7 100%);
background: -ms-linear-gradient(-45deg, #32ff40 0%,#efef56 50%,#ff89f7 100%);
background: linear-gradient(135deg, #32ff40 0%,#efef56 50%,#ff89f7 100%);
}
</style>
<div class="gradients"> </div>
|
このコード例では「no-cssgradients」と「cssgradients」の2つのクラスが指定されている。それぞれCSS Gradientがサポートされていない場合とサポートされている場合の条件分岐だと理解すればよい。これを実行して見ると、次のような結果になる。
このようにグラデーション対応ブラウザーで表示した場合は「.cssgradients」のCSSコードが使われ、非対応ブラウザーで表示した場合は「.no-cssgradients」のCSSコードが使われる。後述するが、これらのクラス定義がCSS機能ごとにされているというわけだ。ここでは説明をシンプルにするために、グラデーションか単色かを切り替えているが、デザインを統一させるために機能をサポートしている場合はCSSで、サポートしていない場合は画像で表現するといった使い方が想定できる。
Modernizrの使い方： JavaScript編
もう1つの使い方がJavaScriptでの記述である。例えば、ファイルのドラッグ＆ドロップに対応しているかどうかを判定するには、以下のように記述する。
|
<script>
if (window.FileReader && Modernizr.draganddrop) {
alert('draganddrop');
} else {
alert('no draganddrop');
}
</script>
|
「Modernizr.draganddrop」の前に「window.FileReader」という記述があることに気付いたと思う。IEは、バージョン10からHTML5のファイルのドラッグ＆ドロップをサポートしているが、それよりも前からドラッグ＆ドロップ自体はサポートしていたため、「Modernizr.draganddrop」で「true」を返してしまう。そこで、ここでは加えてファイル・リーダー（window.FileReader）をサポートしているかどうかの条件を追加して、「ファイル・リーダー」＆「ファイルのドラッグ＆ドロップ」で判定している。
Modernizrで調査可能な機能
Modernizrで検証可能なHTML5／CSS3機能は、そのダウンロード・サイト（次の画面はその表示例）を確認するとよい。
このサイト上で、（Modernizrを組み込むWebサイト内で）検証が必要なHTML5／CSS3機能のチェックボックスにチェックを入れて、［GENERATE］ボタンを押す。これにより、選択したものだけに絞ったカスタムの機能検証用スクリプト（JavaScriptコード）を生成できる。
ここで生成したスクリプトをダウンロードして、それを以下のようなHTMLコードでWebページに読み込むだけで、そのカスタムのModernizrが使用可能になる。
|
<script src="/Scripts/modernizr-2.6.2.js"></script>
|
なおASP.NETプロジェクトを作成した場合は（基本的に）、ひな型コードの状態ですでにModernizrが読み込まれた状態になっているため、追加のダウンロードやスクリプトを読み込むコードを追加する必要はない。
【おまけ】実行可能な機能一覧を確認してみる
Modernizrを組み込んだページを表示すると、<html>タグのclass属性に各HTML5／CSS3機能が使えるかどうかのリストが追加される。次の画面はそのclass属性の内容を表示している例である。
IE 10とIE 8（＝IE 10でドキュメント・モードを「IE 8」に切り替え）でModernizrを組み込んだページを表示してみた結果（＝<html>タグのclass属性の内容）は、以下のようになる。
| IE10 | IE8 |
|---|---|
| js | js |
| flexbox | no-flexbox |
| no-flexboxlegacy | no-flexboxlegacy |
| canvas | no-canvas |
| canvastext | no-canvastext |
| no-webgl | no-webgl |
| no-touch | no-touch |
| geolocation | no-geolocation |
| postmessage | postmessage |
| no-websqldatabase | no-websqldatabase |
| indexeddb | no-indexeddb |
| hashchange | hashchange |
| history | no-history |
| draganddrop | draganddrop |
| websockets | no-websockets |
| rgba | no-rgba |
| hsla | no-hsla |
| multiplebgs | no-multiplebgs |
| backgroundsize | no-backgroundsize |
| no-borderimage | no-borderimage |
| borderradius | no-borderradius |
| boxshadow | no-boxshadow |
| textshadow | no-textshadow |
| opacity | no-opacity |
| cssanimations | no-cssanimations |
| csscolumns | no-csscolumns |
| cssgradients | no-cssgradients |
| no-cssreflections | no-cssreflections |
| csstransforms | no-csstransforms |
| csstransforms3d | no-csstransforms3d |
| csstransitions | no-csstransitions |
| fontface | fontface |
| generatedcontent | generatedcontent |
| video | no-video |
| audio | no-audio |
| localstorage | localstorage |
| sessionstorage | sessionstorage |
| webworkers | no-webworkers |
| applicationcache | no-applicationcache |
| svg | no-svg |
| inlinesvg | no-inlinesvg |
| no-smil | no-smil |
| svgclippaths | no-svgclippaths |
まとめ
これからHTML5の実装も進んでいき、ますますブラウザーのバージョン・アップが加速していくことが予測される。このようにModernizrを使うことで、ブラウザーのバージョンなどで判別するのではなく、ブラウザーの持っている機能で判別できるようになるため、その機能を「持っている場合」「持っていない場合」という条件分岐でコードを記述できるようになる。ASP.NETにも標準で搭載されているので、新しい機能を実装する際には活用してみてはいかがだろうか。
