高速で滑らかな起動エクスペリエンスを作り上げる

Windows 8 アプリ開発者ブログ

Windows 8 エンジニアリング チームが語る Windows 8 向け Metro スタイル アプリの開発

高速で滑らかな起動エクスペリエンスを作り上げる

  • Comments 0

アプリの起動は、高速で滑らかな Windows 8 のエクスペリエンスの主要な部分であるため、アプリの起動 UX を重視することは重要です。起動フローが高度に洗練されていれば、アプリに対する最初の評価が確実に向上します。この記事では、デザインが優れた反応性が高いアプリ起動エクスペリエンスを作り上げる方法についてお話しし、ユーザーの印象を良くするためにアプリの起動が重要な時間である理由を説明します。アプリに適用できる 4 つのアプリ起動デザイン パターンを紹介し、Metro スタイル アプリを構築し続けるにあたって念頭に置くべき重要な点をいくつか指摘します。

アプリの起動の概要

アプリに対する "常に動作している" 感覚を重視したアプリ ライフサイクルの管理」を既にお読みになった場合は、アプリ ライフサイクルの状態についてよくご存じと思います。この記事では、アプリの起動、つまり "実行されていない" 状態から "実行されている" 状態への遷移を対象とします。

アプリの起動が、Metro スタイル アプリのライフサイクル全体にどのように収まるかの概要を示す図: アプリの起動は "実行されていない" 状態から "実行されている" 状態への遷移である。
  ライフサイクルの状態: アプリの起動は "実行されていない" 状態から "実行されている" 状態への遷移である

アプリの起動は目立つため、この遷移をよく計画することは重要です。遷移は、目立つだけでなく、ユーザーが繰り返し経験する処理でもあります。実装するコントラクト (「アプリで Windows 8 のコントラクトのアクティベーションを行う」をご覧ください) が多ければ多いほど、ユーザーがアプリを起動すべき理由が多くなります。第一印象が良くなるか悪くなるかは、この遷移をどのように設計するかによって決まります。さらに、最終的にはユーザーがアプリを日常的に使うかどうかが決まります。

アプリの起動を処理する方法をいくつかお勧めする前に、この遷移中に生じる処理の順序を確認しておくと役立ちます。

ユーザーがアプリのタイルをクリックすると、アプリが起動し、スプラッシュ スクリーンが表示される。起動アニメーションが完了するとき、アプリのウィンドウが表示されるまでスプラッシュ スクリーンがフル スクリーンとなる。その時点で、スプラッシュ スクリーンがアプリの最初のビューにフェードアウトする。  アプリの起動中に生じる処理の順序

ユーザーがアプリを起動すると、すぐにスプラッシュ スクリーンが表示されます。どの Metro スタイル アプリにもスプラッシュ スクリーンがあります。スプラッシュ スクリーンは、620x300 の画像で構成され、背景が塗りつぶされています (スプラッシュ スクリーンをカスタマイズする方法については、「クイック スタート: スプラッシュ スクリーンを追加する」(英語) をご覧ください)。アプリが起動されると、皆さんの代わりにユーザーを歓迎するスプラッシュ スクリーンが Windows により表示されます。すべてのアプリは、起動時に activated (英語) イベントを受け取り、初期 UI の表示に必要な初期化処理を実行できるようになります。これには、基本設定の読み込み、移動先ページの決定、各種コントラクトのいずれかに対してアプリを起動するかどうかの決定が含まれることがあります。初期化が完了して、スプラッシュ スクリーンを消す準備ができたら、アプリは最初のウィンドウを表示する必要があります。JavaScript アプリの場合、起動コールバックが返されるとこの処理は自動的に行われるため、作業は必要ありません。一方、C# アプリの場合、Window.Current.Activate (英語) を呼び出すことでこれを明示的に行う必要があります。一定の時間内 (15 秒以内) にウィンドウが表示されない場合はアプリが終了するため、この処理が遅延しないように注意してください。加えて、スプラッシュ スクリーンの表示時間が必要以上に長いとユーザー エクスペリエンスがそのまま低下するため、ウィンドウができるだけ早く表示されるようにしてください。ウィンドウが 2 ~ 3 秒以内に表示されるようにして、ローエンドなハードウェアでもアプリが常に期待どおりに起動するようにすることをお勧めします。

