言語: HTML | XAML

マウス操作への反応 (XAML)

Applies to Windows and Windows Phone

アプリでマウス入力に応答するには、タッチ入力やペン入力で使うのと同じ基本的なポインター イベントを処理します。

これらの共通の UIElement イベントを使うと、入力デバイスごとに別々のコードを記述しなくても、基本的な入力機能を実装できます。ただし、必要な場合は各デバイスの特別な機能 (マウス ホイール イベントなど) を利用することもできます。これらのイベントには、ポインター イベントジェスチャ イベント操作イベントの 3 種類があります。

ヒント  このトピックの情報は、C++、C#、Visual Basic を使ったアプリ開発にのみ適用されます。

JavaScript を使ったアプリについては、「マウス操作への反応 (HTML)」をご覧ください。

DirectX と C++ を使ったアプリについては、「マウス コントロールの開発 (DirectX と C++)」をご覧ください。

前提条件:  C++、C#、Visual Basic を使ってアプリを開発するのが初めての場合は、以下のトピックに目を通して、ここで説明されているテクノロジをよく理解できるようにしてください。

C# または Visual Basic を使った初めての Windows ストア アプリの作成

C++ を使った初めての Windows ストア アプリの作成

C# または Visual Basic を使った Windows ランタイム アプリのためのロードマップ

C++ を使った Windows ストア アプリのためのロードマップ

イベントについては、「イベントとルーティング イベントの概要」をご覧ください。

アプリの機能の概要:  この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。

ユーザー操作の概要 (XAML)

ユーザー操作のカスタマイズの概要 (XAML)

ユーザー エクスペリエンス ガイドライン:  

プラットフォーム コントロール ライブラリ (HTMLXAML) は、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバックなど、完全なユーザー操作エクスペリエンスを提供しています。 操作のサポートをカスタマイズする必要がない場合は、これらのビルトイン コントロールを使います。

プラットフォーム コントロールでは十分に対応できない場合は、以下のユーザー操作ガイドラインに従うと、どの入力モードでも一貫性のある、魅力的でイマーシブな対話式操作エクスペリエンスを実現できます。これらのガイドラインは、主にタッチ入力を対象として説明していますが、タッチパッド、マウス、キーボード、スタイラスでの入力にも当てはまります。

サンプル:  アプリのサンプルで、この機能の動作を実際に確かめることができます。

入力: デバイス機能のサンプルに関するページ

入力サンプル

入力: GestureRecognizer によるジェスチャと操作

マウス操作のサポートに関する推奨事項

ここでは、マウス操作をサポートするためのガイドラインを示します。

マウスの言語

次のマウス言語を一貫して適用することで、使い慣れた操作感をアプリに与えることができます。この結果、ユーザーが安心できるうえ、アプリの使い方がわかりやすくなります。

用語説明

ホバーによる説明の表示

要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。ヒントについて詳しくは、「ヒントの追加」をご覧ください。

左クリックによるプライマリ操作

要素の左クリックにより、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。

スクロールによるビューの変更

スクロール バーを表示し、コンテンツ領域内で上下左右に移動します。スクロール バーのクリック、またはマウス ホイールの回転により、スクロールできます。スクロール バーは、コンテンツ領域内の現在のビューの位置を示します (タッチによるパンでも同様の UI が表示されます)。

右クリックによる選択とコマンド

右クリックでグローバル コマンドのあるアプリ バーを表示します。要素を右クリックして選択し、その要素に対応する状況依存のコマンドを備えたアプリ バーを表示します。

  選択またはアプリ バーのコマンドが適切な UI 動作ではない場合は、右クリックによりショートカット メニューが表示されます。ただし、すべてのコマンド動作にアプリ バーを使うことを強くお勧めします。

ズームの UI コマンド

アプリ バーに UI コマンドを表示するか (+、- など)、Ctrl キーを押しながらマウス ホイールを回転させて、ズームのためのピンチ ジェスチャとストレッチ ジェスチャをエミュレートします。

回転の UI コマンド

アプリ バーに UI コマンドを表示するか、Ctrl キーと Shift キーを押しながらマウス ホイールを回転させて、回転のための回転ジェスチャをエミュレートします。画面全体を回転させるには、デバイスを回転させます。

左クリックとドラッグによる移動

要素を左クリックしてドラッグし、移動します。

左クリックとドラッグによるテキストの選択

選択可能なテキスト内を左クリックしてドラッグし、選択します。単語を選択するには、ダブルクリックします。

マウス カーソルを隅と端に移動したときにシステム コマンドを表示

左から右方向の画面で右上隅または右下隅 (右から左方向のレイアウトでは左隅) にマウスを動かすと、システム コマンドが含まれているチャームが表示されます。

