現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
HTML5 Advent Calendarの15日目を担当しています。
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。HTML5をテーマに、いろんな方が面白い記事を書いていますので、ぜひ他の記事もチェックしてみてください。
HTML5で注目されている新要素！だったり、HTML5関連のAPIなど、記事にすべきネタはたくさんありますが、今回は、ちょっと違った角度から。
ボストンから一時帰国をして3週間ほどが経過しました。帰国してから、インターネット・アカデミーの受講生の方とたくさんお話をしていますが、その中で良く質問されるのが、「HTML5ってブラウザはどのくらい対応しているんですか？」、「どこかで、ブラウザ毎の対応表って公開していませんか？」という質問です。「HTML5」というワードが広く認知され始めたことからこの質問は多かったのですが、最近は興味レベルも上がってきてさらに多くなっているように感じます。
そこで今回、ご紹介したいのが「Modernizr」というJavaScriptライブラリです。HTML5やCSS3の各新要素やAPI、プロパティなどにブラウザが対応しているかどうかを判別する役割を担ってくれます。つまりHTML5に対応している場合にはHTML5の新要素を、対応していない場合には新要素を使わない、といった場合分けをしてコンテンツを作成することができます。
簡単なサンプルを見てみましょう。
今回のサンプルで使用していくのは、HTML5で新たに導入されたinput要素のtype属性値であるdate値に対応しているか、対応していないかを判別する仕組みです。このサンプルは、date値に対応しているOperaと、それ以外のブラウザで見比べていただくと違いが分かると思います。
では、まずはModernizrの導入から見ていきましょう。
Modernizrのダウンロードページから行えます。このときに、判別に使用したい要素やプロパティなどを選択することで、それらに必要なコードだけが書き出されます。これによって、JSのコード量を減らすことができ処理を軽くすることができるようです。
ソースコードが書き出されたら、テキストエディタにコピーして任意の名前で保存しましょう。ここでは、「modernizr.js」として保存します。
先ほど保存したJSファイルへのリンクを<head>内に挿入します。
＜script src="modernizr.js"＞＜/script＞
ブラウザが使用したい機能に対応しているかどうかの判別は、Modernizrのオブジェクトで判断をしていきます。
今回のサンプルの場合には、以下のように記述をします。
if (Modernizr.inputtypes.date) {
//対応している場合の処理内容;
}else{
//対応していない場合の処理内容;
}
Modernizrオブジェクトの仕様は、Modernizrのdocumentationのページで確認をすることができます。
今回は、HTML5の機能を含んでいない、シンプルなHTMLのソースコードをあらかじめ<body>内に記述しておきます。
＜form＞
＜fieldset id="hiduke_field"＞
＜legend＞あなたの生年月日は？＜/legend＞
＜section id="hiduke"＞
＜input type="text" id="nen"＞年
＜input type="text" id="tsuki"＞月
＜input type="text" id="nichi"＞日
＜/section＞
＜/fieldset＞
＜/form＞
項目2で紹介したブラウザのHTML5機能対応判別で、対応しているブラウザと判定された場合は、上記のHTML5対応外のコードを削除して、HTML5機能を使用したいコードをJSで追加します。
function hidukeCheck(){
var hiduke_field = document.getElementById('hiduke_field');
var hiduke = document.getElementById('hiduke');
if (Modernizr.inputtypes.date) {
// セレクトボックスの削除
hiduke_field.removeChild(hiduke);
// input type="month" の作成
hiduke = document.createElement('input');
hiduke.setAttribute('id', 'hiduke');
hiduke.setAttribute('type', 'date');
hiduke_field.appendChild(hiduke);
}
}
今回のサンプルを様々なブラウザで見てみて下さい。date値に対応しているか否かで見え方が違うはずです。
簡単なサンプルを使って説明しましたが、このModernizrを使用することで、対応しているブラウザ、そうでないブラウザでコンテンツを適応させていくことができます。HTML5やCSS3をすぐにでも使用したい方はぜひ使ってみてください。
コメント (0)