アプリのウィンドウが表示されてスプラッシュ スクリーンが消えると、アプリが制御権を握ります。ユーザーをアプリのコンテンツに導く方法は皆さんが決めてください。アプリによっては、別の遷移が適している場合があります。以下のいくつかのセクションでは、アプリのニーズに応じて適用できる 4 つのアプリ起動デザイン パターンを紹介します。

  • 既定のアプリ起動

追加の読み込みが必要なく、すぐに使えるアプリに適しています。

例: さまざまな用語を調べたり、翻訳することができる辞書アプリ。ランディング ページは、ユーザーが入力するテキスト ボックスのみで構成されます。

  • スケルトン アプリ起動

起動時にランディング ページの内容が徐々に埋まるアプリに適しています。

例: ユーザーの書籍、雑誌、新聞を管理する閲覧アプリ。起動すると、ユーザーのライブラリの内容が徐々に埋まります。

  • 延長アプリ起動

UI の表示前に長時間の読み込み処理を実行するアプリに適しています。これには、ネットワーク呼び出しや大量のファイル I/O などが含まれることがあります。

例: 最新のスコアと見どころが表示されるスポーツ アプリ。このアプリでは、REST API を使ってネットワーク経由でこの情報が取得され、ランディング ページにデータが表示されます。

  • 遅延アプリ起動

アプリ設定をクエリして初回実行をチェックするなど、起動時に基本的な非同期タスクを完了する必要があるアプリに適しています。

例: ユーザーが既にアカウントを作成しているかどうかを確認する必要があるゲーム。この情報は、ユーザーに表示するページを決定するのに必要です。

既定のアプリ起動

多くのアプリには、既定のアプリ起動フローが適しています。このフローでは、Windows が各アプリのスプラッシュ スクリーンの表示と削除を処理します。スプラッシュ スクリーンは、起動が完了してウィンドウが表示されるまで表示され、アプリのランディング ページまでアニメーション表示がクロスフェードします。ランディング ページが静的で、追加の読み込み処理が必要ない場合は、既定の起動を使ってください。コンテンツの準備がすぐにできる場合、意図的に遅延させる必要はありません。むしろ遅延させないほうがよいのです。

以下に示すのは、Consumer Preview で Internet Explorer 10 を使った既定の起動フローの例です。アプリが起動されると、すぐにスプラッシュ スクリーンがユーザーに表示されます。スプラッシュ スクリーンは、アプリが起動されるまで画面に表示され続けます。その時点で、スプラッシュ スクリーンはランディング ページまでフェードアウトします。このケースでは、ユーザーが最後にアクセスしたページがランディング ページに表示され、すぐに使えるようになります。前回のセ���ションで保存されたためです。

下の画像に表示された過程は以下のとおりです。

  1. アプリのタイルがクリックされる。
  2. スプラッシュ スクリーンが表示される。
  3. アプリのランディング ページが表示される。

タイルがクリックされると、スプラッシュ スクリーンが表示される。そのとき、アプリの最初のビューの準備ができると、スプラッシュ スクリーンがアプリのランディング ページまでフェードアウトする。 
既定のアプリ起動フロー。

既定の起動フローを実装する場合、追加の作業は必要ありません。アプリのマニフェストで 620x300 のスプラッシュ スクリーン画像 (英語) を指定し、静的なコンテンツを使ってランディング ページを設計するだけです。起動が完了すると、スプラッシュ スクリーンがランディング ページにフェードアウトし、アプリを使う準備ができます。

スケルトン アプリ起動

大部分のアプリには、既定の起動が最適です。スプラッシュ スクリーンが消えると、アプリが実行されて操作できるようになります。しかし、アプリによっては、この時点で完全に準備ができていないことがあります。それらのアプリは、起動後にコンテンツを動的に読み込む必要があります。このクラスのアプリの場合、ユーザーにとって意味のある情報を読み込みながら、できるだけ早くアプリを使えるようにするには、スケルトン アプリ起動パターンが適しています。このパターンでは、スプラッシュ スクリーンが消えて、コンテンツを取得している間スケルトン ランディング ページ (見た目にはコンテンツがないランディング ページ) が表示されます。ページに進捗状況バーを追加すると、アプリがまだ読み込み中であることを示すことができます。以下の画像は、Consumer Preview でミュージック アプリを使ったスケルトン起動フローの例を示しています。ここでは、最新の音楽コンテンツの取得中にスケルトン ランディング ページが表示されます。

下の画像に表示された過程は以下のとおりです。

  1. アプリのタイルがクリックされる。
  2. スプラッシュ スクリーンが表示される。
  3. スケルトン ランディング ページが表示される。ビューの一番上に進捗状況バーが表示されている点に注目してください。
  4. アプリのランディング ページが表示される。

