マウス操作

[アーティクル]
07/05/2024

Windows アプリの設計はタッチ入力用に最適化し、既定の基本的なマウスのサポートを利用します。

mouse

マウス入力は、ポイントおよびクリック時に精度を必要とするユーザー操作に最適です。この固有の精度は、タッチの不正確な性質のために最適化された Windows の UI によって自然にサポートされます。

マウスとタッチ入力が分岐する場合、タッチは、それらのオブジェクトに対して直接実行される物理的なジェスチャ (スワイプ、スライド、ドラッグ、回転など) を介して UI 要素の直接操作をより厳密にエミュレートする機能です。通常、マウスによる操作には、ハンドルを使用してオブジェクトのサイズを変更または回転するなど、他の UI アフォーダンスが必要です。

このトピックでは、マウス操作の設計上の考慮事項について説明します。

UWP アプリのマウス言語

マウス操作の簡潔なセットは、システム全体で一貫して使用されます。

Term	説明
学習にマウスポインターを合わせる	要素の上にマウスポインターを置くと、アクションに対するコミットメントなしで、より詳細な情報や教育ビジュアル (ヒントなど) が表示されます。
プライマリアクションの左クリック	要素を左クリックして、そのプライマリアクション (アプリの起動やコマンドの実行など) を呼び出します。
スクロールしてビューを変更する	スクロールバーを表示して、コンテンツ領域内で上下左右に移動します。ユーザーは、スクロールバーをクリックするか、マウスホイールを回転させてスクロールできます。スクロールバーは、コンテンツ領域内の現在のビューの位置を示すことができます (タッチによるパンでは同様の UI が表示されます)。
右クリックして選択してコマンドを実行する	右クリックすると、ナビゲーションバー (使用可能な場合) とアプリバーがグローバルコマンドと共に表示されます。要素を右クリックして選択し、選択した要素のコンテキストコマンドを含むアプリバーを表示します。注選択またはアプリバーのコマンドが適切な UI 動作ではない場合は、右クリックでショートカットメニューを表示します。ただし、すべてのコマンド動作にアプリバーを使用することを強くお勧めします。
ズームする UI コマンド	アプリバーに UI コマンド (+、-など) を表示するか、Ctrl キーを押しながらマウスホイールを回転させて、ズーム用のピンチジェスチャとストレッチジェスチャをエミュレートします。
回転する UI コマンド	アプリバーに UI コマンドを表示するか、Ctrl キーを押しながら Shift キーを押しながらマウスホイールを回転させて、回転するターンジェスチャをエミュレートします。画面全体を回転させるには、デバイス自体を回転させます。
左クリックしてドラッグして並べ替える	要素を左クリックしてドラッグして移動します。
左クリックしてドラッグしてテキストを選択する	選択可能なテキスト内を左クリックし、ドラッグして選択します。ダブルクリックして単語を選択します。

マウス入力イベント

ほとんどのマウス入力は、すべての UIElement オブジェクトでサポートされている一般的なルーティング入力イベントを介して処理できます。これには以下が含まれます。

ただし、Windows.UI.Input のポインターイベント、ジェスチャイベント、操作イベントを使って、各デバイスの特定の機能 (マウスホイールイベントなど) を利用することができます。

サンプル: BasicInput サンプルを参照してください。

視覚的なフィードバックのガイドライン

(移動イベントまたはホバーイベントを通じて) マウスが検出された場合は、マウス固有の UI を表示して、要素によって公開される機能を示します。マウスが一定の時間動かない場合、またはユーザーがタッチ操作を開始した場合は、マウス UI を徐々にフェードアウトさせます。これにより、UI のクリーンと整理が保たれます。
ホバーフィードバックにはカーソルを使用しないでください。要素によって提供されるフィードバックで十分です (以下のカーソルを参照)。
要素が相互作用 (静的テキストなど) をサポートしていない場合は、視覚的なフィードバックを表示しません。
マウス操作でフォーカス四角形を使用しないでください。キーボード操作用にこれらを取っておきます。
同じ入力ターゲットを表すすべての要素に対して視覚的フィードバックを同時に表示します。
パン、回転、ズームなどのタッチベースの操作をエミュレートするためのボタン (+、-など) を指定します。

視覚的フィードバックに関する一般的なガイダンスについては、視覚的なフィードバックについては、 Guidelines を参照してください。

カーソル

マウスポインターには、標準カーソルのセットを使用できます。これらは、要素の主なアクションを示すために使用されます。

各標準カーソルには、対応する既定のイメージが関連付けられています。ユーザーまたはアプリは、標準カーソルに関連付けられている既定のイメージをいつでも置き換えることができます。 PointerCursor 関数を使用してカーソルイメージを指定します。

マウスカーソルをカスタマイズする必要がある場合:

クリック可能な要素には常に矢印カーソル(矢印カーソル)を使用します。リンクやその他ののインタラクティブな要素には手の形のポインティングカーソル(手の形のポインティングカーソル)を使用しないでください。代わりに、ホバー効果を使用します (前述)。
選択可能なテキストにはテキストカーソル (テキストカーソル) を使用します。
ドラッグやトリミングなど、移動が主なアクションである場合は、移動カーソル (移動カーソル) を使用します。主なアクションがナビゲーション(スタートタイルなど) である要素には、移動カーソルを使用しないでください。
オブジェクトのサイズを変更できる場合は、水平、垂直、および斜めのサイズ変更カーソル (,, ) を使用します。
地図など、固定キャンバス内のコンテンツのパンを行うときは、手でつかむ形のカーソル (手でつかむ形のカーソル (開いた状態)、手でつかむ形のカーソル (つかんだ状態)) を使用します。