Share via

アプリケーションのための HTML5: IE10 Platform Preview 4

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

【元記事】HTML5 for Applications: The Fourth IE10 Platform Preview 2011/11/30 9:23 PM

Windows Developer Preview (英語) で利用できる IE10 Platform Preview の更新がダウンロード (英語) 可能になりました。このプレビュー版では、HTML5 テクノロジのサポートがさらに充実しており、よりリッチな Web アプリケーションを、大幅に改良されたパフォーマンスで利用することができます。IE10 では、CSS3 によるトランスフォームやアニメーション、SVG などのテクノロジに対してハードウェア アクセラレーションを行うことで、他のブラウザーよりも高速なレンダリングを実現しています。次の短いビデオではそのようすを紹介しています。

IE10 に追加された HTML5 対応やパフォーマンス改良点の紹介

今回リリースされた Platform Preview 4 では、開発者がサイトですぐに活用できる HTML5 テクノロジが追加されています。完全なリストは IE10 の開発者向けガイド (英語) でご確認いただけますが、ここでは一部を紹介します。

  • Cross-Origin Resource Sharing (CORS) により、ドメインを横断した XMLHttpRequest を安全に使用
  • File API: Writer が BlobBuilder をサポートすることにより、ブラウザーでスクリプト内の大きなバイナリ オブジェクトの操作が可能
  • JavaScript の型付き配列に対応し、ストレージと型付きデータの操作が効率化
  • CSS の user-select プロパティによって、エンド ユーザーが Web ページやアプリケーション内の要素を選択する方法を制御
  • タイム コード、配置、キャプション ファイル形式など、HTML5 ビデオ テキスト キャプションのサポート

これらは、バイナリ データとファイルの操作、アプリケーション UI における選択範囲の制御とヒット テスト、アクセシビリティに配慮したキャプション対応のビデオ コンテンツの提供など、ネイティブ アプリケーションを製作する開発者が頼りにする、基本的な機能です。この Platform Preview に含まれる機能は現在 Web ページで利用することができ、Windows 8 の Metro スタイル アプリケーションでも利用できる予定です。

HTML5 アプリケーションの開発

今回の IE10 プレビューでは、CORS (Cross-Origin Resource Sharing (英語)) がサポートされ、開発者は XMLHttpRequest を使用して、異なるドメイン上のアプリケーション間でデータの要求、共有、移動を安全に行うことができます。これは、複数のアプリケーションからデータやサービスを集めて利用する際に、開発者が使用する一般的なパターンです。この Test Drive デモ (英語) では、CORS を XMLHttpRequest、File API、HTML5 progress コントロールと組み合わせ、スムーズなエクスペリエンスで複数のファイルを別のドメインのサービスにアップロードできるようになっています。

IE Test Drive デモ Cross-Site Upload で、HTML5 のターゲット要素へのドロップによって 4 つの画像ファイルがアップロードされているようす

ここ (英語) をクリックすると、CORS と XMLHttpRequest の組み合わせを使った、別ドメインへのファイル アップロードを確認できます。

バイナリ データとファイルの扱いが可能となることで、開発者は Web 上で新しい種類のアプリケーションやエクスペリエンスを実現することができます。今回の IE10 プレビューでは File API: Writer (英語) の BlobBuilder がサポートされ、大きいバイナリ オブジェクト (blob) と JavaScript の型付き配列に対応します。この Test Drive デモ (英語) では、さまざまなファイル タイプを (PCX ファイルのようにブラウザーがネイティブにはサポートしないものを含めて) 読み込み、レンダリングし、さらには内容を表示しているようすをご覧いただけます。

IE Test Drive デモ Binary File Inspector で、PCX ファイルの 16 進数ダンプと、HTML5 Canvas と JavaScript を使って同じファイルをレンダリングしているようすのスクリーンショット。

ここ (英語) をクリックすると、JavaScript の型付き配列と File API を使ったバイナリ ファイルの読み込みと表示を確認できます。

開発者が高度な Web アプリケーションを構築するようになればなるほど、エンド ユーザーがページの各パートをどのように選択するかという点についても、さらに詳細な制御が必要になります。IE10 でサポートされる CSS user-select では、アプリケーションを使ってもらう際に、ページ内のどの要素がコンシューマーによって選択可能か、開発者が指定することができます。この Test Drive デモでは、CSS 規則の user-select プロパティを使った選択範囲の制御がどのように適用されるかを、ブログ アプリケーションのサンプルでご覧いただけます。

IE Test Drive デモ User-Select で、Web ページの一部でテキストの選択を制限するために必要なマークアップが表示されているスクリーンショット。

ここをクリックすると、CSS の user-select プロパティにる、エンド ユーザーの Web ページ選択範囲の制御をお試しいただけます。

HTML5 の Same Markup 改善に向けて

HTML5 標準化団体で開発中のテスト スイートへの貢献は引き続き行っており、相互運用性とマークアップ共通化 (Same Markup) の目標に向けて、新たに 118 のテストを提供しています。これらのテストは IE Testing Center でもご参照いただけます。開発者の皆さんには、ページを作成される際は HTML5 の標準にまず準拠し、HTML5 のドキュメント タイプ <!DOCTYPE html> を必ず使用するよう、強くお勧めしたいと思います。

IE10 Preview 4 では互換モード (英語) が更新されており、Firefox、Chrome、Safari、Opera などの他のブラウザーの互換モードとの整合性と相互運用性が向上しています。更新された互換モードでは、ページ レイアウトについては後方互換性を実現しつつ、オーディオ、ビデオ、Canvas といった HTML5 要素などの、最近の標準機能が利用できるようになっています。