左から右方向のレイアウトで左上隅 (右から左へのレイアウトでは右上隅) にマウスを移動すると、最近使ったアプリのサムネイルが表示されます。左クリックするか、クリックしてドラッグし、実行中のアプリを切り替えます。ドラッグしてアプリをスナップします (この操作がサポートされている画面解像度の場合)。

左から右方向のレイアウトで左下隅 (右から左方向のレイアウトでは右下隅) にマウスを移動すると、スタート画面のサムネイルが表示されます。

左クリックして画面の上端から下端にドラッグすると、現在のアプリが閉じます。

左クリックして画面の上端から下端か、左端または右端へスライドすると、現在のアプリがスライドした側にスナップされます。

 

ハードウェア

マウス デバイス機能 (MouseCapabilities) を照会して、マウス ハードウェアから直接アクセスできるアプリ UI の要素を識別します。デバイス機能の照会について詳しくは、「クイック スタート: ポインター デバイスの識別」をご覧ください。

一部のマウス デバイスには 5 つのボタンがあります。4 つ目と 5 つ目のボタン (X ボタンとも呼ばれる) は、通常、Windows Internet Explorer などの Web ブラウザーで前後のページに移動するために使います。これらのボタンを、アプリの適切な UI ("戻る" ボタンと "進む" ボタン) に関連付けてください。

マウスにホイール ボタンがある場合は、ホイールを前後に回転させたときにコンテンツ領域内で縦方向に (上下に) スクロールするようにします。 コンテンツ領域が縦方向にスクロールしない場合は、横方向 (左右) のスクロールをアクティブ化します。ホイール ボタンがチルト ホイールである場合は、水平スクロールのみをアクティブ化する必要があります。

ユーザーが修飾キー (Crtl キー) を押しながらスクロール ホイールを使った場合は、ズームをアクティブ化します (公開されている場合)。

  • Applies to Windows

Windows: 視覚的なフィードバック

  • 移動イベントまたはホバー イベントを通じてマウスが検出されたら、マウス固有の UI を表示して、要素によって公開されている機能を示します。マウスが一定の期間動かされなかった場合や、ユーザーがタッチ操作を始めた場合は、マウス UI を徐々に非表示にします。 これにより、UI の簡潔さが保たれます。
  • ホバーのフィードバックにカーソルを使わないでください。要素によるフィードバックで十分です (以下の「カーソル」をご覧ください)。
  • 静的テキストなど、要素で対話式操作がサポートされていない場合は、視覚的なフィードバックを返さないでください。
  • マウス操作ではフォーカス用の四角形を使わないでください。これはキーボード操作専用です。
  • 同じ入力対象を表すすべての要素に対して視覚的なフィードバックを同時に表示します。
  • パン、回転、ズームなど、タッチ ベースの操作をエミュレートするためのボタンを提供します (+、- など)。

視覚的なフィードバックに関する一般的なガイダンスについては、「視覚的なフィードバックのガイドライン」をご覧ください。

  • Applies to Windows

Windows: カーソル

マウス ポインターとして利用できる標準のカーソル セットが用意されています。これらが要素のプライマリ操作を示すために使われます。

標準のカーソルには、それぞれ対応する既定の画像が関連付けられています。ユーザーまたはアプリは、標準のカーソルに関連付けられている既定の画像をいつでも変更できます。Windows ストア アプリでは、PointerCursor 関数を使ってカーソル画像を指定します。

マウス カーソルをカスタマイズする必要がある場合は、以下のガイドラインに従ってください。

  • クリック可能な要素には常に矢印カーソル (矢印カーソル) を使います。リンクなどのインタラクティブな要素には手の形のポインティング カーソル (手の形のポインティング カーソル) を使いません。代わりに、前に説明したホバー効果を使います。
  • 選択可能なテキストにはテキスト カーソル (テキスト カーソル) を使います。
  • ドラッグやトリミングなど、移動がメインの操作である場合は、移動カーソル (移動カーソル) を使います。 スタート画面のタイルなどでのナビゲーションがメインの操作である場合は、要素に対して移動カーソルを使いません。
  • サイズ変更ができるオブジェクトに対しては、横、縦、対角線のサイズ変更カーソル (縦のサイズ変更カーソル横のサイズ変更カーソル対角線のサイズ変更カーソル (左下、右上)対角線のサイズ変更カーソル (左上、右下)) を使います。
  • 地図など、固定キャンバス内のコンテンツのパンを行うときは、手で摑む形のカーソル (手で摑む形のカーソル (開いた状態)手で摑む形のカーソル (摑んだ状態)) を使います。
  • Applies to Windows

Windows: コマンド実行

マウスの右ボタンがクリックされたら、アプリのアプリ バーをアクティブ化します。右クリックを受け付けない領域をアプリの UI に設けないでください。アプリ バーについて詳しくは、「アプリ バーの追加」をご覧ください。

関連トピック

ユーザー操作への応答

 

 

表示:
© 2015 Microsoft