ナビゲーション、向き、ジェスチャ (Windows Phone ストア アプリ)

Windows Phone アプリは、ユーザーがリンクを使ってさまざまなコンテンツのビュー間を移動し、ハードウェアの戻るボタンを使って戻ることができるモデルを基盤にしています。このモデルの目的は、Windows Phone のページ ナビゲーション モデルに自然になじむビュー ベースのアプリの作成を簡単にすることです。

ページとフレーム

ページ ナビゲーション モデルは、ハブとスポークのシステムです。つまり、アプリ内の他のページへのリンクを明示的に追加しない限り、ユーザーは前に見たページを表示するには戻るボタンを使う必要があるということです。これは、Web ブラウザーで Web ページの履歴を表示して移動するしくみに似ています。

システムでは、ユーザーがアクセスしたページを追跡し、各ページをバック スタックと呼ばれる場所に配置します。そのため、ユーザーが戻るボタンを押すと、バック スタックに最後に保存されたページが表示されます。バック スタックに配置できるページ数に制限はありません。

たとえば、ユーザーがページ 1 (p1)、ページ 2 (p2)、p1、p2、ページ 3 (p3)、p1 の順に移動すると、p1、p2、p1、p2、p3、p1 というバック スタックが作られます。ユーザーがバック スタックにある 2 つ目の p2 インスタンスのコンテンツに変更を加えた後で戻るボタンを使ってバック スタックにある 1 つ目の p2 インスタンスに戻った場合、ページのデータが更新されていない限り、先ほどの変更は表示されません。表示されるのは、ナビゲーションにおけるその時点でユーザーに表示された状態のページのスナップショットです。

重要な注意: ユーザーのアプリ ナビゲーションに影響を与える可能性のあるページ間リンクやボタンを実装するかどうか、入力時にページを更新するかどうかは慎重に検討してください。

次に、Windows Phone のアプリ ページ モデルのコンテキストにおける定義を示します。

• ページ: ユーザーが認識できる永続的な状態のコレクション。情報、記録可能なコンテンツ、または他のページへのリンクを含むページとして表示できます。
• 画面: ポップアップ ウィンドウ、ダイアログ ボックス、スプラッシュ画面など、記録可能なコンテンツを含まない一般的な UI 画面。ユーザーが認識できる永続的な状態のコレクションではありません。

次の図に、複数のページや画面で構成される架空のアプリ構造を示します。

サンプルのアプリ構造

ページについて

アプリは以下のページで構成されます。

• ホーム ページ
• ウィジェット ページ
• ウィジェットの詳細ページ (ピボットを含む)
• ガジェットの詳細ページ
• 検索ページ
• 設定ページ

スプラッシュ画面やログイン画面はページではありません。ページは、ユーザーが認識できる永続的な状態のコレクションと定義されますが、スプラッシュ画面はアプリが起動する前に表示される単なるプレースホルダーであるためです。スプラッシュ画面について詳しくは、「基本的なグラフィックス、視覚的なインジケーター、通知 (Windows Phone ストア アプリ)」をご覧ください。

また、ログイン画面では、資格情報の入力を求めるだけのため、状態データは含まれません (最後に入力したユーザー名を記憶する場合は例外です)。

重要な注意: Windows Phone のすべてのビューにページが必要なわけではありません。

UI をページにするかどうかを決定するときには、次のような点を検討してください。

• ユーザーが明示的にそのページを閲覧したいか。
• ユーザーはそのページを表示したことを覚えていてまたそこに戻りたいと思うか。

ページは、アプリ内で独立したコンテンツのセクションを保持し、個別の画面としてユーザーに表示されます。アプリ内でコンテンツを表示するさまざまなページを必要なだけ作成して UI を構成し、必要に応じてフレームやページからそれらのページへのナビゲーションを提供できます。1 ページしか必要としない単純なアプリもあれば、多数のページを必要とする複雑なアプリもあります。

全画面ビュー

全画面ビューの実装で、ステータス バーや下部のアプリ バーをオプションで表示することもできます。ただし、全画面ビューではこれらのバーは既定では表示されないため、可視性のプロパティを使って明示的に定義する必要があります。全画面ビューで一番望ましいのは、ユーザーがコンテンツ エクスペリエンスに集中できるようどちらのバーも表示しないことです。ステータス バーまたはアプリ バー (またはその両方) が表示されていない全画面モードでも、通知や電話の着信は表示されます。ステータス バーとアプリ バーについて詳しくは、「基本的なグラフィックス、視覚的なインジケーター、通知 (Windows Phone ストア アプリ)」をご覧ください。

注  全画面ビューの設定を使うと、ユーザーが時計にアクセスできなくなります。コンテンツで必要な場合を除き、全画面ビューを使わないことをお勧めします。

ページ間のナビゲーション

