Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
特集:JavaScriptライブラリ「Modernizr」入門

特集:JavaScriptライブラリ「Modernizr」入門

Modernizrを使ってブラウザーの機能を調べるには

2013年7月1日

ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能な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 11のユーザー・エージェント文字列

前バージョンの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」でグラデーション表示を指定する例を見てみよう。

HTML
<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">&nbsp;</div>
ModernizrのCSSコード・サンプル(csscode.html)

 このコード例では「no-cssgradients」と「cssgradients」の2つのクラスが指定されている。それぞれCSS Gradientがサポートされていない場合とサポートされている場合の条件分岐だと理解すればよい。これを実行して見ると、次のような結果になる。

グラデーション非対応ブラウザーでの表示例
グラデーション対応ブラウザーでの表示例

 このようにグラデーション対応ブラウザーで表示した場合は「.cssgradients」のCSSコードが使われ、非対応ブラウザーで表示した場合は「.no-cssgradients」のCSSコードが使われる。後述するが、これらのクラス定義がCSS機能ごとにされているというわけだ。ここでは説明をシンプルにするために、グラデーションか単色かを切り替えているが、デザインを統一させるために機能をサポートしている場合はCSSで、サポートしていない場合は画像で表現するといった使い方が想定できる。

Modernizrの使い方: JavaScript編

 もう1つの使い方がJavaScriptでの記述である。例えば、ファイルのドラッグ&ドロップに対応しているかどうかを判定するには、以下のように記述する。

JavaScript
<script>
if (window.FileReader && Modernizr.draganddrop) {
  alert('draganddrop');
} else {
  alert('no draganddrop');
}
</script>
ModernizrのJavaScriptコード・サンプル

 「Modernizr.draganddrop」の前に「window.FileReader」という記述があることに気付いたと思う。IEは、バージョン10からHTML5のファイルのドラッグ&ドロップをサポートしているが、それよりも前からドラッグ&ドロップ自体はサポートしていたため、「Modernizr.draganddrop」で「true」を返してしまう。そこで、ここでは加えてファイル・リーダー(window.FileReader)をサポートしているかどうかの条件を追加して、「ファイル・リーダー」&「ファイルのドラッグ&ドロップ」で判定している。

Modernizrで調査可能な機能

 Modernizrで検証可能なHTML5/CSS3機能は、そのダウンロード・サイト(次の画面はその表示例)を確認するとよい。

Modernizrによる機能検証用のスクリプトをダウンロードできるサイト

 このサイト上で、(Modernizrを組み込むWebサイト内で)検証が必要なHTML5/CSS3機能のチェックボックスにチェックを入れて、[GENERATE]ボタンを押す。これにより、選択したものだけに絞ったカスタムの機能検証用スクリプト(JavaScriptコード)を生成できる。

 ここで生成したスクリプトをダウンロードして、それを以下のようなHTMLコードでWebページに読み込むだけで、そのカスタムのModernizrが使用可能になる。

HTML
<script src="/Scripts/modernizr-2.6.2.js"></script>
Modernizrのスクリプトを読み込むHTMLコードの例

 なおASP.NETプロジェクトを作成した場合は(基本的に)、ひな型コードの状態ですでにModernizrが読み込まれた状態になっているため、追加のダウンロードやスクリプトを読み込むコードを追加する必要はない。

【おまけ】実行可能な機能一覧を確認してみる

 Modernizrを組み込んだページを表示すると、<html>タグのclass属性に各HTML5/CSS3機能が使えるかどうかのリストが追加される。次の画面はそのclass属性の内容を表示している例である。

ブラウザーで使える各HTML5/CSS3機能がリストされている<html>タグのclass属性の例

 IE 10とIE 8(=IE 10でドキュメント・モードを「IE 8」に切り替え)でModernizrを組み込んだページを表示してみた結果(=<html>タグのclass属性の内容)は、以下のようになる。

IE10IE8
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
<html>タグのclass属性の内容: IE 10とIE 8

まとめ

 これからHTML5の実装も進んでいき、ますますブラウザーのバージョン・アップが加速していくことが予測される。このようにModernizrを使うことで、ブラウザーのバージョンなどで判別するのではなく、ブラウザーの持っている機能で判別できるようになるため、その機能を「持っている場合」「持っていない場合」という条件分岐でコードを記述できるようになる。ASP.NETにも標準で搭載されているので、新しい機能を実装する際には活用してみてはいかがだろうか。

サイトからのお知らせ

Twitterでつぶやこう!