Metro スタイル アプリの高速で滑らかなアニメーション

高速で滑らかなアニメーションは、アプリに生気を吹き込みます。Windows 8 Consumer Preview では、アニメーションがユーザー エクスペリエンスの不可欠な要素であることに注目してください。PC にログインすると、[スタート] メニューの項目がアニメーション表示されます。また、イマーシブなアプリを起動するか、[スタート] メニューをズームインすると、滑らかなアニメーションにより豊かなエクスペリエンスが得られます。アニメーションは、特定の操作の結果として何が行われたかをユーザーに伝えることができます。この視覚的なフィードバックにより、アプリの応答性に対するユーザーの信頼が得られます。一覧内の項目をシンプルに追加または削除する場合であっても、微妙なアニメーションを使用することで、滑らかかつ新鮮な方法により有益な情報を提供できます (Jensen Harris’s //build/ session (英語)、約 25:00 分を参照してください)。 この短いビデオは、スムーズなアニメーションによる多彩な UI を披露するものです。 お使いのブラウザーでは HTML5 ビデオがサポートされていません。 ビデオをダウンロードしてお好みのメディア プレーヤーで再生することができます: 高画質 MP4 (英語)| 低画質 MP4 (英語) Windows 8 では、アニメーションは Metro スタイル パーソナリティの主要なコンポーネントであり、この個性を自身のアプリに活かすことができます。 今回のブログ記事の内容は次のとおりです。 アニメーション エンジンの簡単な概要 アニメーション ライブラリの使用を始める方法 カスタム アニメーション、およびアニメーション エンジンの改良点を利用する方法 Metro スタイル アプリにアニメーションを組み込むためのヒントとテクニック。 独立型アニメーション Windows 8 のエクスペリエンスの大きな部分を占めるのがぎくしゃくしないスムーズなアニメーションであり、それは独立型アニメーションと呼ばれる機能を通じて実現されています。”独立型アニメーション″ は、コア UI ロジックを実行するスレッドからは独立して実行するアニメーションです (“依存型アニメーション″…


ピクセルを最大限に活用する – 表示状態の変更に適応する

Windows 8 のアプリは、さまざまな画面サイズとさまざまな表示状態で実行されます。ユーザーは、25 インチのデスクトップ モニターの側端にアプリをスナップすることもできますし、10 インチのワイドスクリーン タブレットの画面全体をアプリで埋めることも可能です。いずれの場合も、皆さんのアプリが利用可能なスペースを十分に活用することが望まれます。この記事では、アプリの現在のサイズと表示状態をコードで追跡する方法と、画面サイズと表示状態の変更を処理するために Windows 8 Consumer Preview でアプリを記述する方法について、ヒントを示します。 //build/ では、さまざまな画面シナリオに合わせてアプリを設計する方法について説明しました。たとえば、XAML に関する講演 (英語) や HTML に関する講演 (英語) をお聞きください。最近の Building Windows 8 ブログでは、画面のスケーリングの調査と設計に関する私たちの考えを少しお伝えしました。多くの場合、明示的なコードを記述しなくても、純粋なマークアップを使って画面サイズの変更に対応できます。しかし、アプリの表示状態 (英語) を追跡し (つまり、アプリが縦長モード、全画面モード、フィル モード、スナップ モードのどれであるか)、それに応じて反応するようにコードを記述することが必要になる場合があります。たとえば、HTML の ListView を使ってアイテムを表示する場合、次の図に示すように全画面モードでは GridLayout を使いますが、スナップ モードでは ListLayout を使います。XAML の場合、GridView コントロールと ListView コントロールを同様に切り替えることができます。このための方法を理解するために、まずはサイズ変更と表示状態の変更をコードで検出する方法を見てみましょう。 左の全画面表示状態では、GridLayout (HTML) または GridView コントロール (XAML) が使われている。 右のスナップ表示状態では、ListLayout (HTML) または ListView コントロール (XAML)…


パフォーマンス キラーに立ち向かう: Metro スタイル アプリの一般的なパフォーマンスの問題

高速で滑らかなアプリの作成に役立つメソドロジやツールを紹介した前回の記事「Metro スタイル アプリのパフォーマンスを改善する方法」を読んでいただけたかと思うので、今回は、アプリでこれまで目にした一般的なパフォーマンス キラーについて詳しく説明したいと思います。この記事では、JavaScript ベースでも XAML ベースでも、Metro スタイル アプリのパフォーマンスを計測可能なかたちで顕著に改善できた、最も有効な指針を提供します。また、使用している言語に関係なく、大きな違いを生む 5 つの具体的なプラクティスを紹介します。さいわい、これらのプラクティスは、巧妙なトリックや複雑な操作を利用しません。ここで紹介するガイドラインに従うことで、アプリのパフォーマンスは大幅に改善すると確信しています。コメントで、この記事のガイダンスについての感想をお知らせください。また皆さん独自のヒントも紹介していただけるとさいわいです。 基本のガイダンス ネットワーク コンテンツではなく、パッケージしたコンテンツを基本的に利用します。 ローカルのイメージやファイルは、ネットワーク上のイメージやファイルよりも、例外なく速く取得できます。 アプリが “ライブ” イメージを読み込む必要がある場合は、ライブ イメージの取得中に、ローカルのイメージをプレースホルダーとして使用することをお勧めします。 ローカル イメージを適切なサイズに調整します。 イメージが必ず同じ解像度で表示される場合は、その解像度にあらかじめ調整したイメージをパッケージします。これにより、イメージが表示されるたびに、実行時にサイズを調整する必要がなくなり、アプリのライフサイクルを通じて何度も発生したはずのパフォーマンスの低下要素を排除できます。 イメージが表示される解像度が複数ある場合は、大きな理由がない限り、イメージの複数のバージョンをパッケージします。 最近のアプリにふさわしく、起動時間は短くします。 ネットワーク操作は、必ずスプラッシュ スクリーンが消えてから実行するようにします。 アプリのアクティブ化中は、データベースなどサイズの大きいメモリ内オブジェクトの読み込みを遅らせます。 実行負荷の高いタスクがある場合は、カスタムのスプラッシュ スクリーンまたはシンプルなランディング ページを用意して、アプリがこのようなタスクをバックグラウンドで実行できるようにします。 Windows 8 はさまざまなデバイスで実行されるので、ユーザーの解像度に合ったメディア コンテンツを使用します。 読み込んだコンテンツがユーザーの解像度に対して小さすぎると、画像の忠実度が失われます。 読み込んだコンテンツがユーザーの解像度に対して大きすぎると、システムのリソースに不要な負荷がかかります。 アプリの応答性を重視します。 同期 API によって UI スレッドをブロックしないようにします。非同期 API を使うか、(別のスレッドからなど) ブロックをしないコンテキストで同期 API を呼び出します。 時間のかかる計算は、UI スレッドではないスレッドに移動します。遅延は 100 ミリ秒を超えると、ユーザーに認識される可能性が高いので、この点は重要です。 時間のかかる作業は小さく分けて、合間に UI スレッドがユーザー入力をリッスンできるようにします。 Web…


Metro スタイル アプリのパフォーマンスを改善する方法

動作の遅いアプリや、応答性の悪いアプリを好む人はいません。ユーザーは、タッチ、タップ、クリック、ジェスチャ、キーの押下に即座に反応するアプリを求めています。アニメーションがスムーズに動き、音楽やビデオの再生、一時停止、再開を軽快に行うことができ、ユーザーの操作にアプリが追いつくのを待つ必要もない、そんな動作をユーザーは期待しています。この記事は、あなたのアプリを “高速で滑らか” にする方法を紹介するシリーズの第 1 回です。 エンジニアリング チームでは、Metro スタイル アプリのパフォーマンス確保の方法について、長期間にわたり検討されました。その過程で私たちは、高速で滑らかなパフォーマンスを実現するためにプラットフォームで何ができるかを見いだし、優れたエクスペリエンスを提供するアプリの構築において何が有効で何が有効でないかも理解しました。このブログでは、ユーザーにとって最良のエクスペリエンスを皆さんが構築するために役立つと思われる私たち自身が経験した苦いレッスンの一部をお伝えします。 パフォーマンスの心理学 パフォーマンスは、単にストップウォッチによる時間計測と効率的なアルゴリズムだけで決まるものではありません。パフォーマンスについて考えるとき、私は全体的な視点に立って、ユーザーがアプリの使用中にどのように時間が経過するかという点を考慮するようにしています。高速で滑らかとは、アプリにとって何を意味するのでしょうか。1 つの考え方として、ユーザーのエクスペリエンスを、知覚、許容、および応答性という 3 つのカテゴリに分類することができます。 知覚: いつになっても終わらない 知覚は、”高速で滑らか” のうちの “高速” の認識にかかわります。パフォーマンスに対するユーザーの知覚は、アプリ内でなんらかの作業を実行するためにかかった時間の長さが、ユーザーにとってどの程度好意的に感じられたかという点で定義されます。ユーザーの認識が現実と一致するのが理想的ですが、実際には、ユーザーに認識される時間の方が現実よりも重要である場合が多いのです。インストールが自動的に進んで終了することを期待して席を離れたのに、戻ってきたら途中で停止していて、あなたの応答を待つメッセージが表示されていた経験はありませんか。 1 つの処理について思い出されるステップが多いほど、速度は遅く感じられるものです。 するべきこと: 作業完了までにユーザーが実行する必要のある各アクティビティの間隔を短くする。 ユーザーに質問する必要がある場合は必ず、すべての質問を前もってたずねるようにし、また他に質問がないことを明確にする。 してはいけないこと: ユーザー アクティビティの間になんらかの処理時間が発生し、アクティビティが複数の期間に分断される。 許容: 楽しい時間は早く過ぎる 許容は、”高速で滑らか” のうちの “高速” と “滑らか” の両方にかかわります。知覚が経過時間に対するユーザーの記憶を測るものだとしたら、許容とは、その時間の経過がどの程度好意的に受け入れられるかを測る尺度と言えます。 操作の完了までにかかる時間がわからなければ、待ち時間は苦痛になるものです。たとえば、写真を編集するアプリを使っているとしましょう。フィルターを適用するコマンドをクリックしたら、アプリが応答しなくなりました。フリーズしたままで時間が過ぎていくと、たとえそれがほんの数秒だったとしても、すぐに我慢の限界に達してしまいます。 フォト アプリでは、フィルターを適用中であることを示す進捗状況バーや小さいアニメーションを追加して、この問題を解消しています。不明瞭なまま放置されるわけではないので、操作の完了までの待ち時間が長くなってもユーザーは許容してくれます。アプリは高速かつ滑らかに感じられるため、大きな違いになります。 するべきこと: アプリの中で、読み込みに長い時間 (1 秒以上) がかかる部分を特定する。 特定されたシナリオにおいて、ユーザーにとって先が見えない状況を取り除くか少なくする。 処理の進行状況と、完了までの予想時間をユーザーが視覚的に確認できるようにする。 UI スレッドがブロックされ、アプリがフリーズしたように見えるのを防ぐために、非同期 API を使用する。 してはいけないこと: ユーザーにフィードバックを提供せずに長時間処理を実行し続ける。 応答性: 反射 <…


アプリで Windows 8 のコントラクトのアクティベーションを行う

Metro スタイル アプリの開発を始めるとすぐに行き当たるのがコントラクトです。コントラクトは Windows 8 で導入された強力な新しいコンセプトで、Metro スタイル アプリはこれを利用して、他のアプリや Windows との間の対話的操作のサポートを宣言することができます。検索コントラクト、共有コントラクトなど、いくつかはおそらく既に耳にされていることと思います。コントラクトを活用することで、アプリはシステムや他のアプリとの連携能力が増し、インストールされているコントラクト対応アプリの数が増えるほど、機能が向上していきます。この記事では、アクティベーションの流れをご紹介します。アクティベーションは、アプリにコントラクトを追加する際に考慮する必要のある中心的な概念の 1 つです。 Metro スタイル アプリの起動を行い、ユーザーがアプリを起動した理由をそのアプリに通知するのに使用されるのが、Windows アクティベーション プラットフォームです。アプリ起動の理由はさまざまで、ユーザーがスタート画面でアプリのタイルを使って起動した場合もあれば、たとえばユーザーが検索を行った際の結果表示など、具体的なタスクのために起動される場合もあります。Windows はアプリに、起動された理由と、必要な場合はタスクを完了するための追加情報を提供します。Windows 8 アクティベーション プラットフォーム以前、こういった情報をアプリに受け渡すために使用されていたのは、コマンド ライン パラメーターでした。新しいモデルでは、StorageFile、ShareOperation などのライブ オブジェクトを受け渡して、アプリにコンテキスト情報を与えることもできます。これはコントラクトの有用性がさらに際立つ要素の 1 つと言えるでしょう。それでは、コントラクトによる起動をサポートするために必要な知識を、詳しく見ていきましょう。 コントラクト: 目的に応じた、コンテキストを伴う Metro スタイル アプリの起動 Windows 8 Consumer Preview のデモ (英語) でご覧いただけるとおり、Windows 8 のコントラクトは、他の Metro スタイル アプリやシステム UI とアプリをつなぐ糊のような役割を果たします。たとえば、File Open Picker (ファイル オープン ピッカー) コントラクトを使用すると、ユーザーはアプリ内から別のアプリのファイルをインポートすることができます。検索コントラクトでは、システム内のどこからでもアプリを検索することができ、クエリを複数のアプリ間で迅速に受け渡すことができます。いずれの場合も、そして他の多くのコントラクト使用シナリオでも、ユーザーが目的のタスクをすばやく効率的に完了できるよう、Windows がアプリの UI の特定の部分を直接指定して起動できるようになっている必要があります。そこで活躍するのが、アクティベーション…