IE10 で利用可能になった新機能の完全なリストは、IE10 開発者向けガイド (英語) でご確認いただけます。更新された IE10 を試すには、Windows 8 Developer Preview (英語) をダウンロードしてください。引き続き、開発者のコミュニティと連携して取り組みを続けていきたいと思います。また、Connect (英語) でのフィードバックをお待ちしています。

— Internet Explorer 担当グループ プログラム管理者 Rob Mauceri

今回リリースされた Platform Preview 4 では、開発者がサイトですぐに活用できる HTML5 テクノロジが追加されています。完全なリストは IE10 の開発者向けガイド (英語) でご確認いただけますが、ここでは一部を紹介します。

  • Cross-Origin Resource Sharing (CORS) により、ドメインを横断した XMLHttpRequest を安全に使用
  • File API: Writer が BlobBuilder をサポートすることにより、ブラウザーでスクリプト内の大きなバイナリ オブジェクトの操作が可能
  • JavaScript の型付き配列に対応し、ストレージと型付きデータの操作が効率化
  • CSS の user-select プロパティによって、エンド ユーザーが Web ページやアプリケーション内の要素を選択する方法を制御
  • タイム コード、配置、キャプション ファイル形式など、HTML5 ビデオ テキスト キャプションのサポート

これらは、バイナリ データとファイルの操作、アプリケーション UI における選択範囲の制御とヒット テスト、アクセシビリティに配慮したキャプション対応のビデオ コンテンツの提供など、ネイティブ アプリケーションを製作する開発者が頼りにする、基本的な機能です。この Platform Preview に含まれる機能は現在 Web ページで利用することができ、Windows 8 の Metro スタイル アプリケーションでも利用できる予定です。

HTML5 アプリケーションの開発

今回の IE10 プレビューでは、CORS (Cross-Origin Resource Sharing (英語)) がサポートされ、開発者は XMLHttpRequest を使用して、異なるドメイン上のアプリケーション間でデータの要求、共有、移動を安全に行うことができます。これは、複数のアプリケーションからデータやサービスを集めて利用する際に、開発者が使用する一般的なパターンです。この Test Drive デモ (英語) では、CORS を XMLHttpRequest、File API、HTML5 progress コントロールと組み合わせ、スムーズなエクスペリエンスで複数のファイルを別のドメインのサービスにアップロードできるようになっています。

IE Test Drive デモ Cross-Site Upload で、HTML5 のターゲット要素へのドロップによって 4 つの画像ファイルがアップロードされているようす

ここ (英語) をクリックすると、CORS と XMLHttpRequest の組み合わせを使った、別ドメインへのファイル アップロードを確認できます。

バイナリ データとファイルの扱いが可能となることで、開発者は Web 上で新しい種類のアプリケーションやエクスペリエンスを実現することができます。今回の IE10 プレビューでは File API: Writer (英語) の BlobBuilder がサポートされ、大きいバイナリ オブジェクト (blob) と JavaScript の型付き配列に対応します。この Test Drive デモ (英語) では、さまざまなファイル タイプを (PCX ファイルのようにブラウザーがネイティブにはサポートしないものを含めて) 読み込み、レンダリングし、さらには内容を表示しているようすをご覧いただけます。

IE Test Drive デモ Binary File Inspector で、PCX ファイルの 16 進数ダンプと、HTML5 Canvas と JavaScript を使って同じファイルをレンダリングしているようすのスクリーンショット。

ここ (英語) をクリックすると、JavaScript の型付き配列と File API を使ったバイナリ ファイルの読み込みと表示を確認できます。

開発者が高度な Web アプリケーションを構築するようになればなるほど、エンド ユーザーがページの各パートをどのように選択するかという点についても、さらに詳細な制御が必要になります。IE10 でサポートされる CSS user-select では、アプリケーションを使ってもらう際に、ページ内のどの要素がコンシューマーによって選択可能か、開発者が指定することができます。この Test Drive デモでは、CSS 規則の user-select プロパティを使った選択範囲の制御がどのように適用されるかを、ブログ アプリケーションのサンプルでご覧いただけます。

IE Test Drive デモ User-Select で、Web ページの一部でテキストの選択を制限するために必要なマークアップが表示されているスクリーンショット。

ここをクリックすると、CSS の user-select プロパティにる、エンド ユーザーの Web ページ選択範囲の制御をお試しいただけます。

HTML5 の Same Markup 改善に向けて

HTML5 標準化団体で開発中のテスト スイートへの貢献は引き続き行っており、相互運用性とマークアップ共通化 (Same Markup) の目標に向けて、新たに 118 のテストを提供しています。これらのテストは IE Testing Center でもご参照いただけます。開発者の皆さんには、ページを作成される際は HTML5 の標準にまず準拠し、HTML5 のドキュメント タイプ <!DOCTYPE html> を必ず使用するよう、強くお勧めしたいと思います。

IE10 Preview 4 では互換モード (英語) が更新されており、Firefox、Chrome、Safari、Opera などの他のブラウザーの互換モードとの整合性と相互運用性が向上しています。更新された互換モードでは、ページ レイアウトについては後方互換性を実現しつつ、オーディオ、ビデオ、Canvas といった HTML5 要素などの、最近の標準機能が利用できるようになっています。

IE10 で利用可能になった新機能の完全なリストは、IE10 開発者向けガイド (英語) でご確認いただけます。更新された IE10 を試すには、Windows 8 Developer Preview (英語) をダウンロードしてください。引き続き、開発者のコミュニティと連携して取り組みを続けていきたいと思います。また、Connect (英語) でのフィードバックをお待ちしています。

— Internet Explorer 担当グループ プログラム管理者 Rob Mauceri