サイト使用可能になった HTML5: IE10 Platform Preview 2 を開発者向けに公開

  • Article

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 

【元記事】Site-ready HTML5: Second IE10 Platform Preview Available for Developers (2011/6/30 3:59 AM)

最近公開された "Windows 8" デモで使用されていた、HTML5 エンジンである IE10 Platform Preview 2 がダウンロード可能になりました。

この更新で IE10 は、Web サイトで使用する準備の整っている HTML5 テクノロジをサポートするとともに、パフォーマンスの向上も実現しています。


このビデオでは、 IE10 Platform Preview 2 に搭載されている HTML5 テクノロジの一部を実際にご覧になれます。

Platform Preview 2 のリリースにより、開発者は、サイトで使用できるように準備が整えられてきた HTML5 テクノロジの使用を始めることができます。このテクノロジは、パフォーマンスとセキュリティに優れた、対話型の美しい Web アプリケーションを構築することを可能にします。IE10 開発者向けガイドの詳細についてはこちらを参照してください。

主な変更点は以下のとおりです。

  • CSS3 Positioned Floats や HTML5 ドラッグ アンド ドロップ、File Reader API、メディア クエリ リスナーなどの新テクノロジへのサポート、さらに HTML5 フォームへのサポートの開始によって、対話型の美しい Web アプリケーションがより簡単に作成できます。
     
  • HTML5 アプリケーションのパフォーマンスを全面的に向上させます。さらに、チャネル メッセージングを使用した Web ワーカー、非同期スクリプトのサポートなどの新テクノロジにより、パフォーマンスの向上とバッテリーの効率的な使用の両方を実現します。
     
  • 同一のマークアップの使用と、iframe を分離する HTML5 サンドボックスのサポートによって、Web アプリケーションのセキュリティが向上します。
     

IE10 は、 Web アプリケーションがプラグインを使用せずにブラウザー上で多くの機能を実行できるという IE9 の特徴を継承しています。さらに、各種の処理を PC のパーツの中で最も適したものにオフロードする (グラフィックであれば GPU へ、JavaScript のバックグラウンド コンパイルであれば複数のプロセッサ コアへ) という手法も継承しています。

対話型の美しい Web アプリケーション

IE10 がサポートする HTML5 テクノロジを利用すれば、対話型の美しい Web アプリケーションをより簡単に作成できます。

たとえば IE10 は、ページ内の図の周囲にテキストを自由に配置できるようにする CSS3 Positioned Floats をサポートします。これは、Platform Preview 1 でサポートしている CSS3 のグリッド、複数列、可変ボックス (Flexbox) を基に実現されています。

Picture showing how with Positioned Floats text lays out around floating elements for a more natural reading experience.
こちらから、Positioned Floats 機能をお試しください。フローティング要素の周囲にテキストが回り込むようにすることで、自然な読みやすさが実現されます。

Web サイトの美しさは、信頼性のある一貫した解析動作から生まれます。

この IE10 Platform Preview には、W3C HTML5 仕様の解析に関する改善が取り込まれています。これは、マークアップが不完全だったり間違っていたりしても、あらゆる互換ブラウザーで同一の動作を実現したいという開発者の期待を反映したものです。

HTML5 は、間違ったマークアップの場合にどのように動作するかを定義した初めての HTML です。HTML5 の解析動作は、ブラウザーごとに異なる "修正" ルールに頼るのではなく、開発者が信頼できる仕様に定義されています。IE10 は、File Reader API および HTML5 フォーム検証 (Forms Validation) をサポートするようになりました。また、グラフィック エディターやゲーム、あるいは複数のグラフィック レイヤーを使用することの多いその他のアプリケーションなど複雑性の高い一部のシナリオに役立つ、高度なヒット テストもサポートします。

Test Drive のこのデモを実行してみると、同一の Web ページを異なるブラウザーで実行した場合に、各ブラウザーが同じ標準へのサポートを揃って主張しているにもかかわらず、結果が一様でないことがわかります。品質や正確性は、ブラウザーの HTML5 エンジンによって大きく変わってきます。相互運用性および同一のマークアップという目標を達成するには、標準化団体で開発されているテストスイートが Web 開発者コミュニティにとってますます重要になってきます。このデモでは、ハードウェア アクセラレーションの実装が異なると、パフォーマンスも異なるということも示しています。

Picture showing the How Stuff Works demo and how hardware accelerated HTML5 canvas works together with CSS3 gradients. Comparison in IE, Firefox 5, and Chrome 13.
IE10 Platform Preview、Firefox 5、および Chrome 13 を使用した場合の実行結果。こちらから、しくみを解説した How Stuff Works デモをお試しください。ハードウェア アクセラレーションを使用した HTML5 Canvas と CSS3 Gradients が連動して機能する様子が確認できます。

Web アプリケーションのパフォーマンス

