IE9 Compat Inspector

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。  【元記事】IE9 Compat Inspector (2011/4/28 12:46 AM) IE9 がリリースされました (英語)。IE に対して他のブラウザーと同じマークアップを使って、サイトが IE9 標準モードで正常に動作することを確認してみましょう。先日には、IE9 に向けてのサイトの準備を説明するブログ (英語) も掲載されました。各自のサイトに影響する可能性のある変更の一覧については、Internet Explorer 9 互換性ガイドを参照してください。また、変更点をさらに詳細に知りたい場合は、Internet Explorer 9 開発者ガイドを参照してください。この記事では、サイトの準備を促進する新しいリソースである Compat Inspector (互換性テスト ツール) を紹介します。 Compat Inspector Compat Inspector は、実行中にサイトを分析する JavaScript ベースのテスト ツールです。これは、標準モードで問題を引き起こす操作のパターンを報告します。これを使用すれば、大量の資料の内容を覚えていなくても、またサイトのコード全体を検索しなくても、簡単に問題を特定することができます。Compat Inspector は、IE9 の開発過程で、さまざまなサイトに共通する問題を迅速に発見できるようにすることを目的に作成されました。この作成においては、IE チームの多くのメンバーから Compat Inspector のルールを構成する数々のテスト ケースが提供されました。これらのテスト ケースはすべて公開されています。各自のサイトでこのツールを使用する前に、まずは Compat Inspector Test Drive (英語) をお試しください。 Compat Inspector は、サイトを…


