HTML5の対応状況を判別するライブラリ。 - インターネット・アカデミー受講生・卒業生と企業のネットワーク

  • 卒業生の皆様へ
  • Boston Labブログ
  • セミナー情報
Boston Labブログ
トップページ >Boston Labブログ > 詳細
Boston Labブログ

PROFILE

山田宏樹

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

カテゴリ

Bostonの日常 W3Cでの出来事 ぷらっと散歩日記 一時帰国時の活動

カレンダー

2011年12月
        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
2011年12月15日

HTML5の対応状況を判別するライブラリ。

HTML5 Advent Calendarの15日目を担当しています。

本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。HTML5をテーマに、いろんな方が面白い記事を書いていますので、ぜひ他の記事もチェックしてみてください。

HTML5 Advent Calendar 2011


HTML5で注目されている新要素!だったり、HTML5関連のAPIなど、記事にすべきネタはたくさんありますが、今回は、ちょっと違った角度から。

ボストンから一時帰国をして3週間ほどが経過しました。帰国してから、インターネット・アカデミーの受講生の方とたくさんお話をしていますが、その中で良く質問されるのが、「HTML5ってブラウザはどのくらい対応しているんですか?」、「どこかで、ブラウザ毎の対応表って公開していませんか?」という質問です。「HTML5」というワードが広く認知され始めたことからこの質問は多かったのですが、最近は興味レベルも上がってきてさらに多くなっているように感じます。

そこで今回、ご紹介したいのが「Modernizr」というJavaScriptライブラリです。HTML5やCSS3の各新要素やAPI、プロパティなどにブラウザが対応しているかどうかを判別する役割を担ってくれます。つまりHTML5に対応している場合にはHTML5の新要素を、対応していない場合には新要素を使わない、といった場合分けをしてコンテンツを作成することができます。

簡単なサンプルを見てみましょう。

今回のサンプルで使用していくのは、HTML5で新たに導入されたinput要素のtype属性値であるdate値に対応しているか、対応していないかを判別する仕組みです。

まずはModernizrの導入から見ていきましょう。


1. Modernizrのダウンロード

Modernizrのダウンロードページから行えます。このときに、判別に使用したい要素やプロパティなどを選択することで、それらに必要なコードだけが書き出されます。これによって、JSのコード量を減らすことができ処理を軽くすることができるようです。

(必要なものにチェックをして、GENERATE!をクリックしてみましょう。)

ソースコードが書き出されたら、テキストエディタにコピーして任意の名前で保存しましょう。ここでは、「modernizr.js」として保存します。


2. Modernizrの使用

先ほど保存したJSファイルへのリンクを内に挿入します。

  <script src="modernizr.js"></script>

ブラウザが使用したい機能に対応しているかどうかの判別は、Modernizrのオブジェクトで判断をしていきます。
今回のサンプルの場合には、以下のように記述をします。

  if (Modernizr.inputtypes.date) {
    //対応している場合の処理内容;
  }else{
    //対応していない場合の処理内容;
  }

Modernizrオブジェクトの仕様は、Modernizrのdocumentationのページで確認をすることができます。


3. 処理内容

今回は、HTML5の機能を含んでいない、シンプルなHTMLのソースコードをあらかじめ内に記述しておきます。

  <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をすぐにでも使用したい方はぜひ使ってみてください。

コメントを投稿

名前

ログイン

メンバーページにログインできます。BOHRのメンバーID(受講生ID)とパスワードを入力し、ログインボタンをクリックしてください。ログインできない場合やIDとパスワードがわからない場合は、BOHR事務局までお問合せください。
webism
日本初のWeb専門スクールでインストラクターをしている現役Webクリエイターが、Webにまつわる情報をお届けしています。

グループサイト

パソコンスクール・パソコン教室 ブルー・バンブー ウェブスタッフ
このページの上へ