[Blog翻訳] アニメーションを使って Windows アプリケーションのエクスペリエンスを向上させる

Article
06/13/2011

みなさん、こんにちは。 Windows 開発統括部の古内です。

これまでにもちょくちょく翻訳記事をお届けしている Developing for Windows Blog には、Windows 7 のタスクバーについての記事が結構あるので、その翻訳をご紹介しようと思いましたが、翻訳しようとした記事が昔のタスクバーに関するブログ記事を参照しており、さらにその記事から別のタスクバー関連のブログ記事が参照され、と芋づる式に翻訳すべき記事が出てきたので、現在その調整中です。そんなに遠くない将来、Windows 7 のタスクバーに関するブログ記事の翻訳をシリーズでお届けできると思いますので、どうぞ楽しみにしていてください。

ということで、タスクバーの翻訳記事の紹介が頓挫したので、今週はアニメーションに関する英語ブログ記事の翻訳を 2 つご紹介することにしました。(タスクバーとは関係ないって!? そのとおりでございます... ) まずは、2010 年 11 月 16 日に Developing for Windows Blog に投稿された「Enhancing your Windows application experience with animation」の翻訳です。

アニメーションを使って Windows アプリケーションのエクスペリエンスを向上させる

アプリケーションにおける重要な側面の 1 つが、ユーザーエクスペリエンスです。似たようなアプリケーションが大量にある中で、ユーザーエクスペリエンスは、自身が作成したアプリケーションと無数の競合相手が作成したアプリケーションとの差別化を図る鍵となる可能性があります。ユーザーエクスペリエンスに差を付ける方法の 1 つとして、アニメーションの利用があります。アニメーションを適切に組み込むことで、よりリアルなエクスペリエンスを作成できるだけでなく、使いやすさや分かりやすさを向上させる効果もあります。たとえば、巧妙なアニメーション技法をインタラクティブなユーザーインターフェイス要素に適用すると、ユーザーはアニメーションに自然に引き込まれ、機能の操作に迷わなくて済むようになります。一方、アプリケーションエクスペリエンスに対するユーザーの期待はますます高まっています。ユーザーは懸命に稼いだお金を、高性能な GPU が搭載された最新 PC ハードウェアに費やしており、言葉に出さずとも自分の使用するアプリケーションにこうした技法が活用されていることを期待しています。

Windows 開発者は、自身が使用する開発エクスペリエンスを常に選択しています。幸いにも Windows API では、アニメーションを実現するための選択肢が幅広く用意されています。従来のネイティブコード開発者、Silverlight や HTML を使って RIA を作成する開発者、.NET Framework や WPF を好む開発者であればいずれも、アニメーション技法を適用することができます。また、これら技法はすべて無条件に適用することが可能です。基盤となるハードウェアの特定の機能に対象を絞る必要もありません。アプリケーションの作成は、ある一定の方法で行います。またアニメーションの抽象化によって、存在している機能が何であっても、最大限のサポートを得ることができます。以下のセクションでは、Windows のアニメーションのサポートを促進するさまざまなプログラミング方式を紹介します。

ネイティブ

C++ では、アニメーションの抽象化は Windows Animation Manager で実現します。Windows Animation Manager は、DirectX と GDI+ に基づいて作られた COM プリミティブとユーティリティクラスのセットです。アニメーションの概念になじみがない方には、まずこちらの MSDN 記事を参照されることをお勧めします。MSDN にはこの他にも、アニメーションの一連の基本概念をカバーするサンプルがいくつか用意されています。またこれらの基本的なサンプルの他にも、Hilo という優れたサンプルアプリケーションがあります。タッチやタスクバーの統合といった Windows 7 のさまざまな概念の中でも、Hilo では特にアニメーションを高度に活用して、ユーザーエクスペリエンスを高めることができます。 (訳者註: Hilo については、当ブログのこちらの記事をご参照ください。)

Silverlight/WPF/XAML

Silverlight と WPF では実装の詳細が多少異なりますが、双方が提供するアニメーションの基本要素には、共通のオブジェクトモデルとマークアップ言語 (XAML) が使用されます。実際、MSDN 上の双方のアニメーションの概要を比べてみると、実によく似ていることがわかります (Silverlight/WPF)。Silverlight と WPF がネイティブプログラミングよりも優れている主な点の 1 つは、XAML の使用にあります。XAML は、アニメーションを定義するための宣言構文を提供します。これにより、ビジネスロジックとプレゼンテーションテクノロジをより明確に切り分けられるため、同一プロジェクトにおいて設計者と開発者が作業を別々に行うことが可能になります。

Internet Explorer 9

Internet Explorer 9 は、HTML5 Canvas 要素と CSS3 を使用した 2D Transforms によって、2D アニメーションをサポートします。双方のメカニズムともハードウェアの性能を活用して、きわめて滑らかなエクスペリエンスを実現します。このサポートを利用するには、Beauty of the Web から IE9 をダウンロードします。Canvas アニメーションのデモを見たい方は、ぜひ私のお気に入りである Canvas Pinball (英語) にアクセスしてみてください。

参考資料

Windows Animation Manager	https://msdn.microsoft.com/ja-jp/library/dd371981(VS.85).aspx
Windows Animation API の概要	https://msdn.microsoft.com/ja-jp/library/dd317017(v=VS.85).aspx
Windows Animation のサンプル	https://msdn.microsoft.com/ja-jp/library/dd940528(v=VS.85).aspx
Hilo: Windows 7 対応 C++ アプリケーションの開発	https://msdn.microsoft.com/ja-jp/library/ff708696.aspx
Silverlight アニメーションの概要	https://msdn.microsoft.com/ja-jp/library/cc189019(VS.95).aspx
WPF Animation Overview (英語)	https://msdn.microsoft.com/en-us/library/ms752312.aspx
Internet Explorer 9 開発者ガイド: HTML5 Canvas 要素	https://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_HTML5_canvas
Internet Explorer 9 開発者ガイド: CSS3 2D Transforms	https://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_CSS3_2D_Transforms
Beauty of the Web	https://www.beautyoftheweb.jp/
Canvas Pinball (英語)	https://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html