Windows Summit /11/7 こんにちは。Windows Summit へようこそ。

Presentation on theme: "Windows Summit /11/7 こんにちは。Windows Summit へようこそ。"— Presentation transcript:

1 Windows Summit 2010 2018/11/7 こんにちは。Windows Summit へようこそ。
© 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2 トランスクリプト付き日本語翻訳ファイルについて
Windows Summit 2010 2018/11/7 トランスクリプト付き日本語翻訳ファイルについて この PowerPoint ファイルには、「ノート」 セクションにセッションの講師が話している内容を書き起こしたもの (トランスクリプト) を入力しています。 ノートを参照するには、PowerPoint の表示モードを [標準] または [ノート] に設定してください。[標準] の場合は、スライド表示ウィンドウの下 (ノート ペイン) に表示されます。 ノート表示モードで見た際に、ノートが 1 ページに収まりきらない場合は、該当するスライドを複製し、複数ページにわたってノートを入力しています。そのため、オリジナルの英語版ファイルと比較して、スライド番号やスライドの枚数が異なる場合があります。 ノートを印刷するには、[印刷プレビュー] または [印刷] 画面において、[印刷対象] を [ノート] に指定してください。 © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3 Senior Program Manager Microsoft Corporation
Windows Summit 2011 2018/11/7 Graphics in HTML5 - Choosing the Right Tool for the Job HTML5 のグラフィック 目的に合った要素を選択する 私は Kraig Brockschmidt です。 Windows エコシステム チームのシニア プログラム マネージャーを務 めています。 このプレゼンテーションでは、HTML5 で使用できるグラフィックの選択肢を説明します。HTML5 では、 おなじみの img 要素に加えて canvas や svg などの新しい要素が使用できるようになっています。 Kraig Brockschmidt Senior Program Manager Microsoft Corporation © Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4 目的 Internet Explorer 9 で利用可能な HTML グラフィック 要素の特性を理解する
Windows Summit 2011 2018/11/7 目的 Internet Explorer 9 で利用可能な HTML グラフィック 要素の特性を理解する どの場合にどの要素を使用するのが適切かを理解する 今回は、Internet Explorer 9 (および以降のバージョン) で利用できる HTML グラフィック要素の特性を 確認し、各要素の最適な使用方法を解説します。 HTML5 では canvas 要素が導入され大きな注目を集めていますが、開発者としては従来の img 要素の機 能や便利さも軽視できません。また、SVG (Scalable Vector Graphics) など、canvas 以外の新しい HTML5 要素の使用が最適である場合があることも理解しておく必要があります。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5 議題 グラフィック要素の特性を確認 各要素の特性を比較 推奨事項 リソース Windows Summit 2011 2018/11/7
最初に 3 つの要素の特性を再確認し、その後でそれぞれを比較しながら解説していきます。これにより、 アプリケーションを設計する際、どのような選択肢があり、どれがベスト プラクティスなのかを判断で きるようになります。このプレゼンテーションの最後には、さまざまな情報源も紹介します。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6 グラフィック要素の基本的な特性 img、canvas、svg はいずれも最終的にはビッ トマップを描画するが、その生成方法が異なる
Windows Summit 2011 2018/11/7 グラフィック要素の基本的な特性 img、canvas、svg はいずれも最終的にはビッ トマップを描画するが、その生成方法が異なる <canvas id="drawMe" /> ... <script type="text/javascript"> var context = document.getElementById ("drawMe").getContext("2d"); context.fillRect(…); context.strokeRect(…); context.beginPath(); context.moveTo(…); context.lineTo(…); context.arc(…); context.stroke(); context.fillText(…); </script> Press Start! <img src="..." /> Press Start! HTML では、静的な特性を持つコンテンツを表現するグラフィック要素として、img、canvas、svg の 3 つがあります。これらは、内部的に動的な処理を行う video 要素とは異なるものです。もちろん、これ ら 3 つの要素についても、JavaScript でコンテンツのアニメーションをプログラミングすることは可能 ですが、今回の説明の中では、基本的には静的な要素であるとして単純に考えていきます。 静的な要素として見た場合、3 つの要素はとても似ています。いずれの要素も、その内部になんらかの ビットマップ データまたは画像データを保持しています。これらの要素の最初の相違点は、要素が画像 データを取り込む際の方法です。 <クリックする> 簡単な画像を含むドキュメントを考えてみます。まずは、img 要素です。 <クリックする> この要素のコンテンツは jpeg、gif、png、さらには svg などのソース ファイルから読 み込まれます。 <クリックする> 2 つ目です。画像自体は同じです。 <クリックする> これは、canvas 要素と JavaScript コードで作成されています。canvas 要素は JavaScript で "コンテキスト API" を呼び出すまで完全に空白の状態である点に注意してください。コン テキスト API を使用して線、弧、曲線、四角形、テキストなどを描画することができます。 <クリックする> 3 つ目です。これも画像自体は同じです。 <クリックする> これは、SVG を使用して宣言的に記述されています。このマークアップは HTML に直接的に記述す ることもできますが、プログラムで生成することもできます。 <svg ...> <rect ... /> <line ... /> <circle ... /> <text ... /> </svg> Press Start! © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7 デモ HTML5 の グラフィック要素 Windows Summit 2011 2018/11/7
<デモに切り替える> 1 つ前のスライドの図に示したように、このドキュメントには 3 つの同じ画像があります。画像はそれ ぞれ異なる種類の要素で作成されています。 HTML ソースを見ると <ソースを表示>、最初の画像は img 要素を使用してファイルから読み込まれて いるのがわかります。2 つ目は canvas 要素で、JavaScript で API 呼び出しを使用して生成されています。 3 つ目は SVG 要素で、ドキュメントの HTMLで直接的に宣言されています。 ご覧のように、各要素が「何を描画可能なのか」に関して基本的には違いがありません。しかし要素を CSS で操作しようとすると、その違いが明らかになります。 <スライドに戻る> © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8 DOM の単なるノードである 他の要素と同様に扱える CSS を使用したスタイル設定が可能 他の要素と重ねることが可能
Windows Summit 2011 2018/11/7 DOM の単なるノードである 他の要素と同様に扱える CSS を使用したスタイル設定が可能 要素内のコンテンツは影響を受けない 他の要素と重ねることが可能 ブラウザーは何を前面に表示するかを z-index で 制御 これは、非常に、非常に重要な点ですが、これらのグラフィック要素が DOM に組み込まれると、ブラ ウザーはこれらを非グラフィック要素と同じように処理します。ブラウザーはドキュメントを表示する 際、基本的には各グラフィック要素の現在のコンテンツを取得して、それを画面に再現します。 要素レベルでもグラフィック要素は他の要素と同様に扱われるため、これらは表示されるときに CSS に よってスタイル設定が行われます。実際、インラインの SVG 要素については、各部分を個別にスタイル 設定することが可能です。CSS でのスタイル設定は要素の内容自体には影響しないので、スタイルを再 設定すれば、元のコンテンツに新しいスタイルを適用することができます。 グラフィック要素は、グラフィック要素どうしで重ねたり、グラフィック要素以外の要素 (video 要素な ど) と重ねたりすることが可能です。ブラウザーは、各要素の z-index に基づいて、重ねる順序に応じて 見え方を自動的に制御します。各グラフィック要素には空白の (透明な) 領域を設定することができます。 PNG や GIF などの画像形式でこのようなことが可能であることは既にご存知のことでしょう。canvas 要素内では、特定の領域を明示的にクリアできます。また、他の API 呼び出しで何も描画されない領域 は透明になります。同様に、SVG の四角形の場合、その SVG のいずれの要素も影響しない領域は透明 です。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9 デモ グラフィック要素への CSS の適用 Windows Summit 2011 2018/11/7
<デモに切り替える> これは前に使用したのと同じドキュメントです。異なるのは、canvas 要素の背景は透明なので、その透 明な領域がわかるように背景色を設定している点です。 また、一番下にチェックボックスを追加して、要素への CSS の適用を制御できるようにしています。 チェックボックスをオンにすると <オンにする>、img 要素が回転と変形のスタイルで変換されます。 canvas 要素は拡大表示され、SVG 要素の各部分に異なる色が設定されます。 チェックボックスをオフにすると <オフにする>、スタイルの適用が解除され、元の状態に戻ります。 ソースを見ると <ソースを表示>、HTML ドキュメントの冒頭に 2 つのスタイル クラスが定義されてい ます。チェックボックス イベントを処理するコードは <下方にスクロール>、img 要素および canvas 要 素にこれらのクラス名を設定または設定解除します。SVG 子要素については、JavaScript で特定のプロ パティを使用してスタイルを適用します。 スタイルを適用する <[APPLY STYLES] をクリックする> と、もう 1 つ気付く点があるでしょう。canvas 要素が、通常のビットマップと同じように、ラスタライズされて表示されます。実は、これは想定どお りの動作です。では次に、これらの要素を拡大縮小した場合の特性を説明します。 <切り替える> © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10 サイズ変更の特性 要素 サイズ変更 ドキュメントのサイズ変更による劣化を避けるための処理 img ラスタライズ
Windows Summit 2011 2018/11/7 サイズ変更の特性 要素 サイズ変更 ドキュメントのサイズ変更による劣化を避けるための処理 img ラスタライズ サイズに合わせて src 属性を切り替える (または SVG をソースとして使用する) canvas 新しいサイズで canvas を再描画する svg 滑らかな拡大縮小 不要 ご存知のとおり、ラスター データをソースとする img 要素は、拡大すると各ピクセルが目立つモザイ ク状になり、縮小すると画像の精度が低下します。これは canvas 要素でも同様です。canvas 要素 では、 API 呼び出しによって内部でビットマップが描画された後、img 要素の場合と同じようにサイズ変更が 行われます。 SVG は滑らかな状態のまま拡大縮小できます。もともとそうした設計になっています。プログラムや CSS によってサイズを変更した場合も、ブラウザーの拡大表示機能を使用した場合も、同じように滑ら かな画像が表示されます。 SVG 以外の要素についても、滑らかな状態のまま (または、それに近い状態で) 拡大縮小する方法はあり ます。img 要素では、ドキュメントのサイズ変更やブラウザーの拡大表示を検知して、src 属性を新し いサイズに合った別の画像に切り替えます。また、img 要素のソースとして、そもそも拡大縮小可能な SVG を使用することもできます。 canvas 要素の場合も、サイズ変更やブラウザーの拡大表示を検知し、新しいサイズで canvas を再描画 します。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11 デモ グラフィック要素の サイズ変更 メディア クエリによる SVG 要素のスタイル設定 Windows Summit 2011
2018/11/7 デモ グラフィック要素の サイズ変更 メディア クエリによる SVG 要素のスタイル設定 では、基本的なサイズ変更時の特性を実際に見ていきましょう。 <デモ 3 に切り替える> まず、2 つの img 要素を含むドキュメントがあります。左の要素のソースはビットマップ、右のソース は SVG です。[Apply scaling] チェックボックスをクリックすると、(CSS によって) 両方とも幅が 1.5 倍、 高さが 4 倍に拡大されます。ご覧のとおり、ラスター ベースの画像はモザイク状になりますが、SVG をソースとする画像は乱れません。 これは、このサイズ変更を無効にして、ブラウザーで拡大表示 (Ctrl キー + マウスホイールを使用) した 場合も同じです。SVG をソースとする img 要素は、インラインの SVG 要素と同様にまったく問題なく 拡大表示できます。 では反対に、ドキュメントを 20% ほど縮小してみましょう。SVG をソースとする img 要素は、ラス ターをソースとする要素よりもずっと滑らかに縮小できます。拡大鏡ツールで画面を拡大表示すると、 はっきりと確認できます。 では、canvas 要素を使用した同様のデモに移ります <デモ 4 に切り替える>。チェックボックスをオン にすると、左の canvas は前回と同様に CSS のスタイルでサイズが変更されます。右側の canvas は新し いサイズで再描画されます。 チェックボックスをオンにすると、右の canvas 要素は SVG のように滑らかなままサイズ変更されます。 これは、サイズが変更されるたびに再描画されるからです。ただし、このサイズ変更を無効にしてブラ ウザーで拡大表示すると、canvas 内で、img 要素と同様にラスタライズが行われていることがわかりま す。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12 デモ (続き) グラフィック要素の サイズ変更 メディア クエリによる SVG 要素のスタイル設定 Windows Summit 2011
2018/11/7 デモ (続き) グラフィック要素の サイズ変更 メディア クエリによる SVG 要素のスタイル設定 <デモ 5 に切り替える> もう少しダイナミックな動作として、このデモでは、canvas 要素が常にブラウ ザー ウィンドウ全体を占めるサイズに再描画されるのをお見せします。ウィンドウのサイズを変更する と、canvas は滑らかに拡大縮小します。 <デモ 6 に切り替える> もう 1 つ、CSS のメディア クエリを使用する優れたデモをお見せしましょう。これは、ブラウザー ウィンドウのサイズと新しいサイズの比較結果に応じて、SVG の特定の部分の表示/非表示を自動的に 切り替えることができます。 この SVG にはサイズの異なる text 要素が 5 つあります。各要素は個別にスタイルが設定されています。 CSS では <CSS を表示>、メディア クエリを使用して、ブラウザーの幅が特定の値の場合に display を none に設定してそのクラスが非表示になるようにしています。ブラウザー ウィンドウのサイズを小さ くして SVG を縮小すると、小さいテキストは表示されなくなります。ウィンドウのサイズを大きくする と、テキストが再度表示されます。これはすべて、メディア クエリを使用して CSS をインラインの SVG 要素に適用することだけで実現されています。1 つの SVG が、そのサイズに応じてさまざまな詳細 レベルで表示されます。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13 その他の特性 要素 再描画のトリガ* モード img src 属性の変更 ピクセル canvas コンテキスト API の呼び出し
Windows Summit 2011 2018/11/7 その他の特性 要素 再描画のトリガ* モード img src 属性の変更 ピクセル canvas コンテキスト API の呼び出し Immediate (即時): API 呼び出しはピクセルに描画され、保持されない svg 要素構造の変更 Retained (保持): 図形はすべて DOM 要素として存在する (img 要素の src 属性で使用される場合を除く) 他にもいくつか知っておくべき特性があります。 まずは、ブラウザーにおいてグラフィック要素の再描画をトリガーする操作がそれぞれ異なるという点 です。 img 要素は、src 属性が変更されるとブラウザーによって再描画が行われます。 canvas 要素は、コンテクスト API が新たに呼び出されると再描画が行われます。 SVG は、(JavaScript を使用して) 要素構造を変更すると再描画が行われます (DOM 内の要素をプログラ ムで操作すると常に再描画が行われます)。 また、HTML 要素すべてが一般的にそうであるように、スタイルが変更されると再描画が行われます。 canvas 要素では、JavaScript コードの実行が完了しブラウザーに制御が戻った時点でのみ再描画が行わ れます。つまり、JavaScript コードが canvas を操作している間は、画面上にその効果は現れません。変 更が見えるようになるのは、コードが制御を返し、ブラウザーが完成した canvas のコンテンツをブラ ウザー ウィンドウのドキュメントに再現したときです。 理解しておくと役立つもう 1 つの特性は、要素の処理モードです。 img 要素は、ご存知のように大量のピクセルの集合にすぎません。 canvas 要素のモードは “Immediate” (即時) と呼ばれます。画像内の各部分は API 呼び出しで記述します が、その呼び出し操作は canvas のビットマップが描画されるとすぐに消去されます。つまり、処理が GPU に渡されると、その元の操作が何であったかは保持されずわからなくなります。このため、canvas 要素は最終的には単なるピクセルの集合となります。 これに対して SVG 要素は “Retained" (保持) モードです。すべての構成要素が DOM 内に独立して存在 します。つまり、個別に操作、作成、削除などを行うことが可能です。簡単に言うと、インライン SVG (img 要素のソースとして使用される場合は除く) は、常に、それを作成したマークアップ記述をすべて 保持しています。 * JavaScript でスタイルを変更すると、どの要素も再描画が行われる © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14 各要素の利点 要素 利点 img 高速なレンダリングおよび変形 静的な要素や背景、繰り返し表示される背景に最適
Windows Summit 2011 2018/11/7 各要素の利点 要素 利点 img 高速なレンダリングおよび変形 静的な要素や背景、繰り返し表示される背景に最適 src 属性の変更によるアニメーションが可能 canvas 高度な動的コンテンツ 画像の生成とその後のレンダリングが高速 ピクセル単位での操作が可能 頻繁な計算を必要とする高度な動的/対話型コンテンツに最適 svg 滑らかな拡大縮小 個々の要素 (保持されている要素) の細かい制御が可能 図形単位での操作が可能 対話型グラフィック、細かなスタイル設定、縮小拡大、図形単位での動的な属性に最適 これまでの内容を 1 つにまとめてみましょう。各グラフィック要素の長所を相対的に理解することで、 具体的な設計を判断できるようになります。 img 要素はラスター データであるため、静的コンテンツに適しており、ドキュメント内でのレンダリ ングが高速です。回転や変形の処理も高速です (GPU アクセラレーションの効果)。たとえば、アニ メーションの開発では、一連の複数の画像を使って 1 つのスプライトをアニメーション化します。 canvas 要素は、アニメーションも含め、計算処理によって生成されるグラフィックに向いています。 コンテキスト API の負荷は内部的に GPU にオフロードされるので、IE9 でのパフォーマンスは非常 に高く、img 要素のレンダリングと比べても遜色ありません。canvas 要素は、サイズ変更が必要な場 合には再描画することができます。この機能を使用すれば、img 要素での問題のいくつかは解決できま す。たとえば、知っておくと便利な機能として、img 要素のコンテンツを canvas 要素に直接レンダ リングする機能、ビデオ フレームを操作する機能などがあります。 SVG もハードウェア アクセラレーションに対応しており、対話型グラフィック、細部まで精密な図表、 画像内の各部を直接操作できるようにしたい画像などに最適です。もちろん、滑らかな拡大縮小が必要 とされるあらゆる場面に最適です。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15 推奨事項 デザインする時に、適切なグラフィック要素 の使用を検討する 3 つの要素を組み合わせて使用することが最 善な場合が多い
Windows Summit 2011 2018/11/7 推奨事項 デザインする時に、適切なグラフィック要素 の使用を検討する どの要素も Internet Explorer 9 のハードウェア アクセラレーションに対応 3 つの要素を組み合わせて使用することが最 善な場合が多い 要素の重ね合わせを活用することで、プログラ ミング モデルを単純化できる Web アプリケーションを設計する際は、各グラフィック要素を最大限に活用できる適切な使用を検討し てください。IE9 のハードウェア アクセラレーションによって、これら 3 つの要素のパフォーマン スはそれぞれの最適な用途において特に向上しています。 最適な使用を追求していくと、多くの場合は、1 つのアプリケーション内でこれら 3 つのグラフィッ ク要素を組み合わせて使用するのが最善であるという結果が導き出されます。要素の重ね合わせと透明 な部分の処理はブラウザー側で行われるので、複数の種類の要素を使って、それぞれに適切な機能や効 果を実装することが可能です。たとえば、ビデオの上に canvas 要素を重ねて吹き出しを表示するこ とができます。この際、ビデオに手を加える必要はありません。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16 Windows Summit 2011 (Internet Explorer 9 Test Drive サイトにあるデモ)
2018/11/7 デモ Blizzard と Pinball 最後のデモとして、IE9 Test Drive サイトの数あるデモの中から 2 つのデモを簡単に紹介し、複数の要素 を組み合わせて使用するケースを説明します。 <BLIZZARD を実行する> Blizzard アプリケーションで表示される雪の地面と雪だるまは、それぞれ別の SVG 要素を使用していま す。雪の地面は、ブラウザー ウィンドウのサイズに合わせて滑らかに拡大縮小します。雪だるまは、雪 の地面上に重ねられています。また、雪だるまは吹雪の中で踊っていますが、これは SVG の各部分に CSS のスタイル設定を使用することで実現されています。 空と吹雪は、それぞれ別の canvas 要素です。空は最背面に置かれた静的なグラデーションで、ブラウ ザー ウィンドウのサイズが変わると再描画されます。吹雪は最前面に表示され、ご覧のとおり、多数の 雪粒をアニメーション処理しています。 なお、左上に表示されているあいさつ文は、画面底部のパフォーマンス指標と同様、単なる HTML テキ ストです。ぜひこのデモのソース コードをご覧になって、これらの各要素から全体がどのように構成さ れているかを理解してください。 <PINBALL を実行する> Pinball ゲームでは、img 要素と canvas 要素が使用されています。背景と周囲の画像に静的な img 要素 がいくつか使用されています。この背景の上に canvas 要素が置かれ、アニメーション処理が実行され ています。このデモについても、ソース コードがとても参考になります。 (Internet Explorer 9 Test Drive サイトにあるデモ) © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17 リソース Windows Summit セッション Internet Explorer Test Drive サイト (英語)
2018/11/7 リソース Windows Summit セッション SVG 入門 Canvas 入門 Internet Explorer 9 で高度なグラフィックを作成する ベスト プラクティス Internet Explorer Test Drive サイト (英語) ブログ: canvas と SVG の選択 (英語) これらの他にも、canvas、SVG、グラフィックスについてさらに詳しく解説している Windows Summit セッションがたくさんあります。また、IE9 Test Drive サイトには、今回取り上げた HTML5 のグラ フィック要素を実際に使用したデモが豊富にあります。さらに、canvas と SVG の最適な使用法を説明 した、素晴らしい内容のブログ記事もあります。 このセッションは以上です。ご清聴ありがとうございました。皆さんの HTML5 開発作業の成功をお祈 りしています。 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

18 Windows Summit 2011 2018/11/7 © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation.All rights reserved.Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.