IE9 のサブピクセル フォント

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】Sub-pixel Fonts in IE9 (2010/11/3 12:21 PM) Internet Explorer 9 は、HTML5 コンテンツのハードウェア アクセラレーション レンダリングの一部として、サブピクセル ClearType® フォント ポジショニングを採用しています。IE9 のベータ版では、この機能に関して多くのフィードバックや質問が寄せられています。この記事の大半は、Web 開発者が注意すべき点について説明するものです。しかし、開発者以外の Windows ユーザーも各自の表示状態に合わせて ClearType を調整することによってメリットが得られるので、まずは、その点から説明しましょう。 ClearType の調整 最適な結果を得るためには、各自の表示ハードウェアに合わせて ClearType を調整する必要があります。 Windows 7 を使用している場合は、コントロール パネルの [デスクトップのカスタマイズ] – [フォント] – [ClearType テキストの調整] にある組み込みの ClearType テキスト チューナーを使用して、ClearType 設定を調整できます。(4 ページで構成されるこのチューナーの…


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

本記事は、マイクロソフト本社の 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>、<audio>、および <video> の使用

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】 Same Markup: Using <canvas>, <audio>, and <video> (2010/9/03 7:07 PM) これまでいくつかのブログで、Internet Explorer 9 における “同一のマークアップ” の実現を繰り返し説明してきました。”同一のマークアップ” を実現するには、IE9 が適切な機能をサポートし、同じ HTML、JavaScript、CSS が “そのまま” 他のブラウザーと同じように動作する必要があります。IE9 は “同一のマークアップ” の実現に向けての貢献の 1 つとして、HTML5 の <canvas> 要素、<audio> 要素、<video> 要素に対する一貫したサポートを提供しています。これらは Platform Preview 3 で導入されましたが、その後も更新ごとに改良されています。 同一のマークアップに関する最初の記事 (英語) では、同一マークアップの実現が一筋縄ではいかないことを説明しました。同一のマークアップを実現するには、まず各ブラウザーが、適正な機能と適正な動作をサポートする必要があります。また Web 開発者は、残念ながらブラウザー間の違いが残っている部分について、それを解決するためのコードを作成する役割を担っています。Web 開発者にとって、ブラウザーの違いに対応する際に最も重要となるのは、ブラウザーの検出ではなく機能の検出を行うことです。そのためこの記事では、<canvas>、<audio>、<video> について機能検出を使用する方法を概説します。…


IE9 の強化された DOM 機能の紹介

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の Platform Preview 4 ( 正式リリース以前の) について記載しておりますのでご了承ください。 【元記事】Exploring IE9’s Enhanced DOM Capabilities (2010/9/2 3:25 PM) IE9 Platform Preview 4 でマイクロソフトは、JavaScript エンジン Chakra を IE に統合する方法を大幅に設計し直しました。この再設計は、Dean の記事 (英語) でも解説されていますが、IE9 標準モード向けに DOM のプログラミング モデルを少し変更して、新しい ECMAScript 5 機能との整合性の確保、他のブラウザーとの相互運用性の向上、さらに新しい標準である WebIDL (英語) への準拠を実現しています。 この記事では、これらのプログラミング モデルの変更について詳細に説明します。強化された DOM 機能は、最新の Platform Preview ビルドで利用できます。この記事では、Platform Preview 4 と共にリリースされた…


Chakra: 標準を越えて実現する相互運用性

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】Chakra: Interoperability Means More Than Just Standards (2010/8/26 9:31AM ) 標準仕様に含まれない機能を実装するかしないか、マイクロソフトがどのように判断していると思いますか。すべてのブラウザー プロバイダーと同様に、我々もこの決定を下す場面に何度も遭遇します。この記事では、実際の JavaScript の例を使用して、標準仕様が不十分な場合でも相互運用性のあるブラウザーを提供するためにマイクロソフトが原則として使用している概念をいくつか説明します。 理想は、標準仕様がすべての機能を完全に網羅していることです。JavaScript の実装であれば、本来は、ECMAScript 仕様 (英語) のすべてを含むようにすればよいだけで、それ以外のことを考える必要はありません。マイクロソフトでは、Web ブラウザー間の相互運用性を実現するためには、Ecma International (英語)、W3C (英語) などの標準化団体 (英語) から公開される仕様が最も重要だと考えています。ブラウザーの実装者がどのような機能を提供し、Web 開発者がどのような機能を使用できるのか、といったことがすべて仕様に示されていれば、それが理想的です。 しかし、実際の Web 環境はそれほど単純明解ではありません。仕様が完璧であることはほとんどなく、意図的に不完全またはあいまいにされていることもあります。私は ES5 (ECMAScript 5) 仕様の編集にかかわったこともあるのですが、完全には解決されない問題が常に存在していることも承知しています。結局、どの標準仕様にも定義されていないが、広く実装され使用されている機能がいくつも存在するというのが現在の状態です。既存の Web が動作するブラウザーを構築しようとするなら、標準仕様で定義されていないさまざまな機能を実装する必要があるのです。 正規表現文法の実例 我々は、正規表現文法を含む ES5 仕様に忠実に従って Chakra (英語) を構築しました。しかし、実際の Web…


SVG の進歩

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の Platform Preview ( 正式リリース以前の) について記載しておりますのでご了承ください。 【元記事】More on SVG (2010/8/27 3:00 PM) 最初の IE9 Platform Preview で、IE9 における SVG のサポートが初めて明らかになりました。以前に説明したとおり、SVG は W3C によって管理されるベクター イメージ形式です。3 回目と 4 回目の IE9 Platform Preview のリリースでは、SVG の機能が全面的に提供されるようになりました。主な追加機能には、SVG グラデーション、パターン、クリッピング、およびマスキングがあります。これらの機能は、奥行きとテクスチャを使ってのイメージの作成に使用されることが多く、通常は比較的複雑な SVG ファイルで使用されます。IE9 での他の SVG 機能と同様、これらの新しく追加された機能も完全にハードウェア アクセラレートされます。これにより、特にクリッピングやマスキングなど、複雑な計算を伴う機能のパフォーマンスは大幅に向上します。私たちは、引き続き SVG 作業グループと協力 (英語) しながら、SVG 1.1 (第 2 版) 仕様のあいまいさを解消し、IE9…


IE9、不透明度、アルファ

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】 IE9, Opacity, and Alpha (2010/8/17 6:15PM) IE9 では、CSS3 カラー モジュール (英語) と、よく使われるその不透明度プロパティがサポートされるようになりました。他の標準ベースの機能と同様に、不透明度が実装されることで、他のブラウザーで使用されているマークアップが IE9 標準モードでもそのまま動作します。 IE8 以前のバージョンでは、IE 固有のフィルター プロパティのアルファ フィルターを使用して不透明度を適用する代替メカニズムが実装されていました。IE9 標準モードでは不透明度だけがサポートされ、アルファ フィルターはサポートされないため、互換性の問題が生じます。(IE9 の Quirks モード (互換モード)、IE7、および IE8 では、アルファ フィルターはサポートされますが、不透明度は実装されていません。) ベスト プラクティスである機能検出を使用するサイトでは、これは問題になりません。それらのサイトは、IE9 が不透明度をサポートしていることを検出して、フィルターの代わりに不透明度を使用します。問題は、ブラウザー検出を使用するサイトです。このようなサイトは、IE が常に不透明度の代わりにアルファ フィルターを使用するものと誤って判断し、スクリプトでフィルター プロパティだけを変更します。そのような Web ページの不透明度エフェクトは、IE9 既定の IE9 ドキュメント モードで実行されると、正しく表示されません。修正方法としては、以前の記事 (英語) で説明したように、最初に標準ベースの不透明度機能を検出し、次にブラウザー固有のフィルター機能を検出します。 CSS…


DOM トラバーサル

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) Platform Preview  についてのものになりますのでご了承ください。 【元記事】DOM Traversal (2010/7/30) 最新の Platform Preview ビルドには、DOM の操作に役立つ相互運用性を備えた機能として DOM トラバーサル (英語) と要素トラバーサル (英語) の 2 つが用意されています。この 2 つの機能を使えば、Web 開発者はブラウザーの種類を問わず同一のマークアップを使ってドキュメントを簡単かつ柔軟、高速にトラバースできます。どちらの機能もフラットな列挙処理を行います。DOM ツリーを反復処理可能なリストに単純化し、トラバースする対象のノード群をフィルタリングによって絞り込むことができます。両機能とも、ブラウザーの種類を問わず同一のマークアップで機能するため、この記事で使用するコードは IE9 Platform Preview およびその他の各種ブラウザーでお試しいただけます。 ページ内のある要素を探したい場合、この 2 つの機能がなければ、firstChild と nextSibling を使って深さ優先の縦型のトラバース処理を繰り返さなければならず、コードが複雑になり、実行速度も低下します。DOM トラバーサルや要素トラバーサルを利用すれば、新しい方法でより効果的に問題を解決できます。このブログ記事では、これらの概要といくつかのベスト プラクティスを紹介します。 最初に要素トラバーサルについて説明しましょう。要素トラバーサルは、最も単純なインターフェイスで、DOM 要素の列挙によく使われるパターンを使用しています。要素トラバーサルは、基本的には、DOM Core を要素用に最適化したものです。firstChild と nextSibling の代わりに、firstElementChild と nextElementSibling を呼び出します。以下はその例です。…


CSS コーナー: 良質なデザインは良質な Web タイポグラフィから

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】The CSS Corner: Better Web Typography For Better Design (2010/7/15) Web ページのデザインから抜け落ちるもの 「Web デザインの 95% はタイポグラフィ」。Web コンテンツの大半がテキストで構成されているにもかかわらず、これまでデザイナーとユーザーは、クライアント オペレーティング システム間で互換性のある、いくつかの決まったフォントしか使用できませんでした。この不自由なタイポグラフィ環境を改善するため、各種ブラウザーに対応できる CSS による手法、グラフィック ベースの解決策 (英語)、プラグイン (英語) など、あらゆる手段が講じられてきましたが、そのどれもが追加の記憶域や帯域幅が必要になったり、アクセシビリティが低下したりといったマイナス面を伴うものでした。 こうしたことから、Photoshop で作成したデザインのモックアップから Web ページを作成する段階で、決まって書体が犠牲になるというのが当たり前の状況でした。 相互運用性に欠ける CSS この課題を解決するために必要とされたのは、フォント リソースを記述するための相互運用性のある CSS 構文でした。IE では、1997 年から CSS2 の @font-face 規則がサポートされていましたが、この最も初期の実装と CSS3 フォント (英語)…