よくある Canvas の問題を解消する

  • Article

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。
なお、本記事中の Internet Explorer 9 は、元記事執筆当時の Platform Preview ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。

【元記事】 Debugging Common Canvas Issues (2010/9/8 3:12 PM)

以前の記事 (英語) で説明したように、IE9 は HTML5 Canvas をサポートしています。これについては、最新の Internet Explorer 9 をダウンロードすることですぐにお試しいただけます。最新の Web 標準を使用するサイトを対象にした私たちのテストでは、Canvas を使用する数多くのサイトが IE9 で正常に動作することが確認されています。サイトに <canvas> を使用している開発者のために、IE9 を含めた各種のブラウザーでこの要素の正常な動作を保証するための方法を 2 つ紹介します。ブラウザーの検出ではなく機能の検出を用いる方法と、<!DOCTYPE html> を使用する方法です。

ブラウザーを検出する代わりに機能を検出する

ブラウザー検出を使用している場合 (たとえば、ユーザーが IE ユーザー エージェント文字列を使用していることを検出したら、Canvas を含まない実装に自動的に切り替えるなどしている場合) は、IE9 でも HTML5 コンテンツの表示をブロックしてしまいます。このため、ブラウザーの検出ではなく、機能の検出を行い、ユーザーのブラウザーに特定の機能があるかどうかを確認することが推奨されます。たとえば、次のコードを使用して、ユーザーのブラウザーが Canvas をサポートしているかどうか確認できます。

 var canvas = document.createElement("canvas");
if (canvas.getContext && canvas.getContext("2d")) { {
 // Code requiring canvas support
} else {
 // Canvas isn't available. Put non-canvas fallback here
}

こうすることで、その時点のブラウザーがサポートしている機能を推測する必要がなくなり、ブラウザーが進化したときでもサイトを継続して動作させることができます。機能の検出については、こちらの記事 (英語) で詳しく説明しています。

ユーザーのブラウザーが Canvas をサポートしているかどうかを確認する方法

  • 推奨: Canvas 機能を検出するコードの実行
  • 非推奨: ユーザー エージェント文字列を使用したブラウザーの検出
  • 非推奨: 条件付きコメント

サイトが必ず IE9 モードで表示されるようにする

標準 DOCTYPE (英語) を使用しているなど、サイトが Web 標準に対応している場合、IE9 は既定でそのサイトを標準モードで表示します。サイトが標準モードで表示されているかどうかを確認するには、F12 キーを押して開発者ツールを起動し、サイトのドキュメント モードが IE9 標準であるかどうかを確認します。

[ドキュメント モード: IE9 標準] と表示された '開発者ツールのスクリーンショット'

Canvas は、IE9 標準モードでのみサポートされている新しい機能です。これは、従来のドキュメント モードでの完全な下位互換性を維持するために行われた設計上の決定です。サイトが IE9 標準モード以外のドキュメント モードで表示されている場合、Canvas などの HTML5 要素は表示されません。たとえば、ページに DOCTYPE が含まれていない場合、IE9 はそのサイトを Quirks モード (英語) で表示します。IE9 でページを意図したとおりに動作させるには、厳密な DOCTYPE を Web ページに追加することをお勧めします。たとえば、次のような W3C HTML5 DOCTYPE (英語) を追加できます。

<!DOCTYPE html>

また、次のように、よく使われる厳密な DOCTYPE も使用できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE がドキュメント モードをどのように判定するかについては、こちらの記事 (英語) を参照してください。

相互運用性と Canvas

IE9 では相互運用性がきわめて重視されました。その結果として、マイクロソフトでは、IE9 に対して他のブラウザーと同一の標準ベースのマークアップを使用することを推奨しています。元々別のブラウザー向けに Canvas を使用して開発したサイトのほとんどは、IE9 でもそのまま動作します。とは言っても、ブラウザーの種類によってサイトの動作が多少異なる場合があります。たとえば、Test Drive サイトのCanvas Pad デモ (英語) を見てください。

IE9 で表示された Canvas Chrome で表示された同じ Canvas - グラデーションや影の表示が IE9 とは異なる Firefox で表示された同じ Canvas - IE9 に似ているが、いくつかの影の表示が IE9 や Chorome とは異なる Safari で表示された同じ Canvas - やはり影が異なる Opera で表示された同じ Canvas - これも異なる

これは、ブラウザーごとに表示が多少異なる Canvas 機能の例です。マイクロソフトは IE9 を可能な限り相互運用可能にしていますが、一部の Canvas 機能については、他のブラウザーでの実装が完全でなかったり正しくなかったりすることがあります。このような場合、マイクロソフトは W3C 仕様 (英語) に従っています。またマイクロソフトでは、すべての人の仕様の解釈および実装が一致するように、テスト ケース (英語) を W3C に提供しています。マイクロソフトが実装している影の詳細については、IE Test Center の Canvas の検証 (英語) を参照してください。

W3C 仕様の目的は、すべてのブラウザーが準拠すべき標準を定義することです。各種のブラウザーが一様に仕様とは異なる動作をするケースについては、マイクロソフトは、その相互運用性のある動作が Web 開発者にとって有意義であるなら、その動作を反映するように仕様を更新すべきであると考えています。たとえば、W3C 仕様 (英語) の HTMLFrameElement には contentWindow 属性が含まれていませんでしたが、IE8、Firefox、Chrome はいずれもこの属性をサポートしています。マイクロソフトは、問題点を報告 (英語) すると共に変更方法を提案しました。HTML5 の最新の改訂ではこの仕様が更新されています。

IE9 が予期しない動作をし、それが相互運用性の問題や、仕様からの逸脱に関係していると思われる場合は、Microsoft Connect からぜひその問題をご連絡ください。IE9 の Platform Preview とベータ版では、ユーザーの皆さまからできるだけ多くのご意見をお寄せいただくことを目的の 1 つにしています。問題があると思われる点は、どうぞ遠慮なくお知らせください。

ありがとうございました。
Elizabeth Ford、Jatinder Mann
Internet Explorer プログラム マネージャー

編集 9/9: 検出コードのサンプルを更新して信頼性を強化しました。 問題を指摘してくれた Paul Irish に感謝します。