HTML5へのIE対応について

HTML5化は進んでいない?
以前、日本国内の上場会社(東証1部、2部、マザーズ、旧ヘラクレス)の「情報・通信業」355社のサイトがHTML5で構築されているかを調査しました。
サイトのデザインは刷新され、最新のトレンドを意識していても、ソースを開いてみるとHTML5で制作していないことがほとんどで、HTML5を使用していたのは27社(7.6%)、レスポンシブの対応は3社(0.84%)と、思いのほかHTML5の導入が進んでいないことがわかりました。

ブラウザのHTML5への対応状況など見ながら、考察してみます。

ブラウザーの対応状況
皆さんの使用しているブラウザがHTML5に対応しているか確認してみましょう。
http://html5test.com/

「your browser」では、自分の現在使用しているブラウザのスコア、つまり、どの機能に対応しているかによって自分の使っているブラウザに点数が付けられます。
「other browsers」では、様々なブラウザのバージョンのスコアが掲載されており、スコアが高いほどHTML5に対応しているということがわかります。

[You are using Chrome 25 on Mac OS X 10.8.2]

私の使っているOSとブラウザが表示されています。
私はChromeをメインブラウザとして使用していますが、500満点中463点というハイスコアが出ました。
各機能についても、ほぼ「Yes」になっていました。

IE10でやってみたところ、

なんと320点でした。
IE10でさえ320点という事は・・・ver8以下では・・・恐ろしい結果になりそうですね。

ブラウザシェアとHTML5対応バージョン/デスクトップ
2012年2月から2013年2月までのシェア率を調べてみました。
http://gs.statcounter.com/#browser-ww-daily-20120201-20130201

blog20130226_03

1位:Internet Explorer:53.99% → 8以降対応
2位:Chrome:20.58% → 3.0以降対応
3位:Firefox:14.35% → 3.1以降対応
4位:Safari:8.27% → 3.0以降
5位:Opera:0.98% → 9.6以降対応

やはり日本ではまだまだIEは強いですね。(地域をWorldWideに変更すると、1位(IE)と2位(Chrome)は逆転するのですが)
IEは、一部大手企業などで6、7を利用していると思いますが、HTML5にはver8以降しか対応していません。
以前にもご紹介したfindmebyIPで見てみます。

IEの列がほとんど「×」となっているのがわかります。
HTML5には新しい要素が多く追加されましたが、IE8以下はHTML5の新要素には対応していないので、要素が無視されてしまいスタイルが適用されません。スタイルが適用されないとはつまり、ソースコードで指示を出した通りに反映されないという事で、IE以外のブラウザでは表示や見栄えが全く異なってしまう、という事です。

IE以外のブラウザはどうでしょう。

MacOSに標準装備されているSafariは、Safari3.0からHTML5への対応が本格的に始まっています。

GoogleのChrome はHTML5でできることを示すために以下のサイトをリリースしています。
http://www.thewildernessdowntown.com/

Operaの開発チームは、HTML5の開発に関与しているという経緯があり、2009年現在でリリースされているOpera9.6はすでにHTML5の機能が実装されています。

IEのHTML5対応
さて、ver8以降にしか対応していないIEですが、どうにも出来ないのでしょうか。。

HTML文書内にIEに対応させるためのライブラリを読み込ませる処理で、IEの下位バージョンでもある程度は認識させる事が可能となります。ただ、完璧にHTML5+CSS3が実装でき保証があるものではないので、HTML5+CSS3を適用した箇所について、注意深く、正常に動作しているか一箇所ずつ検証していく必要があります。

それでは、IE対応によく使われているライブラリをご紹介します。
※出来る事、出来ない事がそれぞれありますので、各サイトでご確認ください。

・html5shiv
http://code.google.com/p/html5shiv/
IE8以前のブラウザにも、基本的なHTML5のタグを認識させるためのライブラリです。

・CSS3 PIE
http://css3pie.com/
JavaScript を使ってIE6〜8のCSS3プロパティを表示可能にします。
角丸、シャドウ、ボーダー画像、複数背景画像、グラデーションに対応しています。

・ie9.js
http://code.google.com/p/ie7-js/
IE6〜8でもセレクタを使えるようにするJavaScriptで開発されたライブラリです。
「W3C標準仕様に近づける」「IE9に近づける」ためのライブラリなので、出来なくなる事もありますので注意してください。
(参考)http://www.torounit.com/blog/2011/06/07/793/

・Selectivizr.js
http://selectivizr.com/
IE6~8でもCSS3セレクタが利用できるようになりますが、使えるセレクタの種類はライブラリによって異なるようです。

まとめ
社内で使用するメインブラウザにIEを指定し、IEのバージョンが6、7と古いものを推奨している企業もまだまだ多いと聞きます。大企業や上場企業は特にそうでしょう。

ここまで見てきたように、IEの古いバージョンに対応する為にはかなりの労力が必要になります。
このような技術力やコスト、かかる工数など様々な理由から企業での導入が遅れていると言えそうです。

HTMLで構築するメリットをもう一度考えてみます。
企業サイトであれば、マルチメディア対応などは現実的にはあまりメリットとして享受出来ないかもしれません。HTML5、CSS3と言うと派手なギミックが注目されがちですが、セマンティックなマークアップによるSEO効果、ビデオ、オーディオ機能、canvasによる描画機能にはメリットがあります。プラグインを使用せずに構築し、様々なデバイスで快適に閲覧する環境を作る事も可能です。

デメリットとしては、古いバージョンのブラウザに費やすHTML5の「実装」と「検証作業」の時間が、通常の制作と比べてコストが大幅に増加することです。

現状では上記の比較でデメリットのほうが大きいと判断する企業が多いため、全体的にもHTML5導入があまり進んでいないというのが実情なわけです。

構築する際には、これから作るサイトの特性やメリット・デメリットをよく考慮して導入を検討する事が必要ですね。

さて、次の記事では、アニメーションが目立つHTML5の事例をご紹介したいと思います。