複数のWebブラウザーを用意する

ブラウザーが実際にWebページを描画するために利用しているプログラムのことをレンダリングエンジン（rendering engine）と言います。 このレンダリングエンジンはブラウザーによって違っています。 IEは「Trident」、Google ChromeやSafariは「WebKit」、Firefoxは「Gecko」というレンダリングエンジンを採用しています。 また、スマホ、タブレット用のSafariやAndroidブラウザーでは、いずれも「WebKit」を採用しています。 複数のブラウザーを利用されている方は既にお気づきかもしれませんが、レンダリングエンジンが違うとWebページの表示が微妙に違ってきます。 例えば、ブラウザーによって画像の表示される位置が少しずれているとか、最悪の場合、特定のブラウザーで見たときだけレイアウトが崩れているということもあり得ます。

このような事情から、作成したWebページが実際にどのように見えるのかを主要ブラウザーのすべてでチェックすることをお勧めします。 各ブラウザーは以下のサイトにてダウンロードすることができます。

• Google Chrome
• Firefox
• Safari
• Opera
• IE

尚、本講座ではGoogle Chromeを基準に解説をしていきます。その理由は次の3つです。

• スマホ、タブレットで標準のSafariやAndroidブラウザーと共通のレンダリングエンジン（WebKit）を採用している。
• 高機能のデベロッパーツール（デバッガ）を標準で搭載している。
• IEに次いでユーザーが多い。

WebブラウザーのHTML5実装状況を調べる方法

HTML5は未完成どころか仕様すら確定していない（2013年1月時点）ということにも注意する必要があります。 HTML5の多くのAPIが主要なブラウザーで既に実装されているのですが、その実装状況はブラウザーによって違います。各ブラウザーのベンダーはHTML5の仕様が完全に決定するまで待つのではなく、もう実装しても良いと判断したAPIから実装しているのです。そして、その判断の基準もベンダーによってまちまちです。 従って現時点では、どのブラウザーがどこまでAPIを実装しているのかを知った上でHTML5を利用していくことが必要になります。

APIとはApplication Programming Interfaceの略語です。 これはプログラムを作るための部品とその機能の集まりのことだと思ってください。 例えば、Canvasは画像を描画するためのAPI、Web Storageはデータの保存に関するAPIです。

ベンダー（vendor）は「売り手」という意味です。 例えば、IEのベンダーはMicrosoft、SafariのベンダーはAppleですね。

特に注意が必要なのはIEです。 IE8以前のバージョンはHTML5にほとんど対応していないのです。 従って、本講座はIE8以前のバージョンを切り捨てるという方針を取らざるを得ません。 2013年1月時点、IEの中でのシェアはIE9が46％、IE10が3％程度で、IE8以前がまだ51％を占めています。 しかし新しい技術を取り入れるためには致し方ないことなのです。

それでは、どのブラウザーがどこまでHTML5のAPIを実装しているのでしょうか。 それを知る上で役立つサイトをご紹介しましょう。

HTML5 API チェッカー

こちらはHTML5.JP様のWebページです。 ブラウザーで訪問すると、そのブラウザーがHTML5の各APIに対応しているかどうかを判定してくれます。 APIの実装度をパーセントで表示して、さらに細かい項目について実装状況を青、黄、赤で色分けをして示しているので、とても分かりやすくなっています。

Can I use... Support tables for HTML5, CSS3, etc

こちらのサイトは、各ブラウザーにおけるHTML5 APIの実装状況を一覧表の形でまとめています。 各APIをどのブラウザーのどのバージョンが実装しているのかが一目瞭然です。 英語のサイトですが、シンプルにまとめられているので心配は要りません。