Windows Phone でのナビゲーションは、ページ間の遷移として定義できます。

ただし、スプラッシュ画面からホーム ページへの移動など、本当の意味でナビゲーションと見なされない遷移もあります。ページとは見なされない場所からの移動は遷移と呼ばれます。

次のセクションでは、効果的なページ モデル使用のベスト プラクティスを紹介します。

画面と非ナビゲーション遷移

ログイン画面などの一時的な UI には、完全なナビゲーションを必要とする個別の画面を実装するのでなく、ポップアップ コントロールを使って、画面の一部分だけを含むコンテンツを表示することができます。ユーザーが戻るボタンを使ってダイアログ ボックスを閉じられるようにするには、コードに BackKeyPress イベントを追加し、ポップアップ ウィンドウの表示中に e.Cancel を true に設定します。

複数のコンテンツ ビュー

複数のコンテンツ セクションを表示するページでは、ナビゲーションを使わなくても、ページ上のコントロールを新しい DataContext に再バインドすることでコンテンツ間を移動できます。また、ページ内で複数の UserControl インスタンスを読み込むか、新しいコンテンツを表示するその他のメカニズムを使って再バインドすることもできます。ユーザーがどのようにして項目間を前後に移動するかは開発者が決定できます。たとえば、アプリ バーの [戻る] ボタンと [次へ] ボタンを使うことができます。ただし、ローカルの遷移では [戻る] ボタンを多用しないことをお勧めします。

状態の保存と廃棄

アプリが廃棄された場合にユーザーが手順をたどれるように、特定のページで発生した遷移の履歴を保存しておくことができます。前や次を閲覧する単純なシナリオの場合は、ページの状態を保存するだけです。これを Frame クラスと共に実行することで、廃棄状態から戻ったときにデータセットを走査するために必要な情報がすべて得られます。リンクされた項目間を自由に閲覧できるなど、複雑なローカルの遷移履歴が発生するアプリの場合は、履歴の一部をページの状態に保存することもできますが、保存する項目を妥当な数に限定する必要があります。重要な点は、ユーザーがハードウェアの戻るボタンを使って、前に表示した項目ではなく前のページに戻るようにすることです。

次の表に、アプリの各部分がページと見なされるかどうかを示します。

画面の種類	ページ	説明
スプラッシュ画面	x	これは起動時のエクスペリエンスの一時的な部分であり、ユーザーがこの画面に移動することはできません。
ハブ エクスペリエンス	○	Windows Phone アプリの一般的なホーム画面のアプローチ。
詳細ページ	○	このページは、クエリ文字列でパラメーター化されたデータ中心のアプリに一般的です。
ピボット項目	x	ピボット項目とは、コンテンツ内でユーザーにとって重要な部分となるピボット コントロールの小さなコンポーネントです。
ログインまたはエラー ダイアログ	x	これはアプリの状態によってトリガーされる一時的な UI であり、ユーザーがこの画面に直接移動することはありません。
項目の列挙	x	これはナビゲーション手段としてではなく、インプレース アクティビティとして類似コンテンツを閲覧するために使われます。

 

次の表に、さまざまな種類の UI 実装の処理に使用できる方法をまとめます。

UI の種類	実装	戻るボタンの動作	廃棄の動作
ページ	Page	戻るボタンは、自動的にアプリを前の状態に戻したり、終了したりします。データが失われた場合以外は、オーバーライドしないでください。	自動的にバック スタックに残ります。
画面の一時的な UI	ポップアップまたは子ウィンドウ	ポップアップ ウィンドウを取り消すには、アプリでオーバーライドする必要があります。スクリーン キーボードとメッセージ ダイアログは、戻るボタンが押されると自動的に取り消されます。	アプリでは、ナビゲーション時にポップアップ ウィンドウを閉じるか、取り消す必要があります。
項目の列挙	UserControl	該当なし: 親ページの内部でホストされます。	アプリは、必要に応じてアクティブな項目を保存する必要があります。

 

向きと軸について

Windows Phone プラットフォームのユーザーは、特にビデオ、地図、ゲームなどの要素を表示するアプリでは、縦横両方の向きがサポートされることを期待します。向きについて詳しくは、「初めての Windows Phone」の「画面の向き」をご覧ください。

また、ユーザーは、ナビゲーションが X 軸 Y 軸両方向に働き、上下だけでなく電話画面全体にスワイプすることで新しいコンテンツを発見できることを期待します。アプリで両方の向きと軸を使う方法を計画してください。

横向きで実行できるアプリを設計する際は次の点に注意してください。

