Building Windows 8

Windows エンジニアリング チームによるブログ

Metro スタイルのブラウジングとプラグイン フリーの HTML5

Metro スタイルのブラウジングとプラグイン フリーの HTML5

  • Comments 0

Windows 8 の開発者プレビューをインストールしたユーザーの多くが最初に試してみる機能は、IE10 ブラウザーでしょう。Windows で最も使用されているツールです。プレビューに付属しているのは IE 10 Platform Preview 3 です。HTML5 エンジンについて私たちが進めている仕事については、IE ブログ (英語) でご参照いただけます。この記事では、Metro スタイルの IE で導入された大きな変更、つまりプラグイン フリーのブラウジングについてお話しします。Windows 8 では、Metro スタイル アプリとデスクトップ アプリの両方の形態で IE 10 を利用できます。デスクトップ アプリ版では、プラグインや拡張機能は引き続き完全にサポートされます。使用される HTML5 エンジンとスクリプト処理のエンジンは同一で、必要なら 2 種類のフレーム ウィンドウを自由に切り替えて使うこともできます。慣れ親しんだ主なナビゲーション操作のキーボード ショートカットやマウス操作への対応は、Metro スタイルの IE でも今までどおり提供されます。たとえばタブの作成、タブ間の移動、タブを閉じる、アドレスの入力、検索などの操作を今までと同じように行うことが可能です。私はこのブラウザーをフルタイムで使っていて、自分が Windows Phone に費やした時間も考慮すると、同様のエクスペリエンスとタッチ操作が提供されることは、個人的には間違いなくプラスだと感じています。しかしもちろん、ブラウジングにどのツールを選ぶかはあなたしだいです。妥協の必要はありません。今回の記事は、IE チームの指揮を執る Dean Hachamovitch が執筆しました。
--Steven

Web をさらに進展させ、コンシューマーがタッチ操作メインのブラウジングを最大限に活用できるように、Windows 8 に搭載されている Metro スタイルのブラウザーは可能な限り HTML5 に向けて純化し、プラグイン フリー (英語) の設計になっています。今日プラグインによって得られるエクスペリエンスは、Metro スタイルのブラウジングと近代的な HTML5 ベースの Web とは相性がよくありません。

Metro スタイルの IE をプラグイン フリーで動作させることにより、バッテリーの寿命が延びるほか、セキュリティ、信頼性、およびプライバシーの面でコンシューマーにメリットがあります。プラグインは、Web の歴史の初期においては重要な存在でした。しかし Web はそこ (英語) から始まる長い道のりを歩み、今や HTML5 という地点に至っています。旧来のプラグイン技術との互換性を提供することは、Metro スタイル UI でのブラウジングによりコンシューマーが得られるエクスペリエンスを、改善するというよりは損なうことになるでしょう。

実際に、今日では各サイトでプラグイン フリーのエクスペリエンスを目指すエンジニアリングが急速に進んでいます。たとえば、Google が携帯電話向けに HTML5 版の YouTube サイトをローンチしたのは記憶に新しいところです。少し前の IE ブログの記事 (英語) では、プラグイン フリーのサイトが主流になりつつあることや、プラグイン フリーに対応するためにサイトは何をすればいいか、といったことを話し合いました。私たちは世界中で上位 97,000 のサイトを対象に、プラグインの使用状況を調べました。このデータは、米国外のローカル サイトをかなりの深度で含めたものです。現在 Adobe Flash を使用している 62% のサイトのうちの多くが、プラグインがサポートされない場合に HTML5 ビデオにフォールバックするという対応を既に採用しています。多くのサイトでは、プラグインがない場合に広告を表示するという形で既に同等の対応をしており、このアプローチが実用的かつスケーラブルなものであることがわかります。その他のプラグインの使用率は Flash に比べると非常に低く、2% のサイトで使用されているコントロールが 1 つ、0.5% ~ 0.75% のサイトで使用されているコントロールが少数ある程度にとどまっています。

Windows 8 では、従来の ActiveX コントロールを必要とするコンシューマー サイトや基幹業務アプリケーションはデスクトップ用の IE で引き続き実行することができ、Metro スタイルの IE を使用しているユーザーも [Use Desktop View] (デスクトップ ビューを使用する) をタップすることでこれらのサイトを利用することができます。こういったサイトが行っている処理は、特に Windows 8 のアプリでは、HTML5 を活用することによって、より合理的に実現できるでしょう。

今日のプラグイン フリーのブラウザーは、適切にオーサリングされた HTML5 コンテンツを使用することで、既にすばらしいエクスペリエンスを実現しています。タッチ操作が加わった Metro スタイルの IE では、エクスペリエンスはさらに向上するでしょう。

ご高覧ありがとうございます。

Dean

追記: 下の例では、開発者が HTML5 で実現できる機能 (たとえばビデオや XHR) をプラグインに頼らないように移行していくのに合わせて、IE がサイトごとに挙動を調整しているようすを確認できます。ほとんどのサイトはプラグインなしの IE で正常に動作します。そうでない場合でも、IE が別のブラウザーとして挙動したり、別のモードでサイトを実行することで、サイトが IE で正常に動作します。私たちが Web 開発者のコミュニティと協力して移行を進めていく間、IE は引き続き互換表示一覧 (CV リスト) を利用して、サイトがコンシューマー側で正しく表示されるようにします。

次に示すのは、BUILD カンファレンスで Windows 8 の開発者プレビュー ビルドと同時に提供を開始された CV リストの一部です。

<?xml version="1.0" encoding="utf-8" ?>
<iecompatlistdescription>
    <version>1152921504606910005</version>
    <ttl>1</ttl>
    <domain docMode="EmulateIE7">monster.com</domain>
    <domain docMode="EmulateIE7">pbskids.org</domain>
    <domain docMode="EmulateIE8" uaStringImmersive="iPad">nate.com</domain>
    <domain docMode="EmulateIE8" versionVector="8" uaString="8">bankofamerica.com</domain>
    <domain docMode="EmulateIE8" versionVector="8" uaString="8">wellsfargo.com</domain>
    <domain docMode="EmulateIE8">7-eleven.com</domain>
    <domain docMode="EmulateIE9" versionVector="9" uaString="9">sportsillustrated.cnn.com</domain>
    <domain docMode="EmulateIE9">lowes.com</domain>
    <domain docMode="IE9">github.com</domain>
    <domain featureSwitch="createElementWithMarkup:false">dodge.com</domain>
    <domain featureSwitch="createElementWithMarkup:false">krispykreme.com</domain>
    <domain featureSwitch="createElementWithMarkup:false">youtube.com</domain>
    <domain uaStringImmersive="Firefox 5">tv.slashgear.com</domain>
    <domain uaStringImmersive="iPad">mashable.com</domain>
    <domain uaStringImmersive="iPad">tested.com</domain>
    <domain>about.zappos.com</domain>
    <domain>airborne.gogoinflight.com</domain>
    <domain>aol.com</domain>
</iecompatlistdescription>

Blog - Comment List MSDN TechNet
  • Loading...
Leave a Comment
  • Please add 6 and 2 and type the answer here:
  • Post