ブラウザーの種類によるパフォーマンスの違いは、上記の他に、Test Drive の Fireflies デモでも確認できます。実際の Web アプリケーションでは、複数のテクノロジを組み合わせて使用することが多いため、HTML5 の video、audio、canvas と CSS3 Gradients をうまく併用することが重要です。

IE10 は、W3C 作業部会からの新しいパフォーマンス API をサポートする最初のブラウザーです。Test Drive の setImmediate、requestAnimationFrame、および PageVisibility のデモでは、これらの API を使用することで、Web の速さと応答性を向上させつつ、モバイル デバイスで Web サイトを使用するときのバッテリーの効率的な使用をいかに実現できるかが説明されています。

Web ワーカーでは、Web の新しいプログラミング シナリオを実現できます。Web ワーカーを使用すると、複雑な JavaScript を切り離してバックグラウンドで実行することができるので、応答性の良い Web アプリケーションを実現できます。たとえば、簡単なゲームでは、ユーザーが自分のプレイをしている間に、Web ワーカーで "コンピューター プレイヤー" のロジックを実行することができます。

Test Drive のこのデモは、処理をページから Web ワーカーに移すことでパフォーマンスが向上することを紹介しています。チャネル メッセージングは Firefox 5 ではサポートされていないので注意してください。チャネル メッセージングは、Test Drive で使用できるこのテクノロジの追加機能の 1 つです。

Picture showing the Fountains demo and how Web Workers delivers more responsive experience and consistent frame rates.
噴水を使った Web Worker Fountains デモをお試しください。Web ワーカーによって、応答性の良いエクスペリエンスと一定のフレーム レートがどのように実現されているかがわかります。

非同期スクリプトがサポートされたことで、開発者は、サイトからのダウンロードを実行するスクリプトが Web ページのパフォーマンスに及ぼす影響を制御できます。

Web アプリケーションのセキュリティ

この IE10 Platform Preview は、HTML5 サンドボックスと iframe の分離をサポートするようになりました。これは、Web アプリケーションのセキュリティに欠かすことのできない要素です。

Picture showing the HTML5 sandbox demo. Note that Firefox 5 does not support this.
こちらから、HTML5 サンドボックスのデモをご覧ください。(Firefox 5 では、これはサポートされていません。)

マイクロソフトは、Web ワーカーの設計の一部について、プライバシーに関する具体的な懸念があることを W3C の作業部会に報告するとともに、その問題の解決方法を提案しました。

今後の期待

開発者は、IE10 で強化された HTML5 サポートを活用することによって、今日のすばらしいサイト (こちらのサイトやこちらのサイト) をさらに超えるようなサイトおよびアプリケーションを構築することが可能になります。さまざまなブラウザーが、同一のマークアップで、同一の結果を生成し、さらに優れたパフォーマンスを達成できるように開発者をサポートしています。HTML5 アプリケーションの可能性は必ず実現されることでしょう。こうした目標のために、マイクロソフトでは、270 以上の新しいテストを IE Test Center に掲載し、標準化団体に提出しました。

プラットフォーム プレビュー版を使用すれば、テクノロジに関心を寄せる人々や開発者は、新しいテクノロジを試し、Web サイトで使用する準備の整っているテクノロジと、まだ実験段階のテクノロジとを混同することなく、フィードバックを提供できます。こうした取り組みは、一般ユーザーを危険にさらす前に、技術者たちによってセキュリティ関連の問題 (前述のプライバシー関連の問題やこちらの問題など) を解決することを可能にします。また、サイトを一般に公開してから作成し直すというような手間を最小限に抑えることにもなります。「HTML5, Site-Ready and Experimental (HTML5: Web サイトで使用できる機能と実験段階の機能)」という記事で、このトピックについて詳細に説明しています。たとえば、File API の最初のサポートは HTML5 Labs で始まり、ここでのフィードバックに基づき、IE Platform Preview へ追加されました。

Web テクノロジの製品化にこのような手法を採用しているため、マイクロソフトは、Windows の製品ライフサイクルの実施と同様、IE10 をその公開後 10 年間にわたってサポートし続ける予定です。こちらのブログ記事では、いくつかのシナリオとユーザーの観点から、こうした手法が重要であることを紹介しています。

開発者には、特定の機能をサポートしない数多くのブラウザー (たとえばモバイル デバイス用) に対応するため、機能検出の使用を今後もお勧めします。

 // ブラウザーがチャネル メッセージングをサポートしているかどうかを確認する
if (window.MessageChannel) {
   /* このブラウザーでチャネル メッセージングを使用する */
}

IE10 開発者向けガイドには、開発者が利用できる全新機能の一覧があります。マイクロソフトは今後も、コミュニティと一体となって取り組み、皆様からのフィードバックに耳を傾けていきます。

Dean Hachamovitch

追伸: 開発者の方々には、改善された innerHTML のサポートを、この IE10 Platform Preview 2 でお試しになることをお勧めします。