タイルがクリックされると、スプラッシュ スクリーンが表示される。次に、スケルトン ランディング ページが最初のビューとして表示される。スケルトン ランディング ページは、コンテンツのないランディング ページである。スプラッシュ スクリーンがスケルトン ランディング ページまでフェードアウトすると、アプリは少しずつページへの読み込みを始める。  スケルトン アプリ起動フロー

スケルトン起動フローを実装するには、アプリのランディング ページの静的なスケルトン ビューを作成し、起動ページとして表示します。次に、起動中に、ページへのコンテンツの読み込みに必要な読み込みタスクの実行を開始します。ほとんどの処理は非同期のため、これらのタスクがまだ実行されている間にスプラッシュ スクリーンが分解されることがあります。この結果、ユーザーにはランディング ページが徐々に埋まるように見えます。

スプラッシュ スクリーンがいつ消えるかを知りたい場合は、スプラッシュ スクリーン API (英語) を使うことができます。API には、スプラッシュ スクリーンからアプリ起動ページへの遷移がいつ発生したかを示す SplashScreen.Dismissed(英語) イベントが含まれます。これは、スケルトン ランディング ページがビューにいつ表示されるかを知りたい場合に役立ちます。

JavaScript

以下の例からわかるように、アプリは activated コールバック (英語) の内部でランディング ページへの読み込み処理の実行を開始できます。オプションとして、スプラッシュ スクリーンがいつ消えるかを調べるには、activated イベント引数 (英語) を使ってスプラッシュ スクリーン (英語) オブジェクトを取得します。このオブジェクトを使って、スプラッシュ スクリーンが消えたことを通知する dismissed イベントを登録します。

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);
...
}
};

function performSetupTasks() {
// Begin additional loading tasks here…
...
}

function onSplashScreenDismissed() {
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

C#

C# でも実装に違いはありません。起動中に、ランディング ページへの読み込みに必要な処理を開始します。次に、オプションとして activated イベント引数からスプラッシュ スクリーン オブジェクトを取得し、スプラッシュ スクリーンが消えたことが通知されるように登録を行います。

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...
}

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

延長アプリ起動

起動後に追加の読み込みタスクを実行するアプリの場合、スケルトン アプリ起動オプションが適しています。とは言っても、欠点が 1 つあります。"スケルトン" ページがすぐにユーザーに表示されるため、全体的な読み込みフローがばらばらに感じることがあります。スプラッシュ スクリーンからスケルトン ランディング ページへの遷移は、2 つの独立した読み込み処理が行われている印象をユーザーに与えます。これが望ましくない場合、代わりに延長アプリ起動パターンを使うことをお勧めします。

このフローでは、シームレスな 1 つの読み込みエクスペリエンスを生成するため、延長スプラッシュ スクリーンの概念が使われます。通常のスプラッシュ スクリーンが消えると、ランディング ページの代わりに延長スプラッシュ スクリーンがアプリにより表示されます。延長スプラッシュ スクリーンは完全にアプリにより所有されており、スプラッシュ スクリーン API を使って形式が設定されています。この API により位置情報が提供され、延長スプラッシュ スクリーンの外観がスプラッシュ スクリーンとまったく同じになります (進捗状況リングが表示される点や詳細が読み込まれる点を除く)。この結果、見た目には別々の読み込み処理がまとめられます。延長スプラッシュ スクリーンが表示されている間、アプリはランディング ページへの読み込みに必要なタスクの実行を継続できます。次に、読み込みが完了したら、延長スプラッシュ スクリーンからランディング ページに遷移できます。

延長起動フローは、初期化にかなり時間がかかる可能性がある場合 (ネットワーク接続が予測できないなど) に特に適しています。起動中に何らかの "重労働" を行う必要がある場合、延長スプラッシュ スクリーンが最適です。さらに、ランディング ページに遷移する前にランディング ページが完全に更新されるようにする場合 (キャッシュされたデータを表示しないことを選択した場合) にも最適です。

以下の例は、Windows 8 Consumer Preview で天気予報アプリを使った延長起動フローを示しています。天気予報アプリは、延長起動パターンを実装するアプリの良い例です。最新の天気データ (ユーザーがキャッシュした天気データを表示してもあまり意味がありません) をネットワークから要求している間に延長スプラッシュ スクリーンを表示できるためです。

