なぜ HTML5 を使うのかを考えよう
Web 制作の現場にも HTML5 が浸透し始めてきました。では、なぜ HTML5 を使わなければならないのかを考えてみましょう。
なぜ HTML5 が求められるのか
最近、Web を取り巻く環境は多様化し、プラグインをサポートしていない Web ブラウザーの普及、画面サイズの多様化、Web アプリケーション構築など、従来の Web ページには求められなかった様々なケースへの対応が必要になりつつあります。
こうした、従来の Web ページにはなかった特性を実現するためには新しい技術が必要になります。これが HTML5 やその周辺技術というわけです。当然ながら新しい技術なので、古いブラウザーはこれらに対応していません。
Web ブラウザーは家庭用ゲーム機と似ている
世代ごとの Web ブラウザーはゲーム機に例えるとわかりやすいでしょう。
現在、私たちは家庭用ゲーム機で高度なグラフィクスのゲームソフトを遊ぶことができます。ゲーム機といえば Wii U, PlayStation 3, Xbox 360 などさまざまあり、どれも似た体験ができます。一方で現在に至るまでゲーム機にはさまざまな世代がありました。
ファミリーコンピュータでは 25 色のドットの世界でした。
スーパーファミコンでは 256 色で、transform( 拡大縮小回転 )が有効な 2D の世界でした。
Nintendo 64 では低ポリゴンのカクカクが少し気になりながらも 3D が当たり前となりそれまでとは違う体験ができるようになりました。
Wii では解像度が低いながらも高ポリゴンでゲームを楽しむことができ、Wii U の登場でさらにその性能が増しました。
このように、ゲーム機は世代ごとに機能相応の体験でゲームソフトを遊ぶことができます。
これは Web ブラウザーの歴史と似ていて、最新の IE 10, Chrome, Firefox などでは HTML5 や CSS3、その他の周辺技術を利用してよりいい体験ができますが、古いブラウザーでは、それ相応の機能したないため、旧世代の Web ページしか表紙できないというわけです。
スーパーファミコンでは Wii U 相当のゲームソフトは遊べないですよね。Web ブラウザーもこれと同じです。だからよりいいコンテンツを作りないなら新しい環境を利用する必要があるのです。
一方で、最新の Web ブラウザーは従来のコンテンツも問題なく表示できます。これは Web ブラウザーや HTML の仕様自体に高度な後方互換機能がサポートされているためです。
後方互換についてはゲーム機も似ていて、例えば、PlayStation 3 ではゲームアーカイブから過去のゲームソフトを購入し遊ぶことができます。これは、現在のゲーム機が過去のゲーム機よりも性能が高いからです。
目的に合わせて新技術を使う
ここまで見てきたように、HTML5 は、新しいことを実現するための新しい技術であり、基本として古い Web ブラウザーでは利用できないというわけです。ですので、Web 制作の現場において、しばらくの間は次の 2 つの選択肢を適切に選んでいく必要があります。
- 新しいことをやりたいから、HTML5 の高度な機能をを採用し、Web ブラウザーの完全サポートを諦める
- 古い Web ブラウザーをサポートしなくてはいけないから、従来の表現に留め、HTML5 や CSS3 の高度な機能は諦める
なぜ、あなたは HTML5 や新技術を使うのかをもう一度考え、サポートする Web ブラウザーを考えてみるといいかと思います。
Web ブラウザーを家庭用ゲーム機にマッピングする
Web ブラウザーを家庭用ゲーム機の世代にマッピングするなら例えば次のような感じでしょうか。
| Web ブラウザー | 相当の家庭用ゲーム機 |
|---|---|
| Internet Explorer 6 | ファミリーコンピュータ |
| Internet Explorer 7 | スーパーファミコン |
| Internet Explorer 8 | Nintendo 64 |
| Internet Explorer 9 | Wii |
| Internet Explorer 10 | Wii U |
| Firefox, Chrome, Opera | PS 3 や XBox 360 |
| Mobile Safari, Android | 3DS や PS Vita |
性能が近い環境ならゲームの移植もされて、例えば TEKKEN TAG TOURNAMENT 2 は PS 3, Xbox 360, Wii U でそれぞれ発売されています。OpenGL と Direct X の違いはありますが。
新しい Web 技術は多くの最新のブラウザーで閲覧することができます。細かい API 実装の違いはありますが。
古いゲームでも、内容が面白ければ今でも遊びたいと思うこともあります。タクティクスオウガとか。
従来の表現の Web ページでもコンテンツがよければ使われ続けます。例えば 2 ちゃんねるとか。
Polyfill は?
さて、一方で Polyfill という考え方があります。Polyfill は古い環境でも、機能を外部から補うことで、仮想的に新しい機能をエミュレートする手法を指します。私も以前は「IE6, ,7, 8 でも CSS3 を使いたい」から Polyfill という手段に頼ったことがありました。しかしこれは最悪で、例えば、旧 IE 上で CSS3 の border-radius などを再現することができる PIE は、HTML の構造に対して自動で独自の要素を追加し角丸などの表現してくれます。しかし、これにより、ただでさえ遅い旧世代のブラウザーの表示は更に遅くなり、また JavaScript によるインタラクションやアニメーション表現にも不具合が現れました。なので、Polyfill という選択は私の中にはほとんどありません。あるにしても安全な範囲で利用する程度です。