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

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

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

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

ヒント このトピックの情報は、JavaScript を使った Windows ストアアプリにのみ適用されます。

C++、C#、Visual Basic を使った Windows ストアアプリについては、「マウス操作への反応 (XAML)」をご覧ください。

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

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

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

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

イベントについては、「クイックスタート: HTML コントロールの追加とイベントの処理」をご覧ください。

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

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

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

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

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

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

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

ユーザー操作のカスタマイズの概要のサンプルに関するページ

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

入力: インスタンス化できるジェスチャのサンプルに関するページ

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

概要

マウス入力は、ポイントとクリックの正確さが求められるユーザー操作に最適です。この固有の正確さは、Windows 8 の UI でも当然サポートされていますが、タッチの本来の不正確さに合わせて最適化されています。Windows ストアアプリの設計はタッチ入力用に最適化し、既定の基本的なマウスのサポートを利用します。

マウス入力とタッチ入力が異なるのは、タッチでは画面上の UI 要素に対する物理的なジェスチャ (スワイプ、スライド、ドラッグ、回転など) を通じて、それらのオブジェクトへの直接の操作をエミュレートする機能があることです。

直接的な操作が中心となるシナリオでマウス操作をサポートするには、マウス固有の UI を取り入れ、使用デバイスに関係なく同等の機能をアプリのユーザーに提供します。たとえば、マウスが検出されているときに、スクロールバーを使ってパンをエミュレートしたり、"前へ" ボタンと "次へ" ボタンを使ってコンテンツのページをフリップしたりします。

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

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

Windows 8 マウス言語

Windows 8 には、システム内で一貫して使われるマウス操作の簡単なセットが用意されています。このマウス言語を一貫して適用することで、ユーザーが慣れた操作感をアプリに与えることができます。この結果、ユーザーが安心できるうえ、アプリの使い方がわかりやすくなります。

用語	説明
ホバーによる説明の表示	要素にホバーすると、詳しい情報や説明を伝える視覚効果 (ヒントなど) が表示されます。操作はコミットされません。ヒントについて詳しくは、「ヒントの追加」をご覧ください。
左クリックによるプライマリ操作	要素の左クリックにより、プライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。
スクロールによるビューの変更	スクロールバーを表示し、コンテンツ領域内で上下左右に移動します。スクロールバーのクリック、またはマウスホイールの回転により、スクロールできます。スクロールバーは、コンテンツ領域内の現在のビューの位置を示します (タッチによるパンでも同様の UI が表示されます)。
右クリックによる選択とコマンド	右クリックでグローバルコマンドのあるアプリバーを表示します。要素を右クリックして選択し、その要素に対応する状況依存のコマンドを備えたアプリバーを表示します。注選択またはアプリバーのコマンドが適切な UI 動作ではない場合は、右クリックによりショートカットメニューが表示されます。ただし、すべてのコマンド動作にアプリバーを使うことを強くお勧めします。
ズームの UI コマンド	アプリバーに UI コマンドを表示するか (+、- など)、Ctrl キーを押しながらマウスホイールを回転させて、ズームのためのピンチジェスチャとストレッチジェスチャをエミュレートします。
回転の UI コマンド	アプリバーに UI コマンドを表示するか、Ctrl キーと Shift キーを押しながらマウスホイールを回転させて、回転のための回転ジェスチャをエミュレートします。画面全体を回転させるには、デバイスを回転させます。
左クリックとドラッグによる移動	要素を左クリックしてドラッグし、移動します。
左クリックとドラッグによるテキストの選択	選択可能なテキスト内を左クリックしてドラッグし、選択します。単語を選択するには、ダブルクリックします。
マウスカーソルを隅と端に移動したときにシステムコマンドを表示	左から右方向の画面で右上隅または右下隅 (右から左方向のレイアウトでは左隅) にマウスを動かすと、システムコマンドが含まれているチャームが表示されます。左から右方向のレイアウトで左上隅 (右から左へのレイアウトでは右上隅) にマウスを移動すると、最近使ったアプリのサムネイルが表示されます。左クリックするか、クリックしてドラッグし、実行中のアプリを切り替えます。ドラッグしてアプリをスナップします (この操作がサポートされている画面解像度の場合)。左から右方向のレイアウトで左下隅 (右から左方向のレイアウトでは右下隅) にマウスを移動すると、スタート画面のサムネイルが表示されます。左クリックして画面の上端から下端にドラッグすると、現在のアプリが閉じます。左クリックして画面の上端から下端か、左端または右端へスライドすると、現在のアプリがスライドした側にスナップされます。

ハードウェア

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

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

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

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

視覚的なフィードバック

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

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

カーソル

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

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

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

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