下の画像に表示された過程は以下のとおりです。

  1. アプリのタイルがクリックされる。
  2. スプラッシュ スクリーンが表示される。
  3. 延長スプラッシュ スクリーンが表示される (進捗状況リングも表示)。
  4. アプリのランディング ページが表示される。

タイルがクリックされると、スプラッシュ スクリーンが表示される。次に、延長スプラッシュ スクリーンが最初のビューとして表示される。延長スプラッシュ スクリーンはスプラッシュ スクリーンと見た目が完全に同じだが、アプリにより所有されている。このようにして、アプリは読み込み処理を開始し、準備ができたら実際のランディング ページに遷移できる。 
延長アプリ起動フロー

延長起動フローを実装するには、スプラッシュ スクリーン API (英語) を使う必要があります。SplashScreen.ImageLocation (英語) を使うと、アプリはスプラッシュ スクリーン画像の画像座標を取得できます。これは、ユーザーが滑らかな遷移と感じるためには、延長スプラッシュ スクリーンとまったく同じ位置に画像を配置する必要があるために重要です。前のセクションで述べたとおり、API により SplashScreen.Dismissed (英語) イベントが発生し、通常のスプラッシュ スクリーンから延長スプラッシュ スクリーンに遷移したことが通知されます。

前に説明したのと同じように、起動中に追加のタスクをトリガーできます。以下では、JavaScript と C# の両方で延長スプラッシュ スクリーン (オプションの進捗状況リングと共に) を実装する方法について手順を追って説明します。

: 延長スプラッシュ スクリーンを実装するときは、スナップ、スナップ解除、回転などを処理することも重要です。簡潔にするため、この記事ではこの方法の詳細な説明を省略しています。詳細については、スプラッシュ スクリーンのサンプル (英語) をご覧ください。

JavaScript

まず、延長スプラッシュ スクリーンの HTML マークアップ (進捗状況リング (英語) と共に) を起動ページに追加します。

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
<img id="extendedSplashImage" src="/images/splash.png" style="position: absolute;" />
<progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
</div>
 

次に、延長スプラッシュ スクリーンの CSS スタイルを追加します。

.extendedSplashScreen {
position: absolute;
text-align: center;
background-color: #000000;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.extendedSplashScreen.hidden {
display: none;
}

もう一度、起動中に追加タスクを開始し、activated イベント引数を使ってスプラッシュ スクリーン オブジェクトを取得します。今回は、スプラッシュ スクリーン オブジェクトを使って、dismissed イベントの登録と延長スプラッシュ スクリーンの設定の両方が行われます。スプラッシュ スクリーン オブジェクトに、スプラッシュ スクリーン画像の位置をクエリし、それに応じてレイアウトを決めます。

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the regular splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);

// Display the extended splash screen.
displayExtendedSplash(splash);

WinJS.UI.processAll();
}
};