• 縦モードでも使用できるようにするか、1 つの向きに固定するかを決定します。
• 横向きは横長の画面スペースを最大限に使う場合に便利です。ユーザーが電話の向きを変えたときに、より多くのコンテンツを画面に表示できるようになったことを強く印象付けるため、コントロールやレイアウトを再配置することができます。
• 横向きは、メディア コンテンツの一般的な縦横比であるため、その表示によく使われます。アプリを横モードにする主な目的がコンテンツ表示である場合は、コントロールやナビゲーションをフェード アウトさせて、表示エクスペリエンスを向上します。

タッチ ジェスチャ

タッチ ジェスチャは、ユーザーが Windows Phone の UI を操作するための主な手段です。Windows Phone のタッチ ジェスチャには、タッチ スクリーン上を 1 本または複数の指で操作するタップやスワイプがあります。

Windows Phone SDK で提供されているコントロールは、タッチ操作要素として使われます。すべてのタッチ操作要素は、常にタッチ操作に適切なサイズにする必要があります。タッチ ターゲットについて詳しくは、「Windows Phone の対話式操作と操作性」をご覧ください。

Windows Phone では、次のシングル タッチ ジェスチャとマルチタッチ ジェスチャがサポートされています。

シングル タッチ

• タップ
• ダブルタップ
• パン
• フリック
• 長押し

マルチタッチ

• ピンチとストレッチ

タップ

タップとは、画面の特定の領域にすばやく 1 回触れて離すことです。

タップ

タップ ジェスチャに関連付けられている動作は 2 つです。

• 指で押すことでタッチしたことを示す
• 指を離すことでアクションを実行する

また、動作の進行中にタップするとその動きの慣性が完全に止まります。

ダブルタップ

ダブルタップとは、特定の領域内をすばやく 2 回タップすることです。

ダブルタップ

ダブルタップすると、コントロールまたはアプリのズームの拡大/縮小の状態が切り替わります。アプリは現在のズームの状態を判断し、それに応じて拡大または縮小を行います。アプリでは拡大/縮小の状態が定義されます。

パン

パンとは、1 本の指を画面に置いて任意の方向に動かすことです。指を画面から離すとパン ジェスチャが終了します。

パン

パン ジェスチャに関連付けられている動作は 2 つです。

• コンテンツを直接操作して移動することができます。コンテンツは指の動きを追ってそのとおりに動きます。コントロールやアプリでは、サポートするパン方向を決めることができます。この動作には、水平、垂直、またはその他の方向を指定できます。コンテンツが中間的な状態に移動された場合、最も近い状態にスナップする必要があります。
• 特定の項目を移動したり並べ替えたりすることができます。項目は指の動きを追って移動し、画面から指を離すとその場所にドロップされます。

フリック

フリックとは、1 本の指で画面に触れて、任意の方向にすばやく動かしながら画面から離すことです。パン ジェスチャの後にフリックすることもできます。

フリック

フリック ジェスチャでは、スクロール可能な領域のパンやオブジェクトの移動が慣性付きで行われます。コントロールやアプリは、特定のフリック方向をサポートするように構成できます。この動作には、水平、垂直、または別の方向を指定できます。水平または垂直を指定した場合、その他の方向への動きは、垂直または水平の動きに変換されます。

通常、フリックはキャンバス全体を移動しますが、個別のオブジェクトを移動するように指定することもできます。

ピンチとストレッチ

ピンチとストレッチとは、2 本の指で画面上の特定の個別の領域に触れ、2 本の指を近づける (ピンチ) か離す (ストレッチ) ことです。

ピンチとストレッチ

ピンチとストレッチを行うと、2 本の指の中間地点を中心としてコンテンツが連続的に縮小/拡大されます。ピンチまたはストレッチがフリックで終了する場合、慣性付きで拡大/縮小が行われるようにアプリを反応させることができます。

長押し

長押しとは、1 本の指で特定の領域に一定時間触れることです。通常、長押しジェスチャは、項目のコンテキスト メニューやオプション ページを表示するために使われます。

長押し

マルチタッチ ポイント

Windows Phone では、一意のアプリ操作を実現するために、少なくとも 4 つの同時ユーザー タッチ入力ポイントをサポートしています。ゲームや楽器のアプリがその簡単な例です。

タッチの端が 3.5 mm 以上離れていてすべてのジェスチャがサポートされている場合に、画面に対する直径 7 mm 以上のタッチが一意のタッチとして認識されます。

タッチ ポイントを増やすとプロセッサの負荷も増加します。そのため、3 つ以上の同時タッチ入力ポイントを実装する場合はパフォーマンスへの影響に注意してください。Windows Phone では最大 10 個のタッチ ポイントをサポートしていますが、ハードウェア画面によっては 4 つまでしかサポートしていない場合もあります。

関連トピック

WWindows Phone アプリ内ナビゲーション

Windows Phone でページ ナビゲーションを実行する方法

クイックスタート: Windows Phone のタッチ入力

Windows Phone のジェスチャ サポート