内部のしくみ: Test Drive デモ Let It Snow...

  • Article

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

【元記事】Under the Covers: Let It Snow…　January 19, 2012 7:27 PM

今日、ここシアトルではめったに見られない吹雪が吹いています。これにあやかり、2011 年のホリデー シーズンに公開した Test Drive デモ "Let It Snow" についての解説を投稿したいと思います。 — 編集担当

ブラウザーが基盤のハードウェアを有効に活用できると、可能性は無限に広がります。ホリデー シーズンにリリースしたデモでは、Internet Explorer 10 で実現される、ハードウェア アクセラレーションをフル活用した、タッチ主導のブラウジング エクスペリエンスの優れている点をご覧いただけます。この記事では、その Let It Snow (英語) デモがどのように作成されたかを詳しく説明します。このデモで使われているパターンは、現在の Web と初期の Metro スタイル アプリ (英語) で広く見られる、典型的な HTML5 エクスペリエンスです。今回は、視覚的な観点ではなく、機能面から解説します。

性能の低いモバイル デバイスとタッチ主導のユーザー エクスペリエンスが主流になったことで、ユーザーがブラウザーのパフォーマンスについて期待することは急激に増えています。現在では、ブラウザーのパフォーマンスは、指を使って Web サイトをスムーズに動かせるか、Web サイトがタッチ操作にすぐに反応するか、ブラウザーの電力消費は効率的か (英語) という観点でも評価されます。Internet Explorer 10 と Windows 8 では、現実のシナリオに即した、世界最速のブラウザーを開発することを目指しています (英語)。

Let It Snow の開発

まず、ホリデー メッセージを表示するための領域を含む、テーマ付きのポストカードを作成します。

ホリデー シーズン用ポストカード

まず、ホリデー メッセージを表示するための領域を含む、テーマ付きのポストカードを作成します。このポストカードは、HTML5 Canvas を使用して実行時に生成されるもので、イメージの描画、グラデーションの作成、不透明度と傾斜の操作など、一般的な描画技法が使われています。
次に、多数の舞い落ちる雪の結晶を追加して、吹雪を作成します。

アニメーションによる吹雪

次に、多数の舞い落ちる雪の結晶を追加して、吹雪を作成します。これは、2 つ目の Canvas を使って作成し、先ほどのポストカードに重ねています。雪の結晶は、1 つ 1 つが JavaScript コレクションのオブジェクトとして表現されています。オブジェクトには、結晶の現在の位置や落ちる速度といった結晶の状態と、描画するイメージが保持されています。この Canvas はフレームごとにクリアされ、シーンが基盤のモデルから再作成されます。
立て札の上に雪が徐々に積もっていきます。

積もる雪

立て札の上に雪が徐々に積もっていきます。ヒット テストの技法を使用して、雪の結晶が立て札の上に来るタイミングを特定し、立て札上の任意の位置をターゲットとして雪の結晶にランダムに割り当てます。雪の結晶がターゲットの位置に近づいたら、HTML5 Canvas の合成モード (英語) を使用して、Canvas に雪の結晶を合成します。
指またはマウスを使ってポストカードから雪を払うことができます。

積もった雪を払う

指またはマウスを使ってポストカードから雪を払うことができます。このデモでは、新しい MSPointer イベント (英語) を使ってユーザー入力を追跡しています。このイベントを利用すると、指やマウスといった種類の異なるポインター モデルに対しても、1 つの API だけで一貫して対応できます。これにより、Windows 8 で実行する Internet Explorer 10 では、すばらしいマルチタッチ エクスペリエンスを実現できます。このデモでは、キャプチャしたポイントを使って、Canvas の特定の部分を消去することで、雪が払われたように見せています。
レイヤー (Canvas) を合成して、インタラクティブなホリデー シーンを作成することができます。

シーン完成

レイヤー (Canvas) を合成して、インタラクティブなホリデー シーンを作成することができます。このデモで使用したパターンは、Angry Birds や Cut The Rope (英語) などのゲームで一般的に使われている技法で、スクリプト ベースのアニメーション、高度なユーザー入力、物理学に基づくゲーム理論などが取り入れられています。

Internet Explorer 10 と Windows 8 では、ハードウェア アクセラレーションをフルに活用できる、タッチ操作に対応した HTML5 プラットフォームにより、すばやく滑らかなインタラクティブ エクスペリエンスを実現できます。ぜひ、Windows 8 Developer Preview (英語) を使って、ご自身でこのエクスペリエンスの魅力をお確かめください。

— Internet Explorer 担当グループ プログラム マネージャー Bogdan Brinza