function displayExtendedSplash(splash) {
// Position the extended splash screen image in the same location as the system splash screen image.
var extendedSplashImage = document.getElementById("extendedSplashImage");
extendedSplashImage.style.top = splash.imageLocation.y + "px";
extendedSplashImage.style.left = splash.imageLocation.x + "px";
extendedSplashImage.style.height = splash.imageLocation.height + "px";
extendedSplashImage.style.width = splash.imageLocation.width + "px";

// Position the extended splash screen's progress ring.
var extendedSplashProgress = document.getElementById("extendedSplashProgress");
extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";

// After the extended splash screen is set up,
// apply the CSS style that will make the extended splash screen visible.
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

延長スプラッシュ スクリーンが表示されている間に実行する必要がある読み込みタスクを指定します。読み込みが完了したら、延長スプラッシュ スクリーンを分解します。エラーが発生した場合も柔軟に処理してください。読み込みタスクがタイムアウトしたか失敗した場合、何が起きたかを説明するページを表示します。

function performSetupTasks() {
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
removeExtendedSplash();
}

function onSplashScreenDismissed() {
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

function removeExtendedSplash() {
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
}

C#

JavaScript と同様、進捗状況リング (英語) が表示される延長スプラッシュ スクリーンのマークアップを追加する必要があります。今回は XAML を使います。

<!-- This snippet represents the ExtendedSplash class -->
<Canvas Grid.Row="0">
<Image x:Name="extendedSplashImage" Source="images/splash.png" />
<ProgressRing x:Name="ProgressRing" Foreground="White"
HorizontalAlignment="Center" IsActive="True"
MaxHeight="30" MinHeight="30" MaxWidth="30"
MinWidth="30"></ProgressRing>
</Canvas>

ここでも、起動中の読み込みタスクから始めます。次に、activated イベント引数からスプラッシュ スクリーン オブジェクトを取得し、延長スプラッシュ スクリーンを表示します。

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

ExtendedSplash eSplash = new ExtendedSplash(splashScreen);

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...

Window.Current.Content = eSplash;
Window.Current.Activate();
}

public ExtendedSplash(SplashScreen splash)
{
InitializeComponent();

// Position the extended splash screen image in the same location as the splash screen image.
this.extendedSplashImage.SetValue(Canvas.LeftProperty, splash.ImageLocation.X);
this.extendedSplashImage.SetValue(Canvas.TopProperty, splash.ImageLocation.Y);
this.extendedSplashImage.Height = splash.ImageLocation.Height;
this.extendedSplashImage.Width = splash.ImageLocation.Width;

// Position the extended splash screen's progress ring.
this.ProgressRing.SetValue(Canvas.TopProperty, splash.ImageLocation.Y + splash.ImageLocation.Height + 32);
this.ProgressRing.SetValue(Canvas.LeftProperty,
splash.ImageLocation.X +
(splash.ImageLocation.Width / 2) - 15);
}

延長スプラッシュ スクリーンが画面に表示されている間、必要な読み込みタスクを実行し、その後ランディング ページに移動します。

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
RemoveExtendedSplash();
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

void RemoveExtendedSplash()
{
Window.Current.Content = new LandingPage();
}

遅延アプリ起動

最後の起動パターンとして、遅延アプリ起動について説明します。遅延起動は、スプラッシュ スクリーンからの遷移が行われる前にランディング ページを準備できるという点では延長起動と似ています。ただし、"延長" スプラッシュ スクリーンを表示する代わりに、アプリは非同期タスクが実行されるまで通常のスプラッシュ スクリーンが消えるのを遅らせます。アプリがこの遅延を完了するまでの時間は限られているため、遅延パターンは慎重に使ってください。主に、アプリが表示される前にアプリ設定の読み込みなどの簡単な非同期処理を実行する目的で使います。さらに、この時間内にエラーや例外を適切に処理できなかった場合、起動が終了する可能性があります。したがって、アプリがネットワーク呼び出しを行ったり、大量のデータを処理する必要がある場合は、代わりにスケルトンまたは延長アプリ起動パターンを使ってください。

以下に示すのは、Consumer Preview でフォト アプリを使った遅延起動の例です。デスクトップから .jpg ファイルを開くと、このファイルの種類の既定のハンドラーとしてフォト アプリが起動されます。フォト アプリは、遅延を使って、スプラッシュ スクリーンが消える前に縮小版画像を読み込みます。縮小版の取得処理は比較的すぐに完了するため、遅延の使用に適しています。次に、アプリがユーザーに表示された後、高解像度画像を非同期的に取得して縮小版と置き換えることができます。このフローにより、アプリがユーザーに表示されるとき、既に縮小版が画面に表示されるようになります。

下の画像に表示された過程は以下のとおりです。

  1. .jpg 画像がクリックされる (フォト アプリが既定の .jpg ハンドラー)。
  2. スプラッシュ スクリーンが表示される。
  3. 縮小版の取得中、起動が遅延される。
  4. 縮小版がビューに表示された状態でアプリが表示される。

デスクトップで .jpg ファイルがクリックされると、.jpg ファイル ハンドラーのスプラッシュ スクリーンが表示される。次に、アプリが .jpg ファイルを処理するまでスプラッシュ スクリーンが画面に表示され続けるように、アプリは起動を遅らせる。.jpg ファイルが処理されると、アプリは遅延を完了し、.jpg の縮小版がビューに表示された状態で最初のビューが表示される。 
遅延アプリ起動フロー

JavaScript で遅延起動フローを実装するには、起動遅延を使う必要があります。遅延を使うことで、アプリは非同期処理が完了するまで起動の完了を遅らせることができます。遅延を使わない場合、コールバックが返されると起動が完了します。ほとんどの Windows ランタイム API は非同期のため、これはアプリの初期 UI が表示される前に処理を確実に完了する必要があるアプリに役立ちます。C# の場合、アプリは Window.Current.Activate (英語) の呼び出しを遅らせることで遅延を実装できます。以下の例では、両方のアプローチを実際に試してみます。

JavaScript

JavaScript で起動遅延を実装する方法は、アプリが起動を処理する方法に応じて 2 つあります。

アプリが WinJS を使って起動を処理する場合 (VS プロジェクト テンプレートでは既定)、以下のコードを使います。activation イベントの引数で setPromise を呼び出すと、両方の非同期呼び出し (WinJS.UI.processAll と asyncOperation) が完了するまで起動の完了が遅延します。

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventArgs.setPromise(WinJS.UI.processAll().then(function() {
return asyncOperation().done(function () { });
}));
}
};

activated イベント (英語) の処理を手動で登録した場合、ActivatedOperation.getDeferral (英語) メソッドを使うことができます。以下の例では、起動中に遅延オブジェクト (英語) が取得され、すべての非同期処理が完了した後 complete (英語) が呼び出されます。

注: complete は、非同期呼び出しが成功したかどうかに関係なく呼び出す必要があります。complete を呼び出さない場合、アプリは起動から戻らず、アプリの起動がタイムアウトします。これは、このパターンを使うときによくある落とし穴です。アプリがすべてのエラー発生を処理することは非常に重要です。

Windows.UI.WebUI.WebUIApplication.addEventListener("activated", onActivated, false);
function onActivated(eventArgs) {
if (eventArgs.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
var deferral = eventArgs.activatedOperation.getDeferral();
asyncOperation().done(function () {
deferral.complete();
}, function (error) {
deferral.complete();
});
}
}

C#

C# で遅延を実装するには、読み込み処理が完了するまで Window.Current.Activate (英語) 呼び出しを延期するだけです。JavaScript と同様、この呼び出しは簡単な処理を完了するために少しだけ遅らせる必要がある点に注意してください。アプリが一定の時間内にウィンドウを正常に起動しない場合、起動がタイムアウトします。さらに、遅延が長いとアプリのパフォーマンスが低く見えるため、ユーザーにとって印象が悪くなります。

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
// Create a frame to act navigation context and navigate to the first page.
var rootFrame = new Frame();
rootFrame.Navigate(typeof(BlankPage));

// Place the frame in the current Window and ensure that it is active.
Window.Current.Content = rootFrame;

// Use “await” to execute an async operation prior to activating a window.
// Remember, avoid lengthy operations here.
await asyncOperation();

Window.Current.Activate();
}

まとめ

この記事では、エレガントな起動エクスペリエンスを生み出すためのいくつかのテクニックについて説明しました。アプリの見た目を差別化するため、どの Metro スタイル アプリにも適用できる 4 つのデザイン パターンについて具体的に考えました。アプリを構築し続けるにあたって、アプリの起動を重視し、この記事で説明したパターンを使うようにしてください。やはり、起動はユーザーに良い印象を与える最初のチャンスなのです。

起動、スプラッシュ スクリーン、またはアプリ ライフサイクルの詳細については、以下のリソースをご覧ください。

リンク

タイプ

ハイライト

スプラッシュ スクリーンを追加する (英語)

ドキュメント

スプラッシュ スクリーンと延長スプラッシュ スクリーンの両方について説明する大きなセクションです。このセクションには、役に立つデザイン ガイドラインも含まれています。

スプラッシュ スクリーンのサンプル (英語)

サンプル

JavaScript、C#、C++、VB.NET での延長アプリ起動パターンを実際に使う SDK サンプルです。

SplashScreen クラス (英語)

API リファレンス

スプラッシュ スクリーン クラスに関する API ドキュメントです。

アプリを起動する方法 – VB/C#/C++/XAML (英語)

クイック スタート

C#、C++、または VB.NET での Metro スタイル アプリの起動のチュートリアルです。

アプリを起動する方法 – JavaScript および HTML (英語)

クイック スタート

JavaScript での Metro スタイル アプリの起動のチュートリアルです。

アプリの起動と中断のサンプル (英語)

サンプル

JavaScript での Metro スタイル アプリの起動と中断を実際に行う SDK サンプルです。

Windows.ApplicationModel.Activation 名前空間 (英語)

API リファレンス

activation 名前空間に関する API ドキュメントです。

WebUIApplication.activated イベント

API リファレンス

activated イベントに関する API ドキュメントです。

アプリケーションのライフサイクル (英語)

記事

Metro スタイル アプリのライフサイクルについて説明する記事です。

--Windows ユーザー エクスペリエンス担当プログラム マネージャ���、Justin Cooperman

  • Loading...
Leave a Comment
  • Please add 1 and 6 and type the answer